The Options Framework Theme has all the code included to build a out a full featured options panel. It’s a bundled version of the Options Framework Plugin for those folks who want to build the options directly into the theme (rather than relying on a plugin).
Available Options
- text
- textarea
- checkbox
- select
- radio
- upload (an image uploader)
- images (use images instead of radio buttons)
- background (a set of options to define a background)
- multicheck
- color (a jquery color picker)
- typography (a set of options to define typography)
- editor
Instructions
Copy the “inc” directory, options.php, and the code snippet in functions.php from the “Options Framework Theme” into the theme of your choice. Hack away. You can also watch the screencast here to see how it’s done.
When to Use Theme Version vs. Plugin Version
The code is 99% the same between the plugin and theme version. If you can do what you need with the plugin version, I think that’s the best route. If you find that you need to make significant modifications that aren’t possible with the plugin, go ahead and use the theme version.
Change the Menu Location
It’s highly recommended that you leave theme options under the “Appearance” menu where users expect them.
But, if you do decide to change the menu location it will break the media uploader. This is because the media uploader scripts are enqueued on $of_page= ‘appearance_page_options-framework’ in options-medialibrary-uploader.php. If you change the name or location of the menu, you’ll need to update the hook to be accurate, e.g. $of_page= ‘toplevel_page_options-framework’ and those scripts will load properly again.
Sanitization Filters
If you’re interested in how the options data is verified, or if you’re wondering why your script and embed tags are stripped out in the Options Framework, read this post.
Can I Use This Code in Commercial Themes
Yes! This code is 100% GPL. Please read the included license for more details.
Development Version on GitHub
The development version of the Options Framework Theme is available on GitHub.
Additional Tutorials
- Options Framework + Theme Customizer
- Options Framework Sidebar
- Loading Additional Stylesheets from an Options Panel
- Loading Google Fonts from Theme Options
- Color Palettes with the Options Framework
- Options Framework: Sanitization Filters
Purchase the Options Framework Theme Kit
The Options Framework Theme Kit, which includes the latest released version of the Options Framework Theme plus a collection of demonstrations themes is available for $30. You’ll be able to download updates and get new child themes as they are released.
If you only plan on using the plugin version of the Options Framework, the Options Kit might be what you’re looking for.
Hi Devin,
you wrote a really wonderful plugin! And documentation! Thanks a lot :-))
Did you find out a way to add the options generated css styles to the tinymce editor, the wordpress page and post editor? I only found ways to include ready hardcoded stylesheets, but no dynamically created styles.
Thanks! Fee
Hello I have a issue with the plugin everytime I uploads the project from my local server to live server , all the option framework values lost..could you please help me regarding this…
You made my day! Thank you very much for this wonderful plugin, I was already giving up on adding theme options to my theme, when I found your project on GitHub!
This framework is fantastic! Just one question: is it possible to add more than 1 options box to the same page? I’ve been looking at the code and it looks like that in order to achieve it I’d have to rewrite quite alot of options-interface.php, or is there any quicker/easier way to do it?
If you wanted out output multiple option sets on the page rather than tabs, yes, that would involve some customization of options-interface.php. I don’t think it would be too difficult- just some markup changes.
Pingback: Options Framework & Theme Custmoizer | Jeremy Clark - TechNet.com
Hi Devin,
This is something I was looking for from a long long time ago. You seriously made my day. I’m going to use this website to sell the themes I create: WordPressAction.com
This is going to guide me in a right direction of the path towards creating a sell-able WordPress theme.
Thanks a ton.
Swapnil Samfrancisco.
Nice. Also, you might want to be aware that you can’t use “WordPress” in a domain name: http://wordpress.org/about/domains/. I made that mistake when I first started this site.
Hey Devin,
Awesome framework you’ve got here. I’m not a dev by trade and the options panel is always a PITA for me!
I’m trying to use it in a child theme for the Genesis framework. I’ve copied over the /inc/ folder and options.php and I’ve copied the code from your functions.php to mine (and changed it to stylesheet_directory) but can’t get the settings page to appear in the Appearance menu.
I MUST be doing something monumentally stupid but I can’t figure out what. Any ideas? :/
No, it should work. But Genesis does have it’s own API wrapper that might be better to work with. See: http://www.billerickson.net/admin-pages-with-genesis/
Hmmm. I’m definitely doing it as rx’d in your instructions. Weird that it’s not working.
Hah, I figured it out.
Turns out, the starter theme I’m building this one on is already using your framework!
Rookie mistake, eh? ;)
Updated to 1.4 but the color palette stopped working. help!
Chrome gives this error:
Uncaught TypeError: Object [object Object] has no method ‘ColorPickerSetColor’
Works for me in both WordPress 3.4 and 3.5. Have you made any edits to the theme?
Finally i find the answer, it’s the plugins array from tinymce param,
so i set the editor setting like this
$editor_settings = array(
...
'tinymce' => array( 'plugins' => 'inlinepopups, wordpress, my_registered_mce_plugin' ),
...
);
Thanks Devin
Hi Devin,
Just found out that the submit buttons break on WP 3.5 because of fixed height: 16px and width: 45px. I’ve made a small fix to it
#optionsframework .controls input.upload_button {
float:right;
width: auto;
border-color:#BBBBBB;
cursor:pointer;
min-height: 16px;
Thanks
Have you downloaded the most recent version (1.4)? Everything should be working fine.
Hi Devin,
When I add the options to my theme as per your video and tutorial, the all options are there but the ajax (or what it seems to be ajax) not the other js doesn’t work. Also, the pages are being displayed like a very long page and the tabs are linking to parts of the same page. It seems like is js is not loading. Any ideas of why?
Nope. Are you using the theme as downloaded, or have you made customizations?
Is there an easy way we can just show the tab’s content on the page instead of scrolling to the tabbed content’s section?
Not quite sure what you mean by “scrolling”. You should be able to just click on a tab to get to it’s sections content. If you want all the content on one page, you could do that as well by just not including the headings in options.php.
First of all I apologize for my English but it is not my native language. My question is this, I’m using WordPress 3.5 and I wonder if we recommend using the latest version of the Theme or I can continue using an earlier, since by design I like more the 0.6 (personal issues)
I always recommend using the latest version. 0.6 is almost two years old.
Is there a way to do automatic update when I implemented this plugin as the part of the theme?
If you’re not customizing the framework at all, use the plugin version. It gets automatic updates. :)
Cool cool. But I am thinking is like wooframework. But using plugin version is alright. Thanks man!
thx alot for your great work ,
there are any method to make tabs float left as i will have more than 10 tabs and it will be not good to located at the top
You can hook in a stylesheet and restyle them however you like (or, just alter the framework directly).
can’t help for what i should fo exactly as i have been try and i can’t
Hi Devin,
Thanks for your great job on options framework.
I just want to ask about editor type in option panel.
( options-interface.php line 346 )
case 'editor':
$output .= '' . wp_kses( $explain_value, $allowedtags) . ''."\n";
echo $output;
...
Why is
echo $outputstanding there ??I try to put the wp_editor on the old options framework version as best practice,
but the editor appears at the top of the page, above the options-framework panel,
not inside the section’s id. Can you explain what needs to be repaired.
Best Regards,
Yulius
Ooops almost forget, Happy New Year to everybody..
For most of the options $output is echo’d out below switch statement. However, since wp_editor needs to be called, it gets outputted inside the switch, and then $output is reset back to blank.
Hello Devin, since in WP 3.4+ there is an introduction to Theme Customization API, I wonder are you going to use the Theme Customization API in further version of options framework theme?
good question!
You can use them both together! See: http://wptheming.com/2012/07/options-framework-theme-customizer/
Have you seen that theme page template layout drag-and-drop interface themeforest have begun using? it’s pretty slick. Do you see a way of integrating something like that to your wonderful work on Options Framework? it’d be rad!
I found this layout engine plugin, i might try to use it in conjunction with Options Framework but who knows if it’ll work. I’ll report back. It’s be great to have it all in one!
This is really a great job!! Can this be used for creating an options page for a WordPress plugin? Thanks.
It’s really designed for just themes. It could be altered with some effort, or you might check out the WordPress Settings Framework, which is a little more flexible: https://github.com/gilbitron/WordPress-Settings-Framework
Thank you very much.
is the options framework optimized for mulitsite?
It works on multisite.
Hi Devin,
I am testing out your framework options plugin. It works fine but the only thing I can’t pull out first is the “text” box class is mini, I can’t locate where to change the width of the box in the theme options panel. The second one is I am using “textarea” but after using an embed youtube code it always disappear everytime I save the options.
Is there any way to resolve the embed code? as well as modifying the design of the theme options panel.
Thank you so much
Renan
Hi Renan. The size of the text box will be fixed in the next update, if you can wait a little bit. Embed code is filtered out of the textarea. You can change the sanitization on that though with a filter: http://wptheming.com/2011/05/options-framework-0-6/
Thanks for your work on this. In this post, you noted that the media uploader breaks if we change the theme options menu location. I was previously using version 1.2 of the options-framework-theme was able to change $of_page variable in the options-media-uploader.php, which rectified the broken uploader issue. I just downloaded version 1.4 from github, and the media uploader has been updated and the $of_page variable is no longer there.
How can we fix the broken media uploader issue as of version 1.4? I’m not sure where to update $of_page to toplevel, etc.
Is it broken? The enqueues are now self-contained, so if options-media-uploader.php is loaded, the correct scripts should get loaded automatically.
I should clarify something: In version 1.2, if I didn’t change the $of_page variable to toplevel_ etc., then the media uploader didn’t actually break, but the js didn’t function properly (could see all tabs at once). Once I implemented the fix you suggested for the media uploader, the js worked properly. So I’m associating the two (it seems, incorrectly).
Now that I am using version 1.4, I am getting the same error with the js and the menu. The js shows all pages at once (though functional). Trying to figure out how to avoid this.
Okay, gotcha. Yes, the styles and JS get hooked in at two places- and the slug is hardcoded. So if you’ve changed the slug, you’ll need to update those. One spot is in optionsframework_add_page, where $of_page is. The other is in optionsframework_load_scripts, where it has if ( ‘appearance_page_options-framework’ != $hook ).
Works like a charm. Thanks, Devin!
Devin, the js/css for the options-framework-theme works fine now, but I am encountering one other issue that relates to setting up the submenu. After I changed the slug per your comment, my options page is showing up twice: once right underneath the name of the submenu (with an identical name) and once at the bottom of the menu. I added a priority marker to add_action( ‘admin_menu’, ‘optionsframework_add_page’, 2), and now my options page shows up once right underneath the submenu with the name I designated. But if I have any notices (suggested plugins, etc.) they still show up twice, as if there are two pages. This might be outside the scope of what you support, but I’m guessing a fair amount of people are setting up submenus for their themes, so I figured I’d ask. If this is question is beyond what you support, no worries.
Devin,
After a fair amount of research, I found out that the duplicate notice error I mentioned above is the result of a bug in the WordPress Settings API (http://core.trac.wordpress.org/ticket/21211) and is not an issue with the Options Framework Theme setup.
I wanted to be sure you (and others who may read this) are aware of this.
Thanks again for your great work on this Options Framework.
Hi Devin
I had an instance where I need to use the theme rather than the plugin, but for some reason when I activate the theme, I’m no longer able to access the wp-admin area.
I followed the instructions with the INC folder and the code in the FUNCTIONS file, but when I add it to my theme and upload I can’t access wp-admin, but if I delete the code from functions.php I can access again.
Is this a bug or just isolated to me haha?
Hello!
hey one question, where is the inc/ folder on the last version?
In the base directory. (?)
Sorry dumb question I was using the wrong files
Hello I have a issue with the plugin everytime I uploads the project from my local server to live server , all the option framework values lost..could you please help me regarding this…
Check out this thread maybe: https://github.com/devinsays/options-framework-plugin/issues/77
Hi Devin, great Job I’ll try it out tomorrow. Thanks so much!
I need a framework to create complex Custom Meta Boxes.
I found http://www.farinspace.com/wpalchemy-metabox but do you know other frameworks? :-)
Thanks,
Sebastian
I recommend this one: https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress
Hey Devin! In the typography section is not picking the font size. I look at the code and in the in line css is writing 28pxbold. I’ve been looking in options-interface.php but I can’t figure out :( . Any help? Thanks.
Hi Devin,
it’s an amazing plugin but I have no idea how to integrate it with a theme.
I copy the “inc” folder, “options.php” and the the content of the “functions.php”, get the “Theme Options” page but what now? How to edit the typography of the whole Theme etc.?
Have you tutorials about this?
Thanks!
For typography there is this tutorial: http://wptheming.com/2012/06/loading-google-fonts-from-theme-options/
i have created a function to output the options values to static css file. the question is where to hook the function so that it will be call whenever options is save.
There is a “optionsframework_after_validate” hook.
Hi Devin,
Sorry for such a simple question here, but I’ve been looking through all the demo themes and files along with searching on the internet – and I’m just not getting this.
I need to build a number of custom CSS color options for this theme, and then I need to output them.
Is there something already built in to do this? Otherwise, I was thinking I’d need to add an action to wp_head maybe? If I do it this way, is there a call to grab all the options into a variable, and then use that?
If you already covered this in a tutorial and I missed it – could you please point me in the right direction?
I’m waiting for this clarification also, hope there is a response.
Yes, I suggest outputting styles into the head. There’s a demo of this in the Options Kit- or you can look at how I do it in Portfolio+.
hey, good work on this framework, but since you started charging for it, the least you could do is follow some (even basic) standards, like psr-0, 1, 2 or even better, zend’s
How about the WordPress Coding Standards (http://codex.wordpress.org/WordPress_Coding_Standards)? If you see any place it can be improved- feel free to send a pull request: https://github.com/devinsays/options-framework-theme
I’ve been testing different theme options solutions and must say : you rock, thank you infinitely.
Hi Devin! Option Framework is Awesome.. tested and it works great.
Anyway I would like to ask. It would be great if there will be a repeater field(upload image, input text, text area, etc..) just like on advanced custom fields plugin.
Not easy to do with how Options Framework was built. You might try OptionsTree instead: http://wordpress.org/extend/plugins/option-tree/
I don’t like option tree this is better than option tree.. I am hoping that you could give a repeater field for this framework.. this one really rocks!
Hi Devin,
Great theme, some great effort in this.
I just have a slight query, could be something I’m doing wrong. Im using the wp_editor in the settings and would like to upload media alongside it, however it doesn’t want to show. Could this be because of the new media uploader updates?
I believe the media uploader is a default setting, but I have also included it in the code:
$wp_editor_settings = array(
'wpautop' => true, // Default
'media_buttons' => true, //Default
'textarea_rows' => 15,
'tinymce' => array( 'plugins' => 'wordpress' )
);
The media uploader isn’t currently supported in the options panel.
Hi Devin,
Just to say how much I appreciate your work. I read through all the comments and replies and I just admire the care you have for the users of your service. I never knew this kind of software or plugin exists. I found my way here when I inspected WordPress theme stylesheet, I saw your name and then Google it.
I am currently taking an online class in WordPress theme development and I will definitely by the software to help me with future projects.
Thanks for all your hard work.
In a future release, will you add an ‘export’ button so I’ll be able to replicate same settings in each installation without messing around with Database?
On my long list of a to-dos is a generic plugin that would allow you export/import any theme options.
If you are looking for a starting point (but I don’t think so :D) you can read this: http://wordpress.stackexchange.com/questions/12807/how-to-add-an-export-function-to-a-custom-option-theme-page
Hi Devin, I just realize that there are some change in options-medialibrary-uploader.php which not being use anymore in newer version.
what is the different between the options-medialibrary-uploader.php and options-media-uploader.php in newer version.
The new one works with the WordPress 3.5 Media Uploader. No longer uses a private custom post type for image attachments.
Possibility for using two options page / add_setting_section()
Hi Devin, I’m trying to create a theme that will have two options page. Actually I’m able to create the page now with it’s own options by adding little modification to options framework theme, but when I reset the options the other one also get reset.
I want to know is there a possibility to add_setting_section() or two options page that is separate form each other?
Never mind, I find the way to make the two options by only change a little from optionsframework_validate() function. Thanks for wonderful options framework theme
Ah, good.
It doesn’t currently support two different pages- so you’d need to do a bit of hacking on this. Primarily, you’d want to make sure that it’s saved into a separate option name on the other page.
Hi!
First of all, thanks for a great plugin. It seems to be perfect for my needs, can’t believe I haven’t stumbled upon this before.
But I’m having problems getting output. I tried to insert the framework into my theme like instructed, I tried to install the Options theme itself but I can’t get any output from the option fields.
Every time I call for an option via on_get_option(); the html output stops and stops the html code, like it could not find anything.
Have I missed something obvious here? I have a clean WordPress install with no plugins, just the Options theme installed for testing purposes (http://tvuollo.com/theme2).
Naw, I made a stupid commit the other day and broke it. Should be fixed now.
Yup, seems to be working now. Thanks!
Hello. I’m testing out the theme version of the Options Framework. Not sure why, but I get a php error after removing the plugin. I’m also a bit worried about future updates from wordpress or Options Framework that will cause conflicts in the theme. This theme will probably be used for hundreds of sites so its very important that things wont break incase of an update… Ive read a lot of tutorials online about the Options Framework but it’s very vague on step by step instructions… Is there any additional Documentation?
I currently have made custom fields and option panels that are working in the theme, but the site breaks when I remove the plugin. I transfered all of the Options Framework theme files over and cued them in the functions.php file. Just not finding enough documentation about things..
I recently also tested out OptionTree, which has a drag and drop builder, and theme option. But it seems to use a custom UI rather than the default WordPress UI. Sorry if my question is simple, but what is the main difference between Options Framework and OptionTree? Is Options Framework using the default WordPress API & UI?
I would like to buy the theme toolkit, but I’m a bit worried about these issues:
Being able to use without the plugin and having enough documentation to get through the setup without inquiring for Tech Support.
Future WordPress & Options Framework updates that will cause an overload of back-work..
Do you recommend just hand coding an options panel that uses the default WP UI incase of future updates?
Hi. What kind of documentation are you looking? The video describes how to set up the theme version of the framework. The additional tutorials show how to do a number of types of implementations. And the theme download has an example of every type of field you could implement. Also, I think the inline documentation of the actual source code is pretty good.
The plugin version has been well-maintained up to this point, and will continue to be so. I encourage any developers who rely on it for their themes to follow the commits and help test before new releases: https://github.com/devinsays/options-framework-plugin/commits/master
You’re also welcome to use the theme version, and make updates as you choose.
Main difference between Options Tree and Options Framework is that Option Tree stores all it’s settings in the database (including which options to output for the theme). Options Framework just stores the saved option values. There’s also a number of other difference with UI, options used, etc, but those are more obvious.
I think there will always be some compatibility issues with big UI changes in WordPress (like the recent media uploader). If you’re coding something yourself, you’ll still have to deal with those. If you’re using the Options Framework, there’s a good chance it’ll be updated before you even have to worry about it.
Hi Devin, awesome work!
Is it possible to output a category’s slug when selecting one from the category drop down, rather than the category ID?
Yes, just output $category->cat_slug rather than $category->cat_name.
Is something like this: http://jqueryui.com/slider/
Planned?
It would be cool to use it to let users customize width/height of a DIV.
What do you think about it?
Hi there. I’ve been looking for a solution but not found one yet…
Using the Options Framework image uploader, how to i display / use the thumbnail sizes set in functions.php ?
Hey Devin!
First of all, I’d like to say that I really like your blog and I’ve been following your work for a while now.
I only have a question about this options kit, which is awesome. My question is:
What is the best way to load the options and use them through my theme, performance wise?
What methods are you comparing?
Hi Devin,
I have one question about wp_editor setting. I’ve made a custom mce button but I don’t know how to include it in wp_editor on Options Framework page. Is this possible ?? Can anybody help me please.
Thanks
There’s a ticket open for this if you would like to follow: https://github.com/devinsays/options-framework-plugin/issues/152
Hi Devin, awesome stuff your options framework! Thanks so much!
I have been trying to change the move the options from Appearance to Dashboard, but although I can successfully move it, the tab switching then completely falls apart.
Of the file options-framework.php I changed the beginning of line 174 from
$of_page = add_theme_pageinto$of_page = add_dashboard_pageObviously I must have missed something somewhere and I was hoping that you could shed some light on this.
Many thanks in advance!
Piet
It’s because styles and javascript get hooked in according to the page slug. I was working on a filter for this (not quite finished), but it should help you track down all those locations: https://github.com/devinsays/options-framework-plugin/commit/d5141229a48cc3473bbc7ca8a0117b3152daf23f
fantastic thanks, I’ll keep an eye on it there.