How to add Wordpress Theme Options

This guide will show you how to make an options page, that can pass on variables to your stylesheet.

We need to work with 3-4 different files for this type of options page:

functions.php
style.css
style.php
header.php

I have created a nice and easy to use base functions file, where we will begin our editing. Download the base file here and take a look at it.
http://theundersigned.net/wp-content/optionspage/functions.phps

With this file the form and admin page should fully automatically be created, but you will have to define what elements you want people to be able to change. These are the settings set in the functions.phps file when you open it:

$themename = “Theme name”;

$shortname = “tn”;

$options = array (

array( “name” => “Body background color”,

“id” => $shortname.“_body_backgroundcolor”,

“std” => “#FFFFFF”,

“type” => “text”),

array( “name” => “Body font color”,

“id” => $shortname.“_body_color”,

“std” => “#000000″,

“type” => “text”),

array( “name” => “Body font”,

“id” => $shortname.“_body_font”,

“type” => “select”,

“std” => “Arial”,

“options” => array(“Verdana”, “Arial”, “Georgia”))

);

As you might have figured out, you will have to give the $themename variable your themes name, and the $shortname variable your theme names shortname. Now for the more tricky part. Each array is the things you want your user to be able to change - in this case the body background color, the body font color, and the body font.

The arrays should include these:

name - the text the options page should show
id - an id for you to remember. This id should is going to be used in the stylesheet
std - the fields standard value.
type - what form type should it be listed as in the optionspage, text or select.
options - only for select boxes, this are the options available.

Style.php

Create a new file called style.php - open your style.css file and copy everything over, besides the theme information in the top - we will have to leave that in the style.css in order for WordPress to recognize your theme.

When you have copied everything over, save style.css and close it - we won’t need it anymore.

Please be sure that your theme’s header.php has this template tag in the header - in most cases it already has:

<?php wp_head(); ?>

Add these lines to the top of the style.php file, before the style.css content you pasted in it. This code makes sure that style.php gets all the settings defined in the functions.php file:

<?php

require_once( dirname(__FILE__) . ‘../../../../wp-config.php’);

require_once( dirname(__FILE__) . ‘/functions.php’);

header(“Content-type: text/css”);

global $options;

foreach ($options as $value) {

if (get_settings( $value[‘id’] ) === FALSE) { $$value[‘id’] = $value[’std’]; } else { $$value[‘id’] = get_settings( $value[‘id’] ); } }

?>

Now for each place you want to use one of the fields you made on the options page, use php to echo the value of the id you defined in the very beginning. Here is an example (where “tn” is the shortname you defined):

body {

font-family:<?php echo $tn_body_font; ?>;

color:<?php echo $tn_body_color; ?>;

background-color:<?php echo $tn_body_backgroundcolor; ?>;

}

Download the example style.php file here.
http://theundersigned.net/wp-content/optionspage/style.phps

Other ways to use it

Just as in the style.php, you could easily add this little snippet in your header.php file:

<?php

global $options;

foreach ($options as $value) {

if (get_settings( $value[‘id’] ) === FALSE) { $$value[‘id’] = $value[’std’]; } else { $$value[‘id’] = get_settings( $value[‘id’] ); } }

?>

Now you can use all the same variables directly in the theme files, use them as conditional tags, or just echo them.

The end

Using this base functions.php file and style.php technique, you can easily make everything on your site changable through the options page. If you experience any problems, don’t hesitate to comment on this post. Also if you have integrated this in your theme, please leave a note for others to see

Two things that easily could be wrong, if you experience any problems:

You are missing the wp_head template tag in your themes header.
In functions.php file, be sure there are no whitespace (spaces/linebreaks) before the first <?php or after the last ?>.

INTINYA SAJA