Options Framework Theme

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).

This project was released long before the Customizer was a part of WordPress. The Customizer is now the recommended way to add theme options and you can read more about it here.

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 video above to see how it is 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

The demo themes associated with these tutorials are also available on GitHub.

866 Responses

  1. Fee

    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

  2. Ashish anand

    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…

  3. Max

    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!

  4. Ken

    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?

    1. Devin

      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.

  6. Swapnil

    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.

  7. Ian

    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? :/

  8. Ian

    Hah, I figured it out.

    Turns out, the starter theme I’m building this one on is already using your framework!

    Rookie mistake, eh? ;)

  9. P Nut

    Updated to 1.4 but the color palette stopped working. help!

    Chrome gives this error:
    Uncaught TypeError: Object [object Object] has no method ‘ColorPickerSetColor’

      1. Yulius A.

        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

  10. Windo

    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

  11. Wagner Matos

    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?

      1. Mel

        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?

      2. Devin

        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.

  12. Xavier

    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)

  14. Amerall

    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

  15. Yulius

    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 $output standing 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

    2. Devin

      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.

  16. lim

    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?

  17. colin

    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!

  20. Renan

    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

  21. JC

    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.

      1. Jessica

        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.

      2. Devin

        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 ).

      4. Jessica

        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.

      5. Jessica

        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.

  22. cody

    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?

  25. Ashish

    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…

  27. Alex

    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.

  28. Osman Tanriverdi

    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!

  29. Sarizwa

    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.

  30. Barbara

    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?

      1. Devin

        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+.

  31. Flavius

    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

  33. Mel

    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.

    2. Mel

      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!

  34. Aaron Stezycki

    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' )
    );

  35. Dare

    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.

  37. Hermanto Lim

    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.

  38. Hermanto Lim

    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?

    1. Hermanto Lim

      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

    2. Devin

      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.

  39. Tuomas Vuollo

    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).

  40. Native Imaging

    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?

    1. Devin

      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.

  41. Brett

    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?

  43. colin

    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 ?

  44. Dragos Rizescu

    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?

  45. Yulius A.

    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

  46. Piet

    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_page into $of_page = add_dashboard_page

    Obviously I must have missed something somewhere and I was hoping that you could shed some light on this.

    Many thanks in advance!
    Piet

  48. MaisDesign.it

    Hi, I bought your Options Framework Theme Kit and I am tinking about its UI.
    Actually with 2 lines of css I moved ‘Restore Defaults and Save Options’ Buttons in a fixed lateral sidebar because I noticed that if there are a lot of options it will be annoying to scroll down all the page long only to press them.
    But I think that would be cool to add a new ‘menu class’. I’m thinking to a simple menu list.
    Maybe using: ‘type’ => ‘info’);
    we’ll be able to organize this menu to be releavant to each tab.
    I’m thinking to something like:
    if in_tab(‘name_of_the_tab){ echo’Option1Option2}

    And so on.
    What do you think about it?

    And will you ever add: http://jqueryui.com/slider/ ?
    It would be nice to let users modify sizes with a slider.

    Thank you for your time and patience.

    P.S.
    How will I notice of upgrade? Because I have no access to any private area to your website, I only have links in my confirmation email.

  50. ben

    Hi! Is there a way to add a group of fields (let’s say: name, mail and phone number) and that the user will be able to press on some kind of a “+” or “add” button that will add another group of those three fields for him (and so on…) ?

    Thanks.

Leave a Reply