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. imon themes

    Hi,
    Nice work

    i am using your option framework in my project but the problem is when i active my theme 1st time and try to load .its hang my website

    but after going to theme option and click option . then the theme or website load well .

    pls help me for this issue

  3. Saulo Padilha

    Hi there,

    I’ve just bought the Theme Kit and it’s really cool. I’m using some fields to upload images (or select them from the media library) but I can’t figure out how can I select the size of the image. Suppose I have added an image size in my theme, how can I select this specific size to show in the front end?

    thanks!

  4. Jeff

    Hi,

    Great plugin. Love this thing. I can’t seem to find where or how I can do the background of a menu div. Is that documentation somewhere? Anyone have any idea?

    Thanks
    Jeff

  5. JL

    Just upgraded to 1.8.2, but it won’t activate due to this error:

    ‘Plugin could not be activated because it triggered a fatal error.
    Fatal error: Cannot redeclare optionsframework_init() in /nas/wp/www/cluster-1032/wlia/wp-content/plugins/options-framework/options-framework.php on line 29

    Using WordPress 3.9.1. Any thoughts?

      1. JL

        That would make sense. Guess I’ve been upgrading it before when it wasn’t necessary. Keep up the good work Devin.

  6. daniel

    Hi Devin,
    Thanks for creating the Options Framework Theme. I love it.

    Are you thinking in adding metabox and list item to the framework?

    Thanks again.

    1. vektor

      really thanks!!! My Panel is cool.

      Only one more question. Is possible format this? i want add paragraphs automatic like in widget.

      $options[] = array(
      “name” => __( ‘Caja Estacionamiento Regulado’, ‘portfolio-press’ ),
      “desc” => __( ‘Custom text that will appear in the footer of your theme.’,’portfolio-press’ ),
      “id” => “reguladobox_text”,
      “type” => “textarea”
      );

      Really thanks!

  8. vektor

    I wish to know if i can do textareas, texts… translatable with WPML and if i can do textarea with automatic paragraph. If is possible i buy your package of course!

    thanks

    1. vektor

      I have the solution for textarea with wpautop, only i need to know if i can make this textarea translatable with WPML.

      Thanks!

      1. Devin

        I have not tested with WPML. You’ll just have to try it. Feel free to download the version on GitHub or the plugin to test it.

  9. xeeone

    Hi, this is a very satisfactory framework for me. Thanks so much!
    Now I’m creating a wordpress theme, and I use this framework in it. I need to insert hyperlink(anchor tag) into the value of an option’s /desc/ property. How could I do that?

  10. Edmund

    Devin:
    I installed options framework and then uninstalled. I then tried to reinstall it and I got the following message:
    Fatal error: Cannot redeclare optionsframework_init() (previously declared in /home4/ssun/public_html/wp-content/themes/wpex-photo/admin/options-framework.php:60) in /home4/ssun/public_html/wp-content/plugins/options-framework/options-framework.php on line 57

    Any ideas how to fix?
    Thanks

  11. vektor

    Hi again!

    Sorry, but one last simple question.

    I have this code for implement a link to image

    $options[‘linklogo’] = array(
    “name” => __( ‘Link Logotipo’, ‘portfolio-press’ ),
    “desc” => __( ‘Introduce el link del logotipo de la portada’,’portfolio-press’ ),
    “id” => “linklogo”,
    “type” => “editor”);

    The problem is when i add this text to image.

    <a href="” rel=”logolink” target=”_blank”>
    <img src="” alt=””>

    Image logo show, but link to the actual page.

  12. Pradeep

    Hi Devin,
    Thank you very much for the great script!

    I have a strange issue in one of our site for which used your script for theme options. It happens only in Chrome. On saving the values, All the field values become hidden, that is there the field has the values, But its hidden. If I try to click Inspect Element, As the window resizes, It shows back. I am sure what the issue is. It is working perfect in Firefox.

    Following is the screenshot link after options saving, I have selected the hidden values
    http://postimg.org/image/xcuxkumj7/

    Following is after clicking Inspect Element as the window resizes, the values appear back:
    http://postimg.org/image/kfz7z8bj1/

    Can you please help me on this issue?

    Thanks!

    Pradeep.S

    1. Devin

      I cannot reproduce the issue in Chrome (Mac). But it looks like it might be a font rendering issue. Do you get the same problem if when using a fresh install with the Options Check theme? Perhaps there’s also other fonts/scripts loading and interfering with your admin panel.

  13. Pradeep

    Hi Devin,
    Thank you very much for your advise. As you said it may be font rendering issue, It got fixed automatically, after some hours :)

    Thanks!

    Pradeep.S

  14. Ed

    Hi Devin,

    really nice work, thanks for sharing this.
    Can you tell me how I can set this up as a TOP LEVEL menu point and if its possible to “group” options and add a separator below them.
    I would like to group some settings from a tab in categories like “necessary” and “optional”

    Thanks
    ED

      1. Ankish

        Thanks for replying, I didn’t get you-

        You mean with the combination of custom post types or tagging posts + Option Framework, I can achieve the desired result or Option Framework can’t help me with this.

      2. Devin

        Hi Ankish. I am suggesting you don’t use the Options Framework for this. Content should be stored as a content type, not options (in my opinion).

  17. Steve Bman

    I’ve added color scheme options to the live customizer. It correctly updates the values but the customizer does not reload the preview nor does it save any of the changes. Any clue to why?

  19. Kloso

    Hi Devin,

    Nice work there, keep it up. Could you kindly let me know the difference between the Paid version and free Development version of the Options Framework Theme?

    Thanks

    1. Devin

      The paid version is a download with a version of the latest stable release and a number of example themes. The version on GitHub is the latest development version and no demo themes, but otherwise the same. All revenue just goes back into supporting the project.

  20. Fabio Rubioglio

    Hi,
    It’s possible to set a value for the uploaded images ? Like default wordpress size “large” or “medium”or a custom size, just to prevent high resolution images uploading.
    thanks

    1. Devin

      You can set image sizes for large, medium and thumbnail under “Settings > Media”. The high resolution images can still be uploaded to WordPress, but you’ll want to choose one of the sizes to insert into the post.

  22. Nabtron

    wonderful framework, I was trying hard to chose between redux and options framework but ultimately chose this one due to several reasons! let’s hope I stick to it now :)

    My query is, If I want to customize the framework do you have any documentation for that? rather than just guessing around and doing hit and trial?

    e.g if I want to add my own type of input, or If I would like to output it in my own way, which parts has to be modified to include all of them?

  23. Ruben

    How can I make a field that can store “” code? I want to have the option for people to put their Analytics code in a Theme Option field. But it gets stripped…

    Thanks in advance!

    1. Devin

      This framework is just for themes at the moment. Though it could be customized to work for a plugin. Eventually I hope to extend this project so that it will work for both.

  26. Javier

    Hi there. This is simply the mos fun and easy way to control some aspects of my custom templates. Thanks a lot, i still learning, but this is awesome!

    I just got a question. Is there a way to get RGB color code instead HEX. This is to use, for example, in transparent background colors. Thanks!

      1. Javier

        Hi teher. I found the solution. Only using the “hex2RGB” php Function and change HEX to RGB color with that small function:
        > 0x10);
        $rgbArray[‘green’] = 0xFF & ($colorVal >> 0x8);
        $rgbArray[‘blue’] = 0xFF & $colorVal;
        } elseif (strlen($hexStr) == 3) { //if shorthand notation, need some string manipulations
        $rgbArray[‘red’] = hexdec(str_repeat(substr($hexStr, 0, 1), 2));
        $rgbArray[‘green’] = hexdec(str_repeat(substr($hexStr, 1, 1), 2));
        $rgbArray[‘blue’] = hexdec(str_repeat(substr($hexStr, 2, 1), 2));
        } else {
        return false; //Invalid hex color code
        }
        return $returnAsString ? implode($seperator, $rgbArray) : $rgbArray; // returns the rgb string or the associative array
        }

        $my_var = of_get_option( ‘_myvariable’ )

        ?>

        And in dinamyc CSS:

        element{
        background-color:rgba(,0.75);
        }

        THANKS AGAIN!

  27. Raúl

    Hi Devin.
    I am including Options Framework in my theme , which takes twentyfourteen as base, but cannot get the spanish translation working.
    I have uploaded into /theme/options-framework/languages/optionsframework-es_ES.mo

    How should I do this???
    Thanks!

    1. Devin

      You should change the textdomain of the framework to that of your theme. I have left them all as “textdomain”, so you should be able to find/replace easily. Then just translate them with all the rest of the strings for your theme. There aren’t too many.

  29. Javier

    Hi there. I got an already made question, but yet unanswered.
    Is there a way to EXPORT setting to import them later in another website? That would be AWESOME. Maybe the paid version of the options framework? Thanks again!

  30. Daiduong

    hi
    Im using version 1.8
    I used to add_menu_page for options framework and use multi submenu in this menu.
    but when save it is’t working fine.
    Hope you can help this.
    thanks

  31. Javier

    Hi there Devin. This is a question made before but with no solution. I am really want to give some recognition (money) for this work, but there is something i want to know how to do. I use qtranslate or mqtranslate to made multilanguage sites. I know you got an option’textdomain’ to change and use in po mo files. But what about the “inputs” ?? Usually we use[:en]English[:es]Spanish or similiar to translate content items, but in this case there is no way to make it work, can’t make inputs be “multilanguage”.
    Is there a way, a clue, a solution, to make it work??

    Thanks in advance.

    1. Devin

      Hi Javier. I am not sure how it would integrate with multilingual plugins. Perhaps you can ask the developers of that plugin how database information should be stored.

  32. Javier

    I made a mistake and got confused with my last question, because actually YOUR OPTIONS FRAMEWORK WORKS ABSOLUTELY PERFECT with mqtranslate or qtranslate and options like [:es]Español[:en]English.

    I got confused with another part of my development.

    Thanks a lot!!!!

  33. Xeeone

    Hi, I was working with this framework and suddenly all the id prefixes of options are changed, thus javascript doesn’t works.

    before) id=”xeeone-mytheme_masthead_color”
    after) id=”optionsframework_xeeone-mytheme_masthead_color”

    I doubted the line ‘$default_themename = ‘optionsframework_’ . $default_themename;’ in the class-options-framework.php file, so I commented it. However it doesn’t work. And I already had specified ids to all of my options, so that’s not the case I think.

    So, where is the prefix ‘optionsframework_’ come from?
    I have no idea where do I have to fix.
    Thank you so much for reading this!

  34. Javier

    Hi there, First of all thanks again for this Options Frameworks.
    Ok, here is the thing. I have read your Sanitization page and tried all I can, but I still can’t get a textarea that accept something like this:
    ”

    Whitout sanitization I got blank textarea after saving.
    With sanitization I got only ” after saving.

    Can you help me please?

  35. Javier

    Again, and as almost always. I got the answer to my previous question.
    Simply as changing a little bit the custom sanitization code. Now the textarea block is saving correctly my script line.
    Thanks a lot!

      1. Devin

        Hi Firoze. Your code got redacted in that post. Try putting it in a paste bin.

        Best way to do a header option is to create a header color and image uploader option. Then output that into inline CSS.

  40. Edyta

    Hello,I have latest version “Framework 1.8.3” installed on my wordpress side, but it does not work anyway…. ( everything worked before great!) Can you tell me please, what it changed there and what I should do in this situation Thanks a lot for your help Edyta

    1. Devin

      You should only install this plugin for themes that require it. If your theme requires it, and you’re seeing this error, get in touch with the theme author.

  44. RoManuV

    Hi Devin,

    I really love using the Options Framework theme, as it allows me to quickly and effortlessly set up an option panel for my themes.

    For one specifically I’d like to define a number of options and group them, so that I can handle them in an array, but also show/ hide them according to a checkbox value. Something like this:
    Enable slogan (Y/ N) – this is a checkbox, when checked reveals:
    Slogans (array of textboxes), consisting of Slogan1 – textbox, Slogan2 – textbox.

    I already use the combination checkbox + hidden text field, but what I want now is to replace the textbox with an array.

    How can I do this? I mean, how to define an option of the type “array of textboxes”?

    Thank you.
    Manu

  45. MasterBip

    Sorry to bother you, Again Many thanks for this options framework. It is awesome.
    I got a question i couldn’t find on docs or over the internet.

    If I add a wp_editor with this options, can’t see Add link or Unlink buttons in tinymce:

    // Opciones para el editor de wordpress
    $wp_editor_settings = array(
    ‘wpautop’ => true, // Default
    ‘textarea_rows’ => 10,
    ‘media_buttons’ => true,
    ‘tinymce’ => array( ‘plugins’ => ‘wordpress’,’buttons’=>’link’ )
    );

    How can I force that to get those two buttons in tinymce toolbar?

    Thanks in advance again!!!

  46. Xeeone Kim

    Is it possible to have multiple instances of Options Framework? I mean, is it possible that a theme have already Options Framework and one or more activated plugins also have Options Framework?

    One more question! Can I develop a plugin with Options Framework “Theme” not Plugin?

    1. Devin

      Not without a little bit of customization. Also, you’d need to make sure to namespace properly to avoid conflicts.

      It is something I would like to support in the future.

      1. Xeeone Kim

        Thanks for the answer! But I need the feature right now. Could you tell me where do I have to customize your framework for changing namespace? I have changed the values of $menu[‘menu_slug’] & options_framework_location already, but the framework in my theme is overriden and dissapeared from admin menu by it in my plugin.

  47. Bilal haider

    Hi Devin.Hope you will be fine.Please tell me how to add subtabs under the navigation of options framework.And try to make video tutorials series of your options framework.Thanks waiting for reply

  50. Tomm

    Hello,

    I have a question,I created my own theme with Options Framework
    Is it possible to set the defaults, when I install the theme for the first time ?
    Otherwise the theme looks very empty

    1. Devin

      Defaults won’t be set in the database on theme activation. There’s a number of reasons for that. Instead, it’s recommended to send your default when you call the option. i.e. of_get_option( ‘option-name’, ‘my-default’ ).

Leave a Reply