I am a huge fan of WordPress. Huge. More than just a blogging platform, WordPress has evolved into a content management tool that is ideal for many small to mid-sized websites. As a designer, WordPress gives me the tools to develop a website that clients can manage without needing my help (without having to call on a programmer). It let’s me get back to being a designer as opposed to a site administrator. It empowers my clients to share content, while it frees me up to solve their design and communication problems.

Building a website using WordPress means creating a series of template files, css files, and a functions file which together form the website’s theme. These files are separate from content, therefore site owners can manipulate content via the site admin panel without interfering with design. I get to control the look, clients get to control the content. And usually, that’s about all the control I want to provide.

However, designing for the web has continually meant giving up more and more control over design. Its something every designer struggles with. We’ve learned to build flexible, adaptable designs to accommodate various users, various screen sizes, various browsers.

Is it time to start offering flexible templates that give control over our designs to our clients? Probably not. At least, not in most cases. Designers spend a significant amount of effort choosing colors, typefaces, and layouts that solve the unique communication problems of our clients based on research and experience. Chances are, we’ll keep these choices out of the hands of our clients for their own sake.

And yet there may come a time that we want or need to give them a bit more control. Oh, not colors or font size, but maybe — just maybe — there are some choices and options we want to allow them to control.

Enter WordPress Theme Options

Advanced WordPress theme developers offer Theme Options in their publicly released themes (some free, some premium) to add value — offering varying levels of customization and giving theme users presentation options. Designers of custom themes intended for a single organization can put this same functionality to use to provide additional flexibility and accessibility for our clients.

There are a number of tutorials available online describing how to set up a basic options page for a theme (see Additional Resources below for a list), so I will not attempt to recreate those tutorials here. What I want to explore are the options that can serve designers developing a custom theme for a private entity (not a publicly released theme). The code below is built upon the framework developed by Themeforest in its tutorial “Create an Options Page for Your Wordpress Theme”, which you may want to reference in order to fully grasp the following ideas.

Moving right along, here are some ideas for how to use the Theme Options page on custom sites to add value for your clients.

The Footer

One easy way to offer some control is to give clients access to the footer content without having to edit the actual template page, and its a simple enough task to complete. Create the option to display on the Theme Options page in the functions.php file (again, see this tutorial for the basics):

array( "name" => "Edit the Footer",
"desc" => "Use this textbox to edit the footer content.",
"id" => $shortname."_footer_display",
"type" => "textarea",
"std" => ""),

Assuming my $shortname is “bonsai”, I would add the following code in my footer.php template file where the content ought to go:

?php echo $bonsai_footer_stuff; ?

I’d end up with something like this on my Options page:

But this means that my client will have access to elements on the footer that ought not be touched. So, perhaps I don’t want to give the client access to the main footer content. Instead, I want to give him the ability to add an additional line of content to the footer.

This time, I will use an additional array to offer a checkbox which would determine whether or not to display this additional content:

array(  "name" => "Show Footer?",
"desc" => "Check this box if you want to show the additional footer content below.",
"id" => $shortname."_footer_show",
"type" => "checkbox",
"std" => "false"),

array( "name" => "Footer Content",
"desc" => "Use this textbox to add additional footer content.",
"id" => $shortname."_footer_content",
"type" => "textarea",
"std" => ""),

In my footer.php template, I’d perform a simple test (thank you forthelose.org for this code):

?if ($bonsai_footer_show == "false") { ?
!--DO NOTHING-->
? } else { ?>
?php echo $bonsai_footer_content; ?
? } ?

The final result in the Theme Options page would look like this:

Post Control

Another bit of control you can offer your client is the ability to determine the number of posts featured on the home page. Maybe the original design only called for two featured posts, but the client is generating some exceptional content and wants to offer more upfront. In some cases, it might be a good idea to let the client manage the number of featured posts (as long as you’re design is set up to accommodate it).

Here’s the array:

array(  "name" => "Number of Featured Posts",
"desc" => "Enter the number of posts to feature on the home page.",
"id" => $shortname."_featured_posts",
"type" => "text",
"std" => "2"),

Next up, you need to update the code in your index.php from this:

?php query_posts("showposts=2&category_name=headline"); ?>

to this (based on code from aext.net):

?php
$fpnum = get_option('bonsai_featured_posts');
query_posts("showposts=$fpnum&category_name=feature"); ?

Navigation Menu

If you’re client has been busy adding pages, he may need control over whether or not those pages ought to appear in the navigation menu. Here’s a quick an easy solution to give control to the client.

First, create the array:

array(  "name" => "Number of Featured Posts",
"desc" => "Enter the number of posts to feature on the home page.",
"id" => $shortname."_featured_posts",
"type" => "text",
"std" => "380,384"),

Next change the following code:

?php wp_list_pages('exclude=380,384'); ?

to this:

?php wp_list_pages("exclude=$bonsai_nav_exclude"); ?

With this code you can control which pages to exclude, the only caveat is your client will need to understand how to get the Page ID number.

Of course, this is only the beginning. You could actually develop a Theme Page that uses a multi-select or a set of checkboxes that lists all site pages for your client to choose from. If you want to dig deeper into using multi-selects or sets of checkboxes, this tutorial from aquoid.com promises to provide you with all the details if you’re ready to dig in a bit deeper.

Variety is the Spice of Life

Do you want to offer a little variety to your client? Give him the ability to change the header graphic for the site. You could allow a client to choose which header graphic to display for different holidays, seasons, or when running a special or a sale.

To keep things simple, let’s assume I want to have a different header for each season plus a default header image. What I need to do is create a dropdown menu with the different choices:

array(    “name” => “Header Image”,
“id” => $shortname.”_header”,
“type” => “select”,
“std” => “Default”,
“options” => array(”Default”, “Winter”, “Spring”, “Summer”, “Fall”)),

Then, I need to create artwork for each option. In this case I have created Default.gif, Winter.gif, Spring.gif, Summer.gif, and Fall.gif and I have uploaded these files to my theme’s images folder.

So far so good.

The problem now is that I control the header graphic as a background image via my stylesheet. What I need to do is use a dynamic stylesheet in conjunction with my Theme Options page to open up the control over the design. The following solution is based on the work by Jeremy Clark.

For simplicity, I have created a stylesheet just for my header style. Instead of calling it headerstyle.css though, I name it headerstyle.php. Here’s what it looks like:

?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$offset = 72000 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
$css = $_GET["css"];
$css = urldecode($css);
$s = explode("|", $css);
$bonsai_header=$s[6];
echo CSS

#header {
width:760px;
height:121px;
padding: 0 0 0 20px;
overflow:visible;
background: #fff url(./images/{$bonsai_header}.gif) no-repeat;
}

CSS;
break;

There are a couple of things that are worth mentioning in the code above.

Look at the line that reads:

$bonsai_header=$s[6];

The number 6 refers to the sixth option in my Theme Options page (the first item is 0, the second item is 1, etc). You need to change that to the appropriate value.

Also, take a look at my #header rule, which should look pretty familiar. In the background property, the url has been changed from:

background: #fff url(images/Default.gif) no-repeat;

to this:

background: #fff url(./images/{$bonsai_header}.gif) no-repeat;

Basically, I updated the url to include the initial ./ before images/ and I used the $shortcode_id (in this case $bonsai_header) to replace the name of the file.

The last thing I need to do is create a link to my headerstyle.php stylesheet like so:

<link rel="stylesheet" type="text/css" media="screen" href="">;?php bloginfo('template_directory') ?/headerstyle.php?css=?php echo $css

Now my header will change based on the selected option.

Continue Exploring Theme Options

Well, now that you’ve gotten a taste of how using a Theme Options page can benefit custom theme development every bit as much as it does for public themes, I hope you’re ready to start cooking up your own ideas and put this to use for your clients. Below are a list of resources for exploring the possibilities of theme options.

Getting Started with Theme Options

• Create and Options Page for Your Wordpress Theme
• How to create and Options Page for Your Wordpress Theme
• Create An Awesome WordPress Theme Options Page

Taking it to the next level

• Wordpress Theme Design with Options Administration
• Wordpress Theme Options Framework
• Wordpress Theme Options Framework Updated
• Wordpress Theme Dev Tip – Dynamic