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

    Hi Devin,

    Thanks for creating the Options Framework Theme. It made adding an options panel very easy for me.

    I’d like to make the panel available to Editor level users but keep it under Appearance. I see where you set a value of ‘edit_theme_options’ for $capability in options-framework.php.

    Can I just change the value of the $capability variable at line 106 to something like ‘edit_pages’? Is that the only place I need to change it to insure everything continues to work as it should?

    Thanks,

    Kathy

      1. Kathy Sautter

        Thanks, Devin.

        I wanted a way I could change it for all sites using the theme. I didn’t want to have to change the permissions of users on all of the sites using the theme. I’ll just make a note to make the change to any upgrades to the framework.

  2. Kathy

    Me again…

    I found the other two references to ‘edit_theme_options’ and changed them to ‘edit_pages’ in options-framework.php and it works fine.

    Thanks again for this great tool.

  3. fukr

    Hi Devin,

    This is a great theme. I have one problem when configuring it: i used the textarea to store scripts, ie Adsense, Google Analytics, etc, but it only displayed the script itself on the page. Also, if i try to paste scripts as ” into the textarea and hit ‘save options’ the ” and ” codes are just gone.Any solution to this? or I am not correctly implementating this?

    Thanks

  4. Jomar

    Hello Devin, this is a great plugin

    I just want to ask, is there a way for the theme options page to require a field? ex. I have a text field and I require that the user put a value and not allow users to input empty strings. How will I be able to acheive that? or is it possible?

    Thanks

    More Power

  5. Gil

    Hi Devin
    Great Great Work!!
    I would like to know if there is an option of exporting the theme options settings or it is stored in the database regularly and it is unnecessary to do when moving a site to another server

    Thanks in advance!
    Gil

      1. Bryan Abueva

        Is there is a way to backup the content of the options framework and upload it once you’ve change your server?

      2. Gil

        Hi Devin
        I tried to import the database twice and in both actions it didn’t import the options panel data. I simply exported the database, did “search and replace” replacing the old domain with a new domain (using notepad ++) and imported the database to a new location. everything worked well except for the options panel data which I had to load the data manually. any clue why it happens to me? does it have anything to do with the “search and replace” action?

        Thanks

      3. Radley

        Gil, I’m assuming the options framework settings are serialized by PHP before being stored in the database. You won’t be able to do a simple search and replace so easily (I believe you have to update an integer referring to the length of the string, but I’m not 100% positive).

        You can try the following serialized search & replace tool:

        http://interconnectit.com/products/search-and-replace-for-wordpress-databases/

        I use it when launching a website from a dev URL like “mysite.devsite.com” to “mysite.com”. Should work.

    1. Gil

      Hi Radley
      I thought it is simpler as Devin commented above that it is stored regularly in the database but I will definitely try your solution.

      Thanks a lot

      1. Rad

        I believe it is simple – until you have to modify that data via search and replace. If you don’t do the search and replace I bet it would work.

        Might be something else though, but I’m pretty sure that’s the issue. If you change serialized data and it can’t be unserialized properly, it doesn’t seem to import any of the data (just false for the entire serialized object)

  6. Hi,

    I really like your options framework and is currently using it. I just had a little problem, you see i’m using less css for wordpress (https://github.com/sanchothefat/wp-less).

    I’ve successfully parsed some variables from the options to my LESS files. My problem is that I have to manually compile the less files everytime I click on Save Options. I really want to automatically run a compile everytime I click the Save Options. Is it possible to execute a function when saving? How should I do this? Thanks.

  7. Hi there, I’m excited about your Options Framework and am wanting to install it in a custom theme I’m coding and build it out. But I can’t seem to get it to work… My theme has no other theme options panels included.

    I put the inc folder, options file, and copied the code from functions.php into my functions.php file. I’m using a child theme so I placed require_once ( get_stylesheet_directory() . ‘/options.php’ ); into the child theme functions.php file too.

    If I use the parent theme, “Theme Options” doesn’t show. If I activate the child theme, everything goes blank. I’m not a PHP programmer, just decent at copy-and-paste. Any possibility I can get help activating this correctly? My intention is to use the dev version in my custom theme and build it out.

    My structure is as follows:

    /furryfriends/inc/
    /furryfriends/options.php
    /furryfriends/functions.php (with the options function code at the bottom)

    /furryfriends-child/
    /furryfriends-child/functions.php

    with require_once ( get_stylesheet_directory() . ‘/options.php’ ); in it

  8. Hi Devin,

    Thanks for the great plugin you offer here! I have a small question: is there some kind of overview of existing themes that are built on the options framework?

    Thanks for your response!

      1. viv maxwell

        I already had commented about licensing and including this option framework.Here you have mentioned some wordpress theme authors, In the same way I want to include it in my wordpress theme( selling product ). so now i need to purchase it with $30 and including it in my wordpress theme ,is it right?

  9. Radley

    This is a great plugin! It makes It has saved me quite a bit of time compared to manually writing a plugin for individual websites which have settings that a non-programmer would need to change (The images in a slider, or the text in a generated email, for example).

    There are a few things that are kind of odd though. Why is there HTML sanatization for the “desc” field? I can’t use linebreaks or elements in there? What’s the point of sanitizing a hard-coded PHP file? That sanatization should be removed, unless you had a good reason for doing it. It’s also very odd that I can’t use ID or class elements in the desc field, which kind of limits the possibilities.

    It would also be great if the “Image” field would use the wordpress attachment instead of just the full-res image URL. I’ve got a 3000×2000+ image uploaded here, and it downloads the full thing inside the theme options menu (although resized in the browser to 334×255). You should add an “attachment” field as an alternative, which returns the attachment instead of just the URL.

    The last issue I’ve had is the tinymce field. This isn’t the default “wp_editor()” version… When you select a link, it has TinyMCE’s default theme for selecting a URL – rather than WordPress’s very useful URL/Title menu with a “Select an existing page…” area below. There are some other things missing from the tinymce editor as well. I have a feeling this is your own TinyMCE code, rather than using the provided “wp_editor()” function. I think this should be fixed, or at least improved!

    But anyway, those are just some minor things. The plugin is quite easy to use and is working well so far. Minor issues aside, it works great and has a lot of potential. Thanks for the plugin!

      1. Radley

        Thanks for the reply Devin. I didn’t think to look for customizing the sanization filters.

        Although I still think that they should be lowered out of the box, or at least have a variation of the “textarea” field which supports HTML (and JS). As a theme option – something that might be used on a variety of sites with different variations of data – one of the prime features I would imagine would be tracking and conversion codes.

        In a textarea field, tags seem to be removed. In a tinymce field, they work, but sometimes it creates additional tags (which will invalidate code that is inserted into , for Chrome it actually pushes it to the body).

        Not familiar with github and pull requests, but I might look into it in my spare time.

  10. Horus Acosta

    hi, great framework i was looking for this for a long time. one question.
    how can i group element within the options
    example:
    tab=basic settings
    option 1
    —————————-
    Input Text
    Textarea
    Select
    —————————-
    option2
    —————————-


    —————————-
    and so on

      1. Horus Acosta

        im sorry devin but info option? how exactly would i do that. just give me a hint :D im not an expert but if you give me a lil more info ill get it done.
        thanks in advance.

  11. Tim

    Dear Devin,

    I have a question.
    I’d like to use the image selector in the following way.

    When an image is selected, it would automatically open additional options based on the image selection.

    For example: I have created 5 different landing pages for a wordpress theme.
    I am using the image selector to show the client what the different templates look like.

    The client selects an image and clicks save. Then goes to the appropriate tab to work on that templates features.

    Rather than listing all the template options, in single tabs, I want to be able to click on a template image, then have the options show up below the image that was selected.

    Is this possible?
    Thanks for all your help.
    Tim

  12. Hi Devin,
    I got the theme options kit and have been having a good play with it :)
    Nice job. Well done.

    I did spot a couple of things though when trying to retrieve options (unless I’m missing something… which is entirely possible) ;)

    I noticed optionsframework_option_name(); was commented out on line 75 of options-framework.php, so it seems it never gets called and therefore can never set the specific theme options.. unless that line is then uncommented.

    I also did have trouble retrieving options using of_get_option(),
    and tracked it down to line 395 in options-framework.php where it reads
    $config = get_option( ‘options-framework’ );
    but I adjusted it to..
    $config = get_option( ‘optionsframework’ );
    and all then worked.

  13. Option framework plugin does not have support for wp 3.7.x.
    and my theme doesnt work without option framework.
    so what i need to do ???

    Thank you , Devin.

  14. lemonthirst

    Hi!
    is there an option to display multiple background patterns from the admin interface?
    I have a few patterns that i would like to be displayed as thumbs before selecting which of them is going to be used and i am having a hard time finding and option to display the patterns.
    Also thank you for this great framework!

  15. Steve

    Hi. I am using Options Framework Theme 1.6, transferred into my own theme.

    I have a number of options which are checkboxes.

    All except 1 checkbox works fine. This 1 will not stay unchecked. When the options page reloads, it has become checked.

    The code in options.php is identical to the other checkbox options.

    Any ideas?

  16. Working to add in a timepicker option, but I’m stuck adding in the actual jquery code to show the timepicker. When I add it to the options.php file, it breaks things when I update, saying headers have already been sent. Any help on adding a script section without causing the issue I’m seeing?

  17. Today (Wed 12/4) , I updated to Options Framework v 1.7. Unfortunately, it DID NOT work well for me! Using “On-Demand” Theme from Press75.com
    Completely change everything on the site back to defaults, almost as if I was starting with the theme from the beginning! I had to contact my host, and had them restore an earlier version of my database and Options Framework. Now working again. Using WordPress v 3.7.1 Can you tell me what happened?

  18. Hello,

    Just updated the framework V1.7 and to my horror… all, ALL… theme settings got erase from the logo image to the homepage video to the favicon, etc. What?!? How can this be, how does one bring back all settings? PLEASE HELP…

  19. nir

    Hi,

    Does this Options Framework Theme support WPML not only by translate fields but also duplicate DB for each language ?

    I mean, save preferences for one language and different preferences for other language.

    I saw something like this in “Replete Theme” (themeforest).

    thank you.

  20. WebR

    Hello.. I will be happy if someone will give to me advise… i am using last version of options-framework-theme .. Theme Options page working for me ok… (I did check with debugging mode on different versions of WP and all good)… but when i sent theme to themeforest they said that Theme Option page dont working.. that error http://d.pr/i/wJdI there…. but when i check it on my local and not local servers all working ok.. that why for me difficult to find where is error…
    Thank you!

  21. Hi Devin,

    I’ve integrated the Theme version of your Options Framework into my theme.

    Should I be able to call of_get_option in footer.php?

    It’s not currently working.

    Thanks,
    Steve.

  22. nathan

    Hello!

    How do you use the to work for lets say an a:hover style that is in my css sheet? I’ve been doing inline styling from my php files to make my logo and background images work but I’m getting snagged at this point.

    So for example, I want to change my menu hover links from the theme options panel. But, the only place it is styled is in my stylesheet.

    Do I add something like this to the header.php file?

    a:hover {color:””!important;}

  23. Is there a way to download a previous version? The latest version crashed my admin area. My front end still works but can’t get to my login area b/c of this error:

    Fatal error: Call to undefined function _optionsframework_options() in /home/rankings/public_html/wp-content/themes/jono/lib/admin/admin.php on line 24

  24. Karo

    Dear Devin,

    I installed the framework plugin for the author theme, but now with the new wordpress version 3.8 it won’t work because its not compatible yet. When will the version will be updated?
    thank you!

  25. Nick

    Hi,

    is Options Framework 1.7.1 compatible with WP 3.8 ?

    it seems to crash my theme? I get this error when I activate it

    Call to undefined function _optionsframework_options() in /home/chspcom/public_html/wp-content/themes/chsp/lib/admin/admin.php on line 24

    Any help would be appreciated.

    Thanks
    Nick

      1. I am having the same problem:

        Fatal error: Call to undefined function _optionsframework_options() in /nfs/c04/h02/mnt/66376/domains/cshoresal.com/html/wp-content/themes/ayoshop-wp-theme/lib/admin/admin.php on line 24

        I tried to find version 1.6 to roll back to, but haven’t found it anywhere.
        Thanks,
        ~ Sally

    1. T. Bond

      Hi Devin,
      I’m having the exact same problem, whenever I try and install The Options Framework Version 1.7.1 to wordpress, my site seems to shut down and I get this error message

      Fatal error: Call to undefined function _optionsframework_options() in /home/busb/public_html/wp-content/themes/romo/lib/admin/admin.php on line 24

      Is it possible that you could be of help?
      Thanks!
      T.Bond

  26. Nathan

    Hello,

    The Options Framework is awesome. Thanks for creating it. I bought the kit as to show my support. You deserve to get paid for all of your hard work.

    The only thing I am having difficulty figuring out is how to use the of_get_option for styles referenced in the stylesheet. I understand I can use inline styling but there are certain elements that arn’t referenced from my php files.

    Example of what I want to do — be able to change the a:hover styles from the theme options panel. How do I make the of_get_option work? Do I need to put a at the top of my header.php and call it from there? Maybe something like this?…

    I hope this makes sense. Any help would be greatly appreciated.

  27. sandy

    hello,

    I use latest version of Optional panel but when i use theme check plugin it give me error:

    REQUIRED: class-options-framework-admin.php. Themes should use add_theme_page() for adding admin pages.
    Line 34: add_action( ‘admin_menu’, array( $this, ‘add_options_page’ ) );
    Line 99: function add_options_page() {

    any solution for this ? I was updated theme check plugin and wordpress

  28. Rens

    Hello Devin,

    I just purchased the script and just wanted to say it’s a great and handy template extension!

    Of course I would like to improve it so here is my improvement/suggestion:
    I noticed that you would have to extend the jQuery code for each “toggle” element you would add to the options.php.

    You could do the following:
    For example, in your options.php you have:
    – A checkbox to use a Logo instead of Text for your site title
    – Then in my case 2 types: 1: text / 2: upload

    Now without the need to edit this jQuery script each time I did the following in my options.php:

    $options[] = array(
    'name' => __('Check to Show a Hidden Text Input', 'options_framework_theme'),
    'desc' => __('Click here and see what happens.', 'options_framework_theme'),
    'id' => 'use_logo',
    'class' => 'toggle',
    'type' => 'checkbox');
    $options[] = array(
    'name' => __('Hidden Text Input', 'options_framework_theme'),
    'desc' => __('This option is hidden unless activated by a checkbox click.', 'options_framework_theme'),
    'id' => 'logo_test',
    'std' => 'Hello',
    'class' => 'hidden use_logo',
    'type' => 'text');
    $options[] = array(
    'name' => __('Uploader Test', 'options_check'),
    'desc' => __('This creates a full size uploader that previews the image.', 'options_check'),
    'id' => 'logo_url',
    'class' => 'hidden use_logo',
    'type' => 'upload');

    You see, that the checkbox ID referrers to the class after “hidden”.
    Now in your functions.php replace your jQuery code for this:

    jQuery('.toggle input').on('click',function(){
    var $id = jQuery(this).attr('id');
    jQuery('.'+$id).fadeToggle(400);
    });
    jQuery('.toggle input').each(function(){
    var $id = jQuery(this).attr('id');
    if(jQuery('#'+$id+':checked').val() !== undefined){
    jQuery('.'+$id).show();
    }
    });

    That’s all, maybe it’s a good improvement!
    Anyway, keep up the good work :)

  29. This is an awesome framework. I have very poor PHP skills, but I was able to add all of the options I wanted to within a few hours just by studying the examples you provided. Thanks a lot for providing this.

  30. JR

    How would I go about having two theme options. I would like to have one only accessible by the editor role and the other for the admin. Of course due to the fact that it would limited to the editor role, I would have to move that theme outside of apparence.
    Thank you

  31. Radley

    Hey Devin, I’d like to suggest a transparency grid as the background for image/upload fields. It’s very simple to add, but when you are dealing with a dark website which may upload white/transparent images, it would be very helpful.

    I’ve already developed some CSS which I stick in as the last field which does this for me, but I think it should be part of the plugin itself, so others can benefit from it too.

    Default: http://radleygh.com/images/chrome_2014-048-15-17-47-51.png
    Transparency Grid: http://radleygh.com/images/chrome_2014-048-15-18-13-60.png

    I’ve created three sites which used white images in the theme, and it works fine as it is. Without this tweak, though, it is difficult for the client to know what that box is even for unless they look carefully.

    Here’s the CSS I used, just need to stick an image in there: http://pastebin.com/F4Q0sC2M

  32. JRL

    I added the options framework to a custom theme I had built for a client. I really appreciate all of the work you put into this project. Thanks.
    I have one question though. My clients theme is periodically updated and I create a new version of the theme to load. When updating the theme, however, all of the options revert back to the original defaults. Is there a way to recapture the previously saved options without having to go into the database and copy the old versions options fields? I noticed that it is grabbing the theme version each time and adding it to the name of the options even though I have a custom id loading. Thanks in advance for your help.

      1. JRL

        Hi Devin.
        I did set the option name in exactly the same spot. Does it matter that I am using the Theme Options Kit and not the plugin? I made this change in the options.php file that sits in the main theme directory. The theme is custom and it’s main directory name is created on the fly with each release. The name of the directory has the version appended to it so that I can keep the previous version until any bugs are worked out. Is this the problem? In other words, in the wp-content/themes directory, you would have ThemeName001 and ThemeName002.

      2. JRL

        Ok, I’m a bit of a noob, and I know I should be able to quickly check to see if this is firing, but how, exactly would you go about doing that? Dump the data to the browser screen?…

  33. A.J

    Hello Devin,

    I am trying my best but I am unable to support a custom post type in options framwork theme. The theme I am using is goodnews45. Where are the custom post type (like woocommerce products) declared. I have tried functions.php but could not understand anything. How can edit options framework for woocommerce custom post type.

    Regards,

    A.J

  34. Monica

    I’m trying to help a friend with her website, and the plugin has been installed, but it won’t activate. I get the following error. I am stuck and can’t move forward with theming, etc. Any ideas?

    Fatal error: Cannot redeclare optionsframework_init() (previously declared in /home3/northtg5/public_html/wp-content/themes/discover/admin/options-framework.php:73) in /home3/northtg5/public_html/wp-content/plugins/options-framework/options-framework.php on line 54

      1. Looks like the options framework is being included twice; once in the theme and again with the plugin.

        Have you tried disabling the plugin? Do the theme options work then? If this doesn’t help I think you’d be better off contacting the theme author on Themeforest.

        Hope this helps!

  35. Mike

    Hi,

    I just purchased a genesis child theme called Romo, and the options framework plugin was required to use the theme. Every time I install options framework it seems to crash my theme. I only see a white screen in the admin area… nothing else.

    Any ideas?

    Thanks.

      1. Can I use this option framework in wordpress theme (commercial selling product) after purchasing it with $30 ? Option framework is with GPL license. So after including this , how can I aware my theme purchaser that the option framework included inside theme is purchased by me (without violating any licensing term).

  36. a,j

    Dear Sir,

    I was talking about custom posts type called “Products” which are created by woocommerce. The theme I am using is goodnews45. The theme has very good settings. But when I try to use sliders (built in theme) or video slider(also built in theme) then it shows the usual post type supported by wordpress. It does not show the custom posts created by woocommerce plugin. I need to edit some codes somewhere in the framework so it can load custom posts types in its panels.

    Thanks.

  37. Aditya Chaudhary

    Hello,
    I am trying to create a child theme of a theme that uses options framework.
    It doesn’t work! I cant seem to figure out why??

    Can you tell me how I can achieve my goal?

  38. viv maxwell

    yes definitely , I am planning to purchase it.now I am just testing plugin version. The best thing i like it in is an array of option values in font and some other field types.

  39. Hi Devin ,first thank you for the awesome plugin, it saves me a lot of time . i just wonder how i can group for example tree or for or any number of text input fields or whatever under one label ??

      1. Hi Devin thank you for the reply it is good idea thank you again ,i ll try to add label as an option to existing options exactly like text and style it once

  40. Danilo

    Hi.

    I’m trying save the above code in a textarea field:

    When I save, only this part is saved:

    In functions.php I can allow some HTML tags, as iframe, link and script. But, if i try with a div, isn’t work.

    Important: this FB code is HTML5. Is it that the problem?

    Thanks,

    Danilo

  41. Hi, Devin.

    With this code (functions.php), I can put a counter character in a page custom field.


    function excerpt_count_js(){
    echo
    '
    jQuery(document).ready(function(){
    jQuery("#acf-cf_titulo_seo textarea").after("Contator de caracteres");
    jQuery("#counter_titulo_seo").val(jQuery("#acf-cf_titulo_seo textarea").val().length);
    jQuery("#acf-cf_titulo_seo textarea").keyup( function() {
    jQuery("#counter_titulo_seo").val(jQuery("#acf-cf_titulo_seo textarea").val().length);
    });
    }


    add_action( 'admin_head-post-new.php', 'excerpt_count_js');

    How can I change the code to put the same counter after a textarea, in theme options?

    Thanks

    Danilo

Leave a Reply to Jomar Cancel reply