There’s now a plugin version of this framework. This theme version will be updated sometime in the next couple weeks to use the plugin instead.
I’ve completely rebuilt this version of the Thematic Options Panel from the ground up. It allows users to easily change the layout, upload a logo, and update the colors of Thematic through an options panel. The theme was built primarily for other developers who want to add options for their own projects, and includes examples of how to add image uploaders, radio buttons, stylesheet selectors, color pickers, and other input fields.
If you want to use this options panel in a non-Thematic project (i.e. theme of your choice), see this post. For a video demo of how the theme works, you can also go here.
The functionality is based heavily on the WooThemes options panel and incorporates a huge amount of their code. If you’ve ever worked with Canvas, or other WooThemes, the easy ajax interface should be familiar. All the options are defined in theme-options.php through an options array. Here’s some example options you can use:
Ajax Image Uploader
$my_options[] = array( "name" => "Upload Basic", "desc" => "An image uploader without text input.", "id" => "uploader", "std" => "", "type" => "upload_min");
Input Field
$my_options[] = array( "name" => "Input Text", "desc" => "A text input field.", "id" => "test_text", "std" => "Default Value", "type" => "text");
Color Picker
$my_options[] = array( "name" => "Colorpicker", "desc" => "No color selected.", "id" => "example_colorpicker", "std" => "", "type" => "color");
Screenshot of Styling Options
Using the Options
The actual functionality for the theme options is in the file theme-functions.php. To get the contents of an option, you’d use: get_option($shortname . ‘_optionname’);.
Here’s an example for how the Google Analytics option text gets displayed in the footer:
/*-----------------------------------------------------------------------------------*/
/* Show analytics code in footer */
/*-----------------------------------------------------------------------------------*/
function childtheme_analytics() {
global $data;
$output = $data['google_analytics'];
if ( $output <> "" )
echo stripslashes($output) . "\n";
}
add_action('wp_footer','childtheme_analytics');
Displaying in a Theme File
global $data; echo $data['of_twitter']
Checking if Option Has Been Set Before Displaying
// Sets a variable from the option and does a boolean check for content
global $data;
if ($data['of_twitter']) { echo $data['of_twitter']; }
People were asking about how to output the typography options, or other arrays. You would do it something like this:
$typography = $data['body_font'];
$output .= "body {\n font-face:" . of_font_stack($typography['face']) . "; \n";
$output .= " font-size:" . $typography['size'] . "; \n";
$output .= " font-style:".$typography['style'] . "; \n";
$output .= " color: ".$typography['color'] . "; \n";
$output .= "}\n";
echo $output;
Download the Theme
The theme is available on GitHub at: https://github.com/devinsays/thematic-options. You can also download it directly here.
This project has also been forked https://github.com/helgatheviking/thematic-options-KIA by an active Thematic developer. I’ve moved in most of her changes as this point, but I’d recommend keeping an eye on her fork.
If you read the theme files, there’s a lot of inline documentation that should explain what’s going on. Take a look at the example options in particular (screenshot below). This is still an early release, so you if you notice any bugs, please let me know.
License Information
This code is licensed under the GPL. You can read more about the GPL here. It is the same license that WordPress carries, so if you are releasing or selling themes you should definitely take a look at it and make sure your theme carries a compatible license.
Many of the questions I’ve gotten about this release is whether this code can be used and/or sold commercially. The answer is yes, as long as your theme or plug-in carries the same GPL license. Have fun!
Hi Devin,
first of all thank you for great work!
I’m brand new in developing wordpress websites with frameworks like thematic. I tested your extention and everything works fine. The only thing I couldn’t follow is the “example option” section. What is it for? Thanks again!
Best regards
Chris
It’s just to show people how they can add their own options of different types to the panel. “Example Options” if you will. I’d delete those from the array if you aren’t using them.
i released a free child theme for thematic that uses devins original thematic options panel.
it has been extensively built upon, so that said, the theme may be no good to you, but digging around the code may help explain how some of the options get implemented into the theme.
http://blog.virtualpudding.com/web/arrival-free-child-theme-for-thematic/
First off… THANK YOU for making this super easy! I’m having one tiny problem. When I I got to the theme option panel I loose the styling you have on your option panel. I’m using a child theme of thematic, so I’m not sure what I’m missing. Anyone else having an issue or know what I’m doing wrong?
Hi I have problem with google anlytics bug,
after saving i get \’ instead ‘ (‘ characters in textarea are replaced by \’.)
Please help.
Make sure you have the latest version from GitHub. It works for me. I also checked to make sure the code was in correctly to strip slashes on textboxes: $ta_value = stripslashes($data[$value['id']]);
Hi again,
I have the latest version and corect code too.
It works for me on my local WP installation, but when I upload files on server I have this problem.
BTW: Great work!!
Here is my working demo:
http://preuro.eu/preview/02/
when you check source code in the footer you can see the bug.
Make sure you also escape the characters when you output it in the theme.
Would it be possible to offer a checkbox example? For some reason it’s not working as I expected.
If I’m trying to hide an image if the box is checked, I simply wrote it like this. Doesn’t seem to work, though. Thanks for any tips.
Should be something like:
global $data
if ( $data['of_checkbox_example'] == ‘true’) { // Do something }
Hi Devin
thanks so much for the tut – it looks easy AND it looks good – cant wait to start implementing it and playing around.
One question: Is it possible to create a dropdown/select that lists all the posts of a specified custom post type? Multiple select would also be nice! Any tips or ideas?
(just followed you on Twitter too)
Hi Mark. You can pass any array to a select box (including custom post types). Try looking at how the categories are passed in the example. Multiple selects can also be set up, but it would involve a little bit of customization. I’ll put up a demo of how to do this at some point.
Great, thanks Devin, will give it a try
Hi Devin, Just letting you know how I love these theme options in my WP work. Really makes things lots easier for all of us.
Just a question of trying to expand the Theme Options…
Is it possible to have multiple fields under 1 header? For example: “Contact Information” would have 6 text input fields: name, phone, email, address #1, address #2, city. Would it be possible to include them all under one and the same header called “Contact Information”?
I think this would be more of an issue for the Admin area than the actual functionality of the theme options in general, but still i’d like to know if it’s possible.
Thanks a lot and keep up the great work. Looking forward what comes out of the development into a plugin.
Hey Mark. All the options have classes applied to them- so you could likely just edit the options panel stylesheet to achieve that.
Pingback: Options Framework: add a few options with a dynamic stylesheet - notlaura
anyway to use the ajax uploader for a post meta box?
Question…for the options array, you use esc_html() for the description key. Which i can understand for security probably. But…what if you wanted to create a link to another page, or documentation elsewhere. Maybe, instead of an all or nothing…desc key would filter out all tags except links or bold.
Great work by the way.
Cheers,
Wok
Hi Devin first of all great tutorial, i’m having issues when its time to implement it on my theme for example the logo doesn’t show with the
echo get_option('of_logo');and i dont think i changed the shortname i used it from the box and shows nothing, is there anything i might be doing wrong?Whoa you are awesome man. Thanks, I will expand this today… :D
Hey I have got one question.
-I really want to add new option Slider like premium themes.
Slider option choose…
I added some code but i’m not digging this framework code.
How to add slider choose option and Where i seperated code each slider….
$my_options[] = array( "name" => "Select a Slider type","desc" => "A list of all the sliders being used on the site.",
"id" => "Example slider",
"std" => "Select a category:",
"type" => "select_slider",
"options" => $type);
Then i added admin-interface.php
case 'slider_type':if($type='3D slider') {
$output .= '3D slider';
}
break;
}
I know this is a great plugin.
I’m new and try to learn by yopur post.
Download and everything but make me confuse with so many file you have, and some articles is same to me. Link to link make me confusse.
Do you have a step by step instalation’s article?
I was download, copy the folder to my theme but nothing happened, the panel option is not show up in my theme (I use twentyten)
Thanks.
The Thematic Options Panel hasn’t been updated in a while, you should use the plugin version until I release a new update: http://wptheming.com/options-framework-plugin/
Thanks so much, Devin.
Text version of tutorial will be great.
Is anyone here have complete tutorial?
Hi,
I just upgraded to WordPress version 3.2 and the footer of wordpress floats on top of the panel like this: http://cl.ly/1i3s1C333o2L1k0C1v2R. I’ve tried adding clear but it didn’t help. Any suggestions?
I haven’t updated this code in a while. I’d recommend switching to the plugin version http://wordpress.org/extend/plugins/options-framework/ if you can. But I’ll try to update when I get a chance. I’m guessing that a clear is needed on line 740 of admin-interface.php.
Thank you for your response. Unfortunately clear in line 740 didn’t work. Can you give another suggestion if possible?
You’re right. If you remove the close div on line 106 it appears to actually fix it, at least with the default demo options, but I really need to give this code an update to match the options framework plugin code.
That worked! Thank you very much :)
Hello,
first, thank you for releasing this, its really great stuff. I’m having a small issue – I’m testing on localhost, using XAMPP and when I select another css theme stylesheet in options menu, the css file is not loaded. The reason is that the path is not correct:
Layout css are loaded correctly with correct path, the issue is only with files loaded from styles folder. I guess the issue is in Stylesheets Reader in theme-options.php but not sure how to fix that. Thank you for any help.
Hi,
We seem to have the same issue Dannci has regarding the Google Analytics code. When we insert the tracking code it is being displayed with slashes even though we haven’t touched the options panel files. We use the latest version.
Yes, latest version is still way out out of date. I’d recommend using the Options Framework plugin until I get an update out for this. If you need a fix before then you can add “stripslashes” on the output.
Hey Devin, how can i change in the “select a page” drop down to show the actual page title instead of the id? thanx!
Great! …only i have notice that in example option panel the footer of wordprss stay up the panel
I also noticed that when you click “Remove” on the uploader, it removes the image visually, but not from the actual server. Anyway to fix this?
I’m facing the same issue as Pixi… I’ve upgraded WP to 3.3 and I’m getting the WordPress Admin footer overlapping over the Options. I tried removing closing DIV on line 106 in “admin-interface.php” file, but no luck. Can you please suggest me a quick fix. I don’t wish to go with Plug-in and want to include the code in my theme files itself.
Another thing… in Demo Options Page, there are two “Upload” fields, one is said to be without Text input whilst other is said to have Text input. But in Chrome as well as in Firefox, both these fields appear as buttons. I’ve not looked into this issue as yet since that’s not my theme requirement for now. The Footer overlap issue is more important for me to fix and somehow I’m just lost in the HTML and not able to detect the problem; seeking your help here my friend.
Other that that, everything else looks good and functional; great work, thanks so much!!
Hello Devin, this is awsome..! to grab all options you have :
global $data;
$data = get_option(OPTIONS);
echo $data['my_option_id'];
How to make the implementations more simple like :
echo get_option('my_option_id');
I was try but doesn’t work… can you help me?? thanks a lot …
All the theme option data is saved into a single serialized array. This is how WordPress recommends to do it, otherwise you’d have dozens of options cluttering up your options tablef or each theme you’ve activated.
You can build a helper function, if there something you don’t like about $data['option]. Such as function get_my_custom_option(‘option’).
Hi Devin !
First…thank you for this great “Addon” for WordPress…it works great !
Now my question:
How can I change the font-face and font-size in the typography-part.
I dont want to use only the standard font-face (Verdana, Georgia, Tahoma etc.) and pixel as font-size…how can I add more font-face (like fonts from google-fonts) and how can I change the font-size from px to em ?
Thanks for your help and greetings from Germany,
Roman