WordPress Theme Options Framework
By Jeremy Clark
guides, tech, wordpress |
code, php, theme, wordpress | 1,501 views
Update: New Version
I’ve released a newly optimized version of the Theme Options Framework that now only makes two calls to the database rather than one call per option.
Recently I’ve been doing alot of work on my themes. I started off with the idea to make my theme work user friendly by adding a options page. So I started looking for how to do this, and came across this page and some useful code. So I took this and started modifying and trying different things and now I think I’ve got a very useful framework and I wanted to share with others. I’ll continue below as this will be fairly long post.
Update
Mike from Split Visonz has updated my framework to include a checkbox and multiple selection elements. Multiple selection is a dropdown list where you can select multiple items. You can download the new version below and I’ll explain the new additions as well.
First you’ll need to download the framework file:
After you have the controlpanel.php file uploaded to your server into your theme’s main directory you’ll need to add this line to your functions.php file
<?php require_once(TEMPLATEPATH . '/controlpanel.php'); ?>
Now you’ll need to start editing the array values to add your options.
$options = array (
array( "name" => "Radio Selection Set",
"desc" => "This is a descriptions",
"id" => $shortname."_radio",
"type" => "radio",
"std" => "3",
"options" => array("3", "2", "1")),
array( "name" => "Text Box",
"desc" => "This is a descriptions",
"id" => $shortname."_text_box",
"std" => "Some Default Text",
"type" => "text"),
array( "name" => "Bigger Text Box",
"desc" => "This is a descriptions",
"id" => $shortname."_bigger_box",
"std" => "Default Text",
"type" => "textarea"),
array( "name" => "Dropdown Selection Menu",
"desc" => "This is a descriptions",
"id" => $shortname."_dropdown_menu",
"type" => "select",
"std" => "Default",
"options" => array("Default", "Option 1", "Option 2")),
array( "name" => "Checkbox selection set",
"desc" => "This is a descriptions",
"id" => $shortname."_checkbox_menu",
"type" => "checkbox",
"std" => "Default",
"options" => array("Default", "Option 1", "Option 2")),
array( "name" => "Multiple selection box",
"desc" => "This is a descriptions",
"id" => $shortname."_multi_select_dropdown_menu",
"type" => "multiselect",
"std" => "Default",
"options" => array("Defaults", "Option 1s", "Option 2s"))
);
I’ve included in the framework examples of all the types of elements you can add, you can have as many options as you like. Notice there are four different types text, textarea, radio, select, multiple select, and checkbox. Also pay attention to the type of the file to the first two variables that you need to edit to reflect your theme.
$themename = "ThemeFullName"; $shortname = "themeShortName";
After you have your option page the way you like you’ll need some way of get the variables onto other pages of you theme. You’ll need to add these next few lines to every page on which you plan to use the theme variables.
<?php
global $options;
foreach ($options as $value) {
if($value['type']!="checkbox" and $value['type']!="multiselect"){
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else {
$$value['id'] = get_settings( $value['id'] ); }
}
else{
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = explode(",",$value['std']); } else {
$$value['id'] = explode(",",get_settings( $value['id'] )); }
}
} ?>
Now you can use the variables on this page. The variables will look like this let’s assume you set $shortname = “theme”, then your variables will look like this $theme_radio, $theme_text_box, $theme_bigger_box, $theme_dropdown_menu. Also keep in mind that you can add one than one of any kind of element, you can also rename any of the elements for easier variable management. Where “id” => $shortname.”_radio”, is defined you can change the _radio part to reflect what the option is actually for. For example I have mine set to chose how many columns my theme displays, so my variable is “id” => $shortname.”_columns”.
Update
To check the value of your multiple selection or checkbox variables you’ll need to use this. Where Item is the value that your checking that is selected or checked.
if(in_array("Item",$theme_checkbox))
26 Comments
Trackbacks / Pingbacks
- Mommy’s Idea Book » Blog Archive » Theme Options Framework
- Wordpress Theme Options Framework Updated. | Split-Visionz
- GrindSmart Magazine Design Articles & Tutorials » Blog Archive » WordPress: Giving Clients Access to Theme Options
- 10 Rare WordPress Theme Options Page Tutorials To Get You Started | CSS Reflex - Design Blog | Web Design | Inspiration and Resources for Designers
- 10+ WordPress Tutorials: How to Create an Options Page for Your WordPress Themes and Frameworks - WPConstructs.com




| (6 votes, average: 4.83 out of 5)
Andrew Turner
Feb 15th 2009 @ 12:53 amNice tutorial there, been looking for something very much like this, and the WP Theme Toolkit was a little too bloated for me.
Thanks.
Jeremy Clark
Feb 18th 2009 @ 7:51 amThanks I can’t take all the credit for it though, I did borrow most of the code and just added a few extra elements to it.
MusicReview
Mar 23rd 2009 @ 4:22 amThank you very much for this framework. This made it much easier for me to ad some large textboxes to my options page, and means I don’t have to edit theme files anymore
Jeremy Clark
Mar 23rd 2009 @ 7:55 amGlad that it helped.
steven
May 16th 2009 @ 3:35 amGreat tutorial, but is there a way to put a stylesheet in it?
Steven
Jun 29th 2009 @ 1:22 pmSorry, but I got another question. Is there a way to put a select multiple in the framework? I already tried, but when I want to get it, wordpress only shows one of all things I selected. Hope you understand me
Jeremy Clark
Jun 29th 2009 @ 9:23 pmI haven’t been able to figure it out either. If I do though I’ll post an updated version.
Mike
Sep 9th 2009 @ 2:11 amNice work, I cannot believe I never put something together like this before. I came across this page while looking up how to properly add a select option again as i was having a problem doing it off the top of my head and I’m glad I found this little bit.
As for Stevens problem, could you not just implode/explode the selected options with a delimeter so you can save themall together as a single option if wordpress will not save all the selected options by default.
Mike
Sep 11th 2009 @ 12:47 amI just updated this script to include multiple select boxes and checkboxes Jeremy, you can check it out on my blog. Let me know if you have any suggestions or criticisms.
donna
Oct 13th 2009 @ 7:41 pmhi… I’m using your techzoic WP theme. can’t figure out how to modify any .css.
I’ve used the custom css box in the options page…no go.
I’ve modified the style.php file…. no go.
please help.
I like your theme — except for this… I’m just missing something, right?
Jeremy Clark
Oct 14th 2009 @ 7:53 amI wouldn’t recommend changing the style.php unless you understand how it works. The custom css box in the options page should work just fine though. I’ll contact you through email to get more info.
Fernando
Dec 22nd 2009 @ 11:16 amHi Jeremy, I’m trying the framework but when I include the controlpanel.php the theme simply stops rendering. I only get an empty page without code when I see the site.
The file seems to overwrite a couple of Thematic’s Theme and this is could be the problem, but I can’t figure out what’s wrong.
I don’t have a clue.
Thanks for your help
Jeremy Clark
Dec 23rd 2009 @ 2:10 amI’ll have to have a look at the Thematic’s code and see what the problem might be. I’ll contact you by email if I figure out the problem.