Options Framework Plugin

The Options Framework Plugin makes it easy to include a full featured options panel in any WordPress theme.

Although this plugin is still maintained and secure, the recommended way to add theme options for new themes is to use the Customizer.

Instructions

Download the plugin and activate it on your site.

To learn how to set up the options panel in your own themes, download the Options Check theme from GitHub and use its files as a base. It’s a blueprint for how the Options Framework works with a sample option panel with every type of option you are able to use and a demo of how to display each one on the front end.

Available Options

These are the options available:

  • 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

There’s also “heading” to define the menu tabs, and “info” if you just want to add some additional information to the panel.

Returning Option Settings

If you look in index.php of the Options Check theme, you’ll see how each option is returned. It should look something like this:

of_get_option( $id,$default );

What if the Options Framework Plugin is not installed?

The neat thing about this plugin is that it isn’t required for your theme to work. Each option should have a default which will be used if the plugin isn’t installed. Take a look at Portfolio Press without the plugin activated to see how it works.

There are a couple ways to let the user know that options are available if the plugin is installed: a notice on theme activation, an auto prompt on activation, notes in the documentation, etc. I’ve left this up to the theme authors to decide how to implement.

Download the Plugin

Download from WordPress Repository
Download Development Version

Additional Tutorials

Future Development

This plugin is not actively developed. If there’s compatibility or bug fixes needed, let me know.

Exporting/Importing Options

If you are exporting SQL databases, this thread might be of interest to you. There’s also a fork of the theme version, where someone built this out: https://github.com/vauvarin/options-framework-theme

Credits

The Options Panel was originally based on the excellent work of Woo Themes and still uses some of their code.

A huge thanks to all the people who helped out on GitHub, including @mfields, @helgatheviking, @celtic7, @samargulies, @mattweibe, @Mamaduka and any others.

Also a big thanks to folks who made donations to pay for a third party code review: Jason Schuller, Mint Idea, Luke McDonald .

669 Responses

  1. Towfiq I.

    Nice Work! Really appreciate you effort! Thanks Devin.

    I adopted the theme version not the plugin version. works fine, but there is a issue I just noticed. Upon activating the theme the default option doesn’t take place. I have to click through some pages from front-end to get the default options to work on front-end. why is that?

    I am calling the default value this way:

  2. David

    Loved your work!

    I was always dissatisifed with including all the styles in he header, and after much search, found a way to put it separately! Joseph Scott [.org] has an article name “Database Powered CSS in WordPress Themes” with a very simple elegant way to do so. I just implemented it with you plugin flawlessly!

    Thanks!

  3. I’m a big fan of your framework! I have been using it on my WordPress themes and my customers are loving it!

    I am developing a new theme and have found in v1.0 the inclusion of the inbuilt wordpress editor as an option. While it loads fine in the options page, the values aren’t being saved to the database. I believe this is due to a missing sanitization filter for the editor, which I just copied the textarea code and replaced with editor.


    /* Editor */

    function of_sanitize_editor($input) {
    global $allowedposttags;
    $output = wp_kses( $input, $allowedposttags);
    return $output;
    }

    add_filter( 'of_sanitize_editor', 'of_sanitize_editor' );

    Also, a heads up for the official release of the editor option, WordPress only allows lowercase letters for the editor_id variable when calling the wp_editor functions, so you may have to filter the option id before calling wp_editor to avoid issues.

    Thanks again for your awesome work!!

  4. Joshua Trusz

    This looks great, so thanks very much for the plugin, one issue im having is trying to return the values in my theme in the front end. This is an example of what its echo’ing out

    Array ( [one] => 1 [two] => 1 [three] => 0 [four] => 0 )

    Instead of the actual values.
    Any ideas off the top of your head ?

    thanks
    joshua

  5. Joshua Trusz

    Nevermind … i think this is working properly … its returning a boolean, which is the way its supposed to work. I was looking for it to return the name of the field. Which i will have to check the boolean and return the name of the field manually. Derp .. my mistake!
    Thanks again, great plugin!!

    1. Joshua Trusz

      Okay … me again, Is there an easy way to print out the checked values of a mutlicheck array. I can return this ” Array ( [one] => 1 [two] => 1 [three] => 0 [four] => 0 ) easily enough, just turning that in to something useable seems tricky. ideally: item1, item2 to show what was checked.

      Any help would be great … the examples in the index file dont really work, as it seems I cant get the $name of the multicheck array.

      thanks

  6. eben

    Hi Devin,

    Thank you so much for this framework.

    I was just wondering how I could add an image or some html next to a option? Like an example image in the option description. Could I add to the option desc field, or would the sanitization strip out html tags?

  7. joshua

    So strange bug … in a mutli check, i can get the .name of the key by doing so:

    if ( is_array($multicheck) ) {
    foreach ($multicheck as $key => $value) {
    // If you need the option’s name rather than the key you can get that
    $name = $multiPeppers_array[$key];
    // Prints out each of the values
    if($value==1)
    {
    echo ‘Peppers: ‘ . $name . ”;
    }
    }
    }

    However, it will only spit out the name if I’m logged in to the control panel . If I’m not logged in, it just returns ‘Peppers: not the .name value. I’ve set up the variables as $global, but again, they only work if I’m logged in. Anyone seen this before ?

    thanks

  8. Hi Devin,

    First of all I would like to thank you for this awesome plugin! Since I found it I cannot imagine my theme development process without it. Great work!

    I wonder if it’s possible to use a custom CSS for theming the dasboard layout of the options panel? Where should the custom CSS be registered in the code?!

    Cheers

      1. Thanks Devin,

        after a little bit of struggle I managed to run my custom stylesheet for the option panel page using this code in my theme functions.php:

        function optionsframework_custom_style() {
        if ( current_user_can( ‘edit_theme_options’ ) ) {
        $options =& _optionsframework_options();
        if ( $options ) {
        // If the user can edit theme options, let the fun begin!
        add_action( ‘admin_print_styles-options-framework’, ‘option_panel_style’ );
        wp_enqueue_style(‘admin-custom-style’, get_template_directory_uri().’/custom-option-p-style.css’);
        }
        else {
        // Display a notice if options aren’t present in the theme
        add_action(‘admin_notices’, ‘optionsframework_admin_notice’);
        add_action(‘admin_init’, ‘optionsframework_nag_ignore’);
        }
        }
        }
        add_action(‘admin_init’, ‘optionsframework_custom_style’);

        I post the code here maybe it will be helpful for others as well.

        Cheers

  9. Hi Devin,

    Thank you for your awesome plugin! :) It is really great job.
    I have a question. I try to add a link in option.php file “desc”, but when I add attribute “target” it doesn’t work. I use such a code.

    "desc" => "Зарегистрировать приложение Facebook: http://developers.facebook.com",

    At the option page “target” is dissapeared.

    How can I add this. I would like link in theme options open in new window.

    Thank you very much in advance. :)

  10. Alex

    Hi Devin,

    Massive thanks for the brilliant Options Framework. Only just got into it, but I love it, it’s saved me bags of time and a lot of pain. Are there any plans to introduce a feature where a user of a theme could essentially add a new set of fields themselves? At the moment I’ve got a tab for social icons, but obviously the list for these is pretty extensive so I’ve been forced to limit it to five of the the main ones (Twitter, Dribble etc). Would something like an ‘Add new social icon’ button where a user could choose which social icons to add/set links to social networks etc be out of the question? Thanks again :)

  11. Jan

    Hi,

    sorry for this question because it probably came up before. I’m a novice but most of the options work fine for me. But i really don’t know how to implement the typography options in a css way.

    I’m a copy & paste guy so maybe someone can post an example.

    Thanks, Jan

      1. Jan

        That looks nice but here in the Netherlands credit cards are not so common, so i don’t have one and getting a paypal account and transfer money to it will cost me a week.
        I will try thanks, Jan

  12. Jan

    Hi, checkout isn’t working.

    I will pay with paypal but it’s gonna take some time because my bankaccount must be verified and then another week to transfer. All in all some two weeks.

  13. @jan and all.

    Options Kit is awesome, with dozens of example how to use OF (the right way!)

    Trust me, it’s a very good investment.

    IMO if you’re using options framework, for client site, commercial theme, for even for your own site, you will need this. It’s like having your own complete OF documentation.

    Even when you already know how to use it, it’s a good way to support devin.

    And it’s only $15.

  14. Hi Devin, been working on a theme here https://github.com/jasperf/Imagine- with the backend based on your awesome option framework. I have added your theme framework to the theme in an admin folder inside the theme and have managed to load both tabs and most values are being saved. It is just that I now do not seem to get the uploader to work. When I click the upload button in the advanced tab nothing happens. Been going through some paths and cannot find the issue.

    Any ideas why the media uploader is not being called?

      1. Jasper

        Thanks. That was the issue. I adjusted the path and made it toplevel_page_options-framework as suggested. Now the media uploader loads just fine with my Options Page as a top level page.

  15. In the name of Allah,Hi,I think there is a bug while using several images uploaders in one tab,would you mind to check this problem?And the default value doesn’t work for images uploaders

  16. obmerk99

    Is it possible to use this also for PLUGIN options out-of-the-box (as opposed to theme-options) ? and if not, what changes must be made in order to do so ?

  17. I just installed this, looks really nice right out of the box. But I’m having one problem – on the Advanced Settings tab, the three image links for the Example Image Selector are pointing to the /images folder in my *parent* theme, Hybrid, rather than to /images in my active child theme. How do I change the links, and is it going to be a problem that I’m using the options framework in a child theme?

  18. Really amazing stuff, I’m fiddling with the code right now, it’s very neatly written, in index.php I did have to change line 186 from

    echo ‘Some sample text in your style’;

    to

    echo ‘Some sample text in your style’;

    the size and style were stuck together.
    A small contribution I hope ^^

  19. Brightweb

    Really nice framework. But if the intention is to make it easy to use, I suggest that you create a library implementations of basic as a loop of categories and pages. It’s hard to create this kind of code without a solid base.

  20. Alessandro

    thanks for this smart utility, in my tests I’ve found it’s the most straightforward among similar libs.

    It would be fantastic if in the future this could be used to generate option panels for plugins too, have you considered such opportunity?

      1. Alessandro

        I’ve adapted the theme version to work for a plugin, it wasn’t that hard but mine is still a bad hack, as due to the namespace used it’s not generic enough to serve multiple plugins.
        still thanks for sharing your work here!

  21. Pete

    Awesome plugin thanks… I’m slowly trying to get my head around it :)

    How do I add other/extra fonts in the typography dropdown?

      1. Pete

        As in how do i get my custom fonts to display on my website… there’s no demo of this in the options.php file.

  22. Pete

    A question that I need to get clear in my mind…
    1. What’s the difference between the Typography and Custom Typography options in the Theme Options page?

  23. Pete

    In regard to the example typography options, I can’t get the bold italic option to work? Bold works, normal works, italic works but bold italic doesn’t work? Would this be a problem with the options-sanitize.php file?

  24. Hi Devin
    I have just downloaded Portfolio Press (working in MAMP) and also downloaded both Plug-Ins and activated them as directed. Both Plug-Ins are on the Plug-Ins list and appear to be activated.
    I may have a glitch of some sort or have missed something in the steps required but Options Framework does not show when I click on Theme Options (there is a more basic set of options available) and when I go to Menus there is no Portfolio window and none of the Portfolio Categories or Tags are available to use.
    Many thanks for your assistance.

      1. Thank you for your quick reply.
        Screen options were my problem (thought I had checked those I wanted but when I went back in found they weren’t!)
        Yes I’m seeing the options so all is good… I mistakenly thought it would appear in Theme Options with a header of Options Framework and tabs such as ‘advanced’ as shown in the video.
        Love Portfolio Press for it’s clean modern style and for the fact that it will showcase my artwork so well… will rate it once I have completed updating my website.
        Thanks again.

  25. Hi, one question about retrieving pages;

    you have wrote:


    // Pull all the pages into an array
    $options_pages = array();
    $options_pages_obj = get_pages('sort_column=post_parent,menu_order');
    $options_pages[''] = 'Select a page:';
    foreach ($options_pages_obj as $page) {
    $options_pages[$page->ID] = $page->post_title;
    }

    and all we get are pages’s title. if i change to $page->post_name i will get the pages's slug. and the select will list to something like this

    array('page 1', 'page 2' ,..., 'page n').

    my question is : is there anyway to retrive both slug and title to select box ? like this:

    array('page 1' => 'page 1's title', 'page 2's title' ,..., 'page n's title').

    Thanks and Regards.

    Manh

  26. Hi Devin,

    Nice work. Great plugin. Question: Is it possible using this plugin to save separate theme options for multiple themes?

    I’m wondering if, as we develop a site, testing new themes, is it possible to preserve either overall settings for all the themes OR save the theme options for individual themes, or Both?

    I appreciate what your are doing,

    MWS

      1. Thanks Devin. If I understand right, if I want to reuse the options from theme to theme, I simply use the same “option name”.

        And, conversely, if I want to use separate sets of options, I would give them separate “option names”.

        Am I correct that you could set up separate sets of options on the same site, same theme, by giving each set of options a different “options name”?

        Thanks again for your work and response.

        MS

      1. Pete

        It’s a great idea for me, I don’t plan on having that many posts. I had a crack at it and found the solution :)


        // Pull all the posts into an array
        $options_posts = array();
        $options_posts_obj = get_posts('numberposts=999');
        $options_posts[''] = 'Select a post:';
        foreach ($options_posts_obj as $post) {
        $options_posts[$post->ID] = $post->post_title;
        }

        $options[] = array(
        'name' => __('Title Goes Here', 'options_check'),
        'desc' => __('sub title?', 'options_check'),
        'id' => 'post_select',
        'type' => 'select',
        'options' => $options_posts);

        http://pastebin.com/SBMViNDJ

      2. Pete

        I noticed that you have the option to list all the tags in a single select box, given there are likely to be more tags than there are posts and pages combined, maybe it’s not a bad idea :)… any chance in seeing a list of all posts and pages? Cheers.

      1. Hi Devin,

        Yes, sorry I figured it out already. I was supposed to assign some posts first to the categories. Everything’s running perfectly now. I’ve been thinking of opting for the $25 plugin. I’ll do once I get to know more of Options Framework and how the paid version differs from the Free version. I would like to pay each time I use it for a client.

        I’ll get back to you soon, thanks.

        Francis

  27. This is a great plugin.
    This has made my life so much better not having to stress about all the saving function.
    Especially loving the tabs and images saving.

    If your ever in Oregon an need a beer just let me know.

    twitter -> @ron_sparks

  28. Paul

    Hi Devin

    The article you linked to ( “A Sample Theme Options Page” from Ian Stewart ) is dated back in 2010, I was wondering if you would be kind enough to see if the code there is still up to date ?

    Thanks !

  29. Lore

    Hi,
    I tried to add a jQuery slider for percentage values, but I must be doing it wrong.
    In functions.php at the top:


    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-slider' );

    In options.php, addded option type slider.

    $options[] = array(
    ...
    'type' => 'slider');

    In your Jquery section at bottom added:

    $('.ui-slider').slider();

    Is there anything obviously wrong here?
    Thanks!

  30. Hey Devin,

    I’ve gotten a chance to use your framework both as part of a theme and as a plugin, and it’s just fantastic! Thank you so much for your time, it’s helped me out so much.

    I do have a quick question regarding changing the actual title of the submenu page from “Theme Options” to something else? My instinct is to first remove submenu page, then re add a page just with a different title, but that seems instinctively like odd fix. Do you have any suggestions on how to change that name, tried looking for an appropriate filter to hook into, but couldn’t find a good one.

    Thank you in advance, also #wcsf looked pretty cool, would you recommend it next year?

  31. Jez Thompson

    Cracking framework thank you, easy to use and looks very nice too.

    Do you have an example of have a checkbox a long side a text input?

    For example you wanted to show a link so you’d click the checkbox then paste the link in the text box along side it to the right.

    Currently the textbox appears below with a line diving them both.

  32. Chathura

    Hey Devin,

    Great plugin. I’m in the process of integrating this to my theme. While I was doing that I got a msg from my anti-vitus “Phoenix exploit kit detected”. Is this a false positive…?

    Thanks,
    Chat.

  33. Anders

    Hi!
    I want the latest post to show on all pages. As it is now they only show on homepage. On the other theres an excerpt from the page there on.

  34. Rab

    Hi Devin,

    I’m just wondering, if I have a parent theme with options.php, will a child theme inherit it? On top of that, could I add to the options already activated by the parent theme within the child theme? I’m not sure how clear that last question was so it’s probably better if I give an example:

    Parent theme options:
    1. Twitter Username
    2. Facebook Page URL

    Child theme options:
    1. YouTube Channel URL
    2. Google+ Page URL

    The child theme options would get all 4 options whereas the parent would only get the ones it specifies itself. Does that make sense? Is this possible?

    Cheers,
    Rab

      1. Rab

        Ahhh, so I could just add that filter to my child theme’s functions.php with all of the options I need in it as if I were adding it to options.php itself? What about predefined select options? Should I just add them to the same function but above the array entries?

        Cheers,
        Rab

  35. colin

    really useful – i’ll be using this in the future! one question…

    i’d like to have a slider and allow the user to ‘add a slide’ ( another row of content options ) – i guess i’d need a loop of some kind for the echo of_get_option() as well .. any ideas on how to achieve this easily?

Leave a Reply to Lore Cancel reply