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
- Options Framework + Theme Customizer
- Options Framework Sidebar
- Loading Additional Stylesheets from an Options Panel
- Loading Google Fonts from Theme Options
- Color Palettes with the Options Framework
- Options Framework: Sanitization Filters
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 .
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:
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!
Nice. His post: http://josephscott.org/archives/2010/03/database-powered-css-in-wordpress-themes/ for anyone else looking.
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!!
Are you sure you have the latest version? There is a filter on it and it appears to be saving for me:
https://github.com/devinsays/options-framework-plugin/blob/master/options-sanitize.php
Oh didn’t see the latest updates! Thanks for that!!
Hello!
Thanks for this framework!
I have a problem with getting default values!
any ideas why this happens?
Thank you!
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.
[…] theme use the Options Framework for customizable theme options. Based on Skeleton theme Framework a small collection of CSS & […]
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
I’m glad you asked Stephen. Help me test the latest version so I can get the release out: https://github.com/devinsays/options-framework-plugin
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
You’re using of_get_option(‘option_name’,’default’) and it returns an array?
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!!
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
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?
Take a look at the code: https://github.com/devinsays/options-framework-plugin/blob/master/options-sanitize.php
allowedposttags can be used.
[…] use the Options Framework plugin as a way of quickly adding theme options to custom themes that I build. I’ve been using it […]
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
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
Yes. Look at how the plugin does it in optionsframework_add_page in https://github.com/devinsays/options-framework-plugin/blob/master/options-framework.php. You’ll need to do something similar in your functions.php file:
add_action( ‘admin_print_styles-options-framework, ‘yourtheme_custom_styles’ );
and then a wp_enqueue_style with your custom stylesheet.
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
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’ );
}
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. :)
Descriptions have the $allowedtags filter applied to them. You can add “target” to allowed tags if you want: https://wptheming.com/2011/05/options-framework-0-6/
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 :)
Since options are generated by the code in options.php, it would be really difficult to add dynamic options. The Options Tree plugin might get you a little closer in that direction (http://wordpress.org/extend/plugins/option-tree/).
But probably the best would be to make your theme integrate with this plugin (http://shakenandstirredweb.com/plugins/social-bartender/), which seems to do exactly what you want.
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
I have typography examples with CSS in the Options Kit: https://wptheming.com/options-kit/
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
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.
@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.
[…] weight of theme options: Weaver IIArtisteerWooThemes shortcodes on their CodexWPZoom theme optionsTheme options frameworkCarl Hancock’s comments on tabbed interfaces and the post on WPCandyWeekly WordPress Theme […]
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?
Well, it looks like you’re using the theme version. So, take a look at this page: https://wptheming.com/options-framework-theme/. Under the FAQ it explains why the image uploader doesn’t work if you change the menu location.
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.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
Sure. Haven’t noticed that issue, but I’ll retest it. Here’s the GitHub ticket: https://github.com/devinsays/options-framework-plugin/issues/114
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 ?
Not really. It was designed for just theme options. Would involve a good amount of work to change it.
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?
No problem that you’re using a child theme. Just update the $imagepath variable to use get_stylesheet_directory_uri rather than get_template_directory_uri in options.php.
Perfect. Thank you!
Love this framework!
Also I found a typo “…required for YOU theme to work.”
Thanks, fixed.
[…] are several frameworks that you can use as your foundation. Just to name a few; UpThemes Framework, Options Framework, and OptionTree. If you plan to include widgets with your theme, why not check and see if someone […]
Devin, Are you going to add the new 3.4 “theme customizer” in options framework? :)
Regards
Haven’t spent much time on it yet- but yes, I expect to.
Thanks! This is exactly what I was looking for. Thanks for making wordpress easier to use and develop for!
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 ^^
Thanks. Fixed: https://github.com/devinsays/options-framework-plugin/commit/4635de555fac74fbc69326dbfffa9fa251cb83b6
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.
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?
Yes, I would like to make a version of this that is more generic and can work for any type of option page- but have not gotten there yet.
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!
Awesome plugin thanks… I’m slowly trying to get my head around it :)
How do I add other/extra fonts in the typography dropdown?
So how do I showcase the custom typography?
How do you mean?
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.
Check out the Options Kit. It has demos: https://wptheming.com/options-kit/
Or see this post: https://wptheming.com/2012/06/loading-google-fonts-from-theme-options/
Have you read this post yet? https://wptheming.com/2012/06/loading-google-fonts-from-theme-options/
[…] a couple of different ways to install this framework; as a theme, or as a plugin. I’m going to show you how to build it directly into your theme.Download the latest version […]
Hi Devin. is there any chance for sub heading in the next update ?
Thanks
Not sure what you mean?
You can use the “info” option if you want to add text between options. You can also style it different if you choose by hooking in an additional stylesheet.
Sorry, please checkout this image from woothemes: http://www.woothemes.com/wp-content/uploads/2012/06/c5_feat1.jpg
As you can see in Styling (heading) has sub-headings : Background, Links, Typography. they seem like nested tabs!
It’s very useful if we want to seperate Options instead of long scroll :)
Hope this feature will be added in the next version of this awesome plugin
Thank you
Manh
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?
One has default settings. The other is manually set.
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?
The color styling only works when i hover over the text? Would this be a problem with my stylesheet?
http://pastebin.com/g9YC6gKs
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.
Did you watch this about the menus? https://wptheming.com/2010/10/how-to-use-the-wordpress-menus/
You may need to check your screen options on that page to be able to see the different taxonomies.
If you’re seeing any options, those are the options. It is a basic set.
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.
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
i mean i want to list to select like this:
page’s slug as value and page’s title as placeholder
Fullwidth page
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
The options name gets set in the optionsframework_option_name function. See: https://github.com/devinsays/options-framework-plugin/blob/master/options-check/options.php
If you set all your themes to use the same option name, they will.
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
The options get saved into a single serialized array under the option name you have defined in optionsframework_option_name. A single theme cannot have multiple option names if you are using the Options Framework.
What file do I edit if I want to ad an extra ‘save’ button mid way down the options page?
Hi Devin, can you show me how to edit it so that I can make an option to list all my posts.
Thanks heaps
This is a bad idea. Some WordPress installs have thousands of posts. You don’t want to pull all those into a single select box.
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
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.
I can’t get the Categories and Tags to list in the dropdown. I tried creating 3 to 5 categories and tags. All other options are working just fine.
I tried it with 2 themes already, by the way. Any assistance is appreciated. thanks.
Link to my test page: http://codetest.beyondwebpros.com/wptest/
It looks like the category is showing up. Have you selected and saved it since adding your tags?
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
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
Deal.
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 !
Yeah, that’s a venerable bit of code. An even better example, though, might be the theme Options Panel in Twenty Eleven, or the code in the _s theme: https://github.com/Automattic/_s
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!
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?
Yes, that’s the route I’m suggesting at the moment.
You can also see this thread: https://github.com/devinsays/options-framework-plugin/pull/110
Sounds good, I’ll go that route, thanks a bunch for the advice.
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.
Hook in an additional stylesheet and move it however you like:
https://wptheming.com/2012/06/loading-additional-stylesheets-from-an-options-panel/
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.
In the file or on my website?
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.
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
The Options Framework will use options.php if it is in your child theme. If it’s not there, it will look in the parent theme.
If you want to have different options in all child themes, you can use a simple if statement to check if it is a child theme, and if so, display the additional options.
Or, if you want your child theme to have its own specific options in addition to the options in the parent theme (and you don’t want to create a new options.php file in the child theme), you can filter the options.
If you’re interested in the filter, read the code example in the comments for the last function on this file:
https://github.com/devinsays/options-framework-plugin/blob/master/options-framework.php
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
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?
The options framework isn’t really set up to do dynamic options like that. I generally suggest using post types for sliders. There’s ways around it of course (like limiting it to 5 slides and providing all the options- like you said you use), but none of them are really perfect.
I did figure out how to make a repeating text field:
http://www.kathyisawesome.com/473/add-repeating-text-field-to-options-framework/
For a “slider” though, it would probably need to be expanded to include more than just a text input.