Options Framework Plugin

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

I built this plugin so theme developers can concentrate on making the actual theme rather than spending a ton of time on building an options panel from scratch. It’s free to use in both commercial and personal projects, just like WordPress itself.

There’s also a theme version if that better fits your project.

Video Demo

Options Framework Plugin from Devin Price on Vimeo.

When Not to Use This Plugin

If you just have a couple options and none of them are complicated color pickers or image uploaders, I’d recommend checking out “A Sample Theme Options Page” from Ian Stewart. Using the Options Framework in this case would be overkill.

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.

You can also purchase the Options Kit, which is a collection of starter themes, including Options Check.

To get started:

1) Copy “options.php” from the Options Check theme into your own theme.
2) Edit the array in “options.php” to define the options you want to use.
3) Add the following function to your theme so it will use default settings even if the Options Framework plugin is not installed:

/*
 * Helper function to return the theme option value. If no value has been saved, it returns $default.
 * Needed because options are saved as serialized strings.
 *
 * This code allows the theme to work without errors if the Options Framework plugin has been disabled.
 */
if ( !function_exists( 'of_get_option' ) ) {
function of_get_option($name, $default = false) {
	$optionsframework_settings = get_option('optionsframework');
	// Gets the unique option id
	$option_name = $optionsframework_settings['id'];
	if ( get_option($option_name) ) {
		$options = get_option($option_name);
	}
	if ( isset($options[$name]) ) {
		return $options[$name];
	} else {
		return $default;
	}
}
}

Available Options

These are the options currently available. If you feel there is something I left out, get in touch and perhaps I can add it.

  • 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 you 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.

In Portfolio Press I created a theme options page with a message, which will get overridden if the actual plugin is installed. The code is also in this Gist (which you’re welcome to use):

Download the Plugin

Download from WordPress Repository
Download Development Version
Learn About the Options Kit

Future Development

If you’re looking to do something with the plugin that isn’t currently possible, post it in the comments.

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 .

If you would like to donate to the ongoing plugin development, hook me up with a PayPal donation. You can also purchase the Options Kit.

280 thoughts on “Options Framework Plugin”

  1. Towfiq I. wrote:

    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:

    Reply
  2. David wrote:

    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!

    Reply
  3. Adrian wrote:

    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!!

    Reply
  4. Emma wrote:

    Hello!

    Thanks for this framework!

    I have a problem with getting default values!

    any ideas why this happens?

    Thank you!

    Reply
    • Devin wrote:

      You can pass the default when you call the options, e.g. of_get_option(‘option’,'default’). I believe the options need to be saved before the defaults populate in the database.

      Reply

  5. Pingback: Released UbuntuWP v.3 – Free Wordpress Premium Theme - Lirent.net

  6. Steven Jones wrote:

    Hi Devin,

    Great plugin – much appreciated for sharing.

    Is there any chance wp_editor is going to be integrated so we can have a WYSIWYG available?

    Cheers,
    Steve

    Reply
  7. Joshua Trusz wrote:

    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

    Reply
    • Devin wrote:

      You’re using of_get_option(‘option_name’,'default’) and it returns an array?

      Reply
  8. Joshua Trusz wrote:

    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!!

    Reply
    • Joshua Trusz wrote:

      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

      Reply
  9. eben wrote:

    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?

    Reply

  10. Pingback: Tech Notes: Hooking Actions on Options Framework Changes | Oikos

  11. joshua wrote:

    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

    Reply
  12. Zsolt wrote:

    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

    Reply
      • Zsolt wrote:

        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

      • Devin wrote:

        You don’t need to check if the user can edit options, since this stylesheet will only be displayed on that page. You also don’t need the nag notices- the plugin should handle that. Try something like this:

        if ( is_admin() ) {
        $of_page= ‘appearance_page_options-framework’;
        add_action( “admin_print_styles-$of_page”, ‘optionsframework_custom_css’ );
        }

        AND:

        function optionsframework_custom_css () {
        wp_register_style( ‘optionsframework_custom_css’, get_stylesheet_directory_uri() .’/css/options-custom.css’ );
        wp_enqueue_style( ‘optionsframework_custom_css’ );
        }

  13. Anfisa wrote:

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

    Reply
  14. Alex wrote:

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

    Reply
  15. Jan wrote:

    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

    Reply
      • Jan wrote:

        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

  16. Jan wrote:

    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.

    Reply
  17. david wrote:

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

    Reply

  18. Pingback: The Weekly Theme Show #7: "There's a wizard in your WordPress theme" | WPCandy

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>