I’ve recently been dabbling in theme development and it wasn’t long before I found myself wanting to create a theme options page, so that the end user could customise their theme without having to worry about messing with all the code.
I looked at a few options, including building a theme options page out of raw code, but to be honest, the information was a little spotty and not very helpful, so I quickly abandoned that solution.
Then, I thought to search for a Theme Options Framework and it wasn’t long before I was looking at Options Framework by WP Theming.
I wasn’t expecting much, given how inconsistent tutorials and advice had been on the matter up to this point, but my attitude quickly turned around; it looked great, worked well and was incredibly easy to set up. I love the features like the image uploader, hidden fields and color picker.
Download the latest version of the theme from Github – you’ll find a link from the Options Framework Theme page. Now, you’ll notice that I’m referring to it as a theme and that’s because, at this point, it still is a theme; they’ve built it with a very simple theme, merely to demonstrate how the options work and how to call upon option values in your theme. You can also use it as a starting point for your theme. However, I’m going to assume that you’ve already started your theme, or you’re building it into an existing theme.
Once you’ve downloaded it, copy the /inc/ directory and options.php into your theme. Then, go to your theme’s functions.php file and copy the snippet from the Framework theme’s functions.php file to the very top of your theme’s functions.php file. This calls upon the framework and allows you to use the options within your theme. Everything is now installed as it needs to be.
Now you want to start building your options page. Fortunately, they’ve made the process very simple; they haven’t gone as far as to provide an interface, because that would be unnecessary bulk, but they have laid out a template which is very easy to copy.
You have a whole bunch of options to choose from for the kinds of fields in your theme options page. You can use:
- Text field
- Text area
- Drop-down selection
- Radio buttons
- Upload function (for images, logos and the like)
- Images (instead of radio buttons)
- Multiple checkboxes
- Color picker
- And a WordPress editor window
That should just about cover all bases! There’s literally nothing you can’t do with all of these options available to you. OK, so now to show you how to build them.
Open up the options.php file we uploaded earlier in your theme editor. If you take a general look over the file, you’ll notice that in between the codey bits, theres an example entry for each option type that I just mentioned. There’s also section headers to split the settings up into tabs. If you go into your WordPress dashboard, you’ll notice that there’s a new menu item under Appearance called Theme Options, where you can see what everything looks like. It should look a little something like this:
If you look back at options.php, you can see how this section is formed by the code below, from options.php:
You’ll note that each option array has several variables to help you display the fields the way you want in the options page, with extra help in the comments. For example, for the small select box box, under class you’ll see that there are three avilable options: mini, tiny and small. So you can use these examples to help build your own options page with a variety of different fields, and organise them into tabs by using the heading type (at the top of the code above) to start a new tab.
Once you give it a quick go you’ll see how easy it is to use. One thing to be aware of is the ID. The ID is a unique identifier for that field, which you’ll call upon in your theme, so make sure that it is both unique and descriptive.
The std field also allows you to enter a default value, as guidance to the end user, though you also have the name and description fields to help the end user use the options correctly.
Using the options in your theme
Once you’ve built your options page and it’s looking the way you want it to, you’re ready to take those values and actually use them in your theme.
So, head to wherever you intend to use a value in your theme and open that file for editing. Now, to call that value from the database, all you have to do is paste the following piece of code:
That will echo the value for the given option id. And you can simply repeat that over and over again for all the different options. For example, to show a custom logo, you might have something like:
Note that in this instance, I’ve used a conditional if statement to only display the custom logo if that value is set. Otherwise, it falls back to just displaying the site title and tagline. I’ve also set a variable ($custom_logo) up front to avoid repetition of the longer code, calling the option from the database. I also imagine this would result in less calls to the database, which is a good thing.
Incorporating it into your theme
You’ll be glad to hear that Options Framework is 100% GPL, so even if you’re a theme developer, you can use this framework to build your options pages and distribute them as you wish, including selling them.
So whether you just want to make it easier to make changes to your own theme, or you want to build a fully-fledged options page for a large commercial theme, the Options Framework really is an excellent fit.