PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Creating Theme Options

Posted by on 30th Apr 2009 | 1 comment

If you create WordPress themes then a useful addition to a standard theme is to give the user a simple way to change the logo or header in use, perhaps allow them to change the colour of the background, the width of the site too. These options are designed to save people time but more importantly, to make it easy for non-developers to make a few alterations to their theme without needing to go looking through the code.

So first we need to create an admin page to go into the Appearance menu. To do this we can insert the page into the theme’s functions.php file. We create the page similar to how we created admin pages for our plugin. e.g.

[sourcecode language="php"]add_action(‘admin_menu’, ‘ourtheme_add_theme_pg’);

function ourtheme_add_theme_pg() {
add_theme_page(__(‘Theme Options’), __(‘Theme Options’), ‘edit_themes’, basename(__FILE__), ‘ourtheme_functions’);
}[/sourcecode]

This will add a new menu item called Theme Options into our Appearance menu in the admin. Then we need to decide what options we’re going to offer the users. Bear in mind, the more options you offer, the more code is required and the slower the site can become. I’ve seen a site slow down from 0.5 seconds to 15 seconds load time, just due to a badly written theme options page!

So let’s allow the user to change the image file used. In the theme directory you can create an images directory to store a number of different banners (or the user can add more of their own), so we’ll just give them the option of choosing one of these rather than going through the code of how to upload an image to the website.

The Basic Admin Page

Let’s just grab the basic admin page code again to use as our template:

[sourcecode language="html"]

< ?php _e('Theme Options'); ?>

< ?php _e('Sub Header'); ?>

** Form or content goes here **

[/sourcecode]

List Banners Available

On the page we’ll check all of the banners available within the images directory and list them in a select list. We’ll also pre-select the current one used:

[sourcecode language="php"]


[/sourcecode]

Here we open up the images directory within the template directory (found by using the WordPress function get_template_directory()) and then loop through each file found and add it to our select list providing it is an image file (achieved by checking the last 4 characters of each file found against the array of file extensions). This also checks the filename against the current file in use and marks the option as selected if it matches.

This code, along with a submit button is then inserted into our default admin page code above.

Process the Form

To process the form all we need to do is check the submit button has been clicked, if it has then grab the image selected and store it in our options table i.e.

[sourcecode language="php"]if (isset($_POST['theme_submit'])) :
update_option(‘ourtheme_header’, $_POST['topimg']);
echo ‘

‘.__(‘Options saved.’).’

‘;
endif;[/sourcecode]

Final Admin Code

This gives us the final code to go into our functions file of:

[sourcecode language="php"]add_action(‘admin_menu’, ‘ourtheme_add_theme_pg’);

function ourtheme_add_theme_pg() {
add_theme_page(__(‘Theme Options’), __(‘Theme Options’), ‘edit_themes’, basename(__FILE__), ‘ourtheme_functions’);
}

function ourtheme_functions() {
if (isset($_POST['theme_submit'])) :
update_option(‘ourtheme_header’, $_POST['topimg']);
echo ‘

‘.__(‘Options saved.’).’

‘;
endif;
?>

< ?php _e('Theme Options'); ?>

< ?php _e('Sub Header'); ?>

< ?php } ?>[/sourcecode]

Front End Edits

Finally all we need to do is set up the code for the header.php file to check which banner to display. So wherever the banner is displayed we just need to take the default image filename out and use the following PHP code:

[sourcecode language="php"]” alt=”Top Banner” />[/sourcecode]

Alternatively, if your banner is using the image replacement technique, then you’re best off adding an action to add the CSS style needed to the wp_head() function in your function.php theme file e.g.

[sourcecode language="php"]add_action(“wp_head”, “ourtheme_addheader”);

function ourtheme_addheader() {
if (get_option(“ourtheme_header”)) :
echo ‘

‘;
endif;
}[/sourcecode]

This will then insert the style to override the default styling set up in your CSS stylesheet.

This is just a simple example of creating an options page for your theme, but the logic is the same for virtually all the options you could want to offer. Just create the various form elements to allow the user to make their changes, and save the selections and information in the options table using unique option names.


A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

1 comment - Leave a reply
  • Posted by Dave on 11th May 2009

    I like the tutorial. But I am getting an error on line 34.