How to add Options Framework to WordPress Theme

Pavan June 6, 2013 Web Development 12 Comments

When a WordPress Theme developer takes up any new theme development, he has to think about some neat and unique design and what all features he is going to offer in the new theme. It’s not quantity but quality and configuration usability that makes user to choose your theme over others. If you start to code for admin configuration in your theme, it will take you ages to come up with some descent design and options.

When I gave a try to WordPress theme development, first thing I looked for is that “How I am going to provide all those options which I have in mind with minimal code?” I stumbled up on few plugins that were available in market and could have worked very well with my theme. Of all such plugins one stood out in simplicity and functionality and that is Options Framework Plugin by Devin. The Options Framework Plugin makes it easy to include a full featured options panel in any WordPress theme.

My aim was to use same functionality as an in-built feature of my theme and not as a plugin. This would have saved a great deal of time of theme. So I did some search and trials and I was able to implement the framework inside my theme. I am going to share the same here in this article.

First you need to copy the plugin copy from GitHub to your local drive. Once you have the zipped archive on your machine, unzip it and copy files and folders as displayed in below image to to one “admin” folder.

Next task is to initiate the framework and provide options.php to this framework. Basically this framework uses a php file to get its options data. By default the name of the file is “options.php” but you can override this by simply adding simple filter. Now I will show you my theme’s includes/inc folder where I am going to put above admin folder

You can see I have one “options-panel.php” which is going to initiate the framework and “options.php” which stores my actual options. Here is the code for framework initiation

<?php

/* 
 * Loads the Options Panel
 *
 * If you're loading from a child theme use stylesheet_directory
 * instead of template_directory
 */

if ( !function_exists( 'optionsframework_init' ) ) {
	define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/admin/' );
	require_once dirname( __FILE__ ) . '/admin/options-framework.php';
	require_once dirname( __FILE__ ) . '/custompostypes.php';
}

/* 
 * This is an example of how to add custom scripts to the options panel.
 * This one shows/hides the an option when a checkbox is clicked.
 *
 * You can delete it if you not using that option
 */

add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');

function optionsframework_custom_scripts() { ?>

<script type="text/javascript">
jQuery(document).ready(function() {

	jQuery('#example_showhidden').click(function() {
  		jQuery('#section-example_text_hidden').fadeToggle(400);
	});

	if (jQuery('#example_showhidden:checked').val() !== undefined) {
		jQuery('#section-example_text_hidden').show();
	}

});
</script>

<?php
}

/* 
 * Loads the Options From Different Location as per themes requirement 
 * 
 */
function mytheme_options_framework_location_override() {
	return array('/inc/options.php');
}
add_filter('options_framework_location','mytheme_options_framework_location_override');

?>

<?php

* Loads the Options Panel

* If you're loading from a child theme use stylesheet_directory

* instead of template_directory

if ( !function_exists( 'optionsframework_init' ) ) {

define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/admin/' );

require_once dirname( __FILE__ ) . '/admin/options-framework.php';

require_once dirname( __FILE__ ) . '/custompostypes.php';

}

* This is an example of how to add custom scripts to the options panel.

* This one shows/hides the an option when a checkbox is clicked.

* You can delete it if you not using that option

add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');

function optionsframework_custom_scripts() { ?>

jQuery(document).ready(function() {

jQuery('#example_showhidden').click(function() {

jQuery('#section-example_text_hidden').fadeToggle(400);

});

if (jQuery('#example_showhidden:checked').val() !== undefined) {

jQuery('#section-example_text_hidden').show();

}

});

</script>

<?php

}

* Loads the Options From Different Location as per themes requirement

function mytheme_options_framework_location_override() {

return array('/inc/options.php');

}

add_filter('options_framework_location','mytheme_options_framework_location_override');

The code is simply locating the options framework and invoking i. The above code also shows you how to put in the filter to override the options file name. Now this framework supports almost all of the options types, these are listed below

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

The framework provides you nicely grouped options. All options belonging to one group are displayed in one tab. Tabs shown as below.

Basic Settings – Admin Panel

And above can be achieved using the options.php

	//Settings for Basic Settings Tab
	$options[] = array(
		'name' => __('Basic Settings', 'options_check'),
		'type' => 'heading');

	$options[] = array(
		'name' => __('Header Background', 'options_check'),
		'desc' => __('If set this will be used as your sites header background.', 'options_check'),
		'id' => 'header_background',
		'type' => 'upload');	

	$options[] = array(
		'name' => __('Site Logo', 'options_check'),
		'desc' => __('If set this will be used as your sites logo.', 'options_check'),
		'id' => 'site_logo',
		'type' => 'upload');			

	$options[] = array(
		'name' => __('Theme Layout', 'options_check'),
		'desc' => __('This option allows you to set theme layout Boxed or Full Width/Wide.', 'options_check'),
		'id' => 'theme_layout',
		'std' => 'Boxed',
		'type' => 'select',
		'class' => 'mini', //mini, tiny, small
		'options' => $theme_layout_array);

//Settings for Basic Settings Tab

$options[] = array(

'name' => __('Basic Settings', 'options_check'),

'type' => 'heading');

$options[] = array(

'name' => __('Header Background', 'options_check'),

'desc' => __('If set this will be used as your sites header background.', 'options_check'),

'id' => 'header_background',

'type' => 'upload');

$options[] = array(

'name' => __('Site Logo', 'options_check'),

'desc' => __('If set this will be used as your sites logo.', 'options_check'),

'id' => 'site_logo',

'type' => 'upload');

$options[] = array(

'name' => __('Theme Layout', 'options_check'),

'desc' => __('This option allows you to set theme layout Boxed or Full Width/Wide.', 'options_check'),

'id' => 'theme_layout',

'std' => 'Boxed',

'type' => 'select',

'class' => 'mini', //mini, tiny, small

'options' => $theme_layout_array);

The first element with type as heading will be treated as one tab and all other options that follows will be added under that tab till we encounter next element of type heading. Isn’t it easy? Now if you want to add next tab, just add one more element with type heading in and you will get your next tab. e.g.

	$options[] = array(
		'name' => __('Home Page Settings', 'options_check'),
		'type' => 'heading');	

	$options[] = array(
		'name' => __('Settings for Slider on Home page', 'options_check'),
		'desc' => __('Check to display Slider. Defaults to true.', 'options_check'),
		'id' => 'display_slider',
		'std' => '1',
		'type' => 'checkbox');

$options[] = array(

'name' => __('Home Page Settings', 'options_check'),

'type' => 'heading');

$options[] = array(

'name' => __('Settings for Slider on Home page', 'options_check'),

'desc' => __('Check to display Slider. Defaults to true.', 'options_check'),

'id' => 'display_slider',

'std' => '1',

'type' => 'checkbox');

You can find details of other options that is available in the downloaded folder. With all this information I think you will be able to add options framework to your theme with ease and make your theme powerful than ever.

Please subscribe to our feed for more such informative articles and tutorials.

Tags:Wordpress, Wordpress theme development

12 Comments

domain
October 15, 2014 | Reply

Hmm is anyone else having problems with the images on this
blog loading? I’m trying to figure out if its a problem on my end
or if it’s the blog. Any suggestions would
be greatly appreciated.
Dmiitry
October 21, 2013 | Reply

Helo admin please make tutorial how yo create wp theme, please or say where i can read

Pavan
October 21, 2013 | Reply

Hello Dimiitry,
I dont have any active tutorial running on my site for wp themes creation but I am sure this link will be very helpful to start
http://codex.wordpress.org/Theme_Development

Let me know if you need any more info. Again , thanks for stopping by. Keep visiting.

Dmitry
October 23, 2013 | Reply

Hello i want create theme with http://foundation.zurb.com/templates.php but i can t understand. here many words and very dificult http://codex.wordpress.org/Theme_Development
So how you create you theme Opencodez? Do you want write tutorial?

Pavan
October 24, 2013 | Reply

Hello Dimitry,
I would love to put together an article on this but that obviously will take its time. But I will definitely will try to make this happen asap. But for starters you can refer wordpress theme TwentyTwelve for code and structure, it will be helpful.

Patrik
September 5, 2013 | Reply

Hi!

Thanks for a great article! It has helped me a lot in my struggle to put together my WordPress theme. I´ve learned a lot looking at your code and playing around with it. 🙂

However, there is one thing though that I can´t find information about. And that is how to switch/toggle between full width and boxed layout. Feels like I´ve searched the entire interwebz but with no luck.
Do you have a working example for that? Or any other advice on how to do this?

Otherwise, awesome job and again.. a great article! 🙂

Thanks!

Best regards,
Patrik

Pavan
September 5, 2013 | Reply

Hi Patrik, Thanks for good words 🙂 and I am glad it was helpful to you.

For layout toggle, I generally use a wrapper div which start just after your body tag and ends before body tag. By default I keep its width 100% and when you choose boxed layout, I re-write the css in wp_head action. If you want working example you can download any of the themes Opencodez or Awakening. Check in css for #bodychild in styles.css and in functions.php check the section where I am adding action for wp_head

Hope this will help you. Keep visiting!

Patrik
September 5, 2013 | Reply

Hi Pavan! Big thanks for your fast reply! 🙂

I understand the concept and how it should work when I see your code in those templates, but I don´t get it to work really.

This is what I did. Tested with the code from Awakening.

In functions.php

if ( ! function_exists( ‘awakening_wp_head’ ) ) :
function awakening_wp_head() {

// write css depending up on the layout
$theme_layout = of_get_option(‘theme_layout’);
if(“boxed” == $theme_layout) {
?>
#bodychild{ width:960px !important;}
__(‘Theme Layout’, ‘options_check’),
“desc” => “Boxed or wide layout?”,
“id” => “theme_layout”,
“std” => “Wide”,
“type” => “select”,
“options” => array(
‘boxed’ => ‘Boxed’,
‘wide’ => ‘Wide’,
));

In style.css

#bodychild{
max-width: 100%;
margin:0 auto;
padding:0;
background: #fff;
}

In header.php

and closed that div in footer.php

I can´t get it to work, do you see any errors? Super thanks again!

Pavan
September 7, 2013 | Reply

Can you try % for boxed layout than pixel? Say 80% instead of 960px.

Patrik
September 7, 2013 |

Hi!

I tried that before and now I gave it another try but with no luck.

The site is here if you want to see the source code: http://skystorm.shiki.se

Feels like something is in the wrong place or is mixed somehow. 🙂

And big thanks Pavan for helping me look into this. It´s really appreciated! 🙂
Pavan
September 10, 2013 |

Hey Patrik,
I checked your site and I think the code works perfectly fine. You are not able to see its effect because it seems you have not set the body background. In your case both body and bodychild are white and thus not able to give you the required effect. You need apply css to set your body background with some texture/image. I have this in my styles.css
body { background-image: url('images/bg_body1.png'); background-repeat: repeat; background-position: top center; background-attachment: scroll; }

Lets hope this works for you!
Patrik
September 10, 2013 |

Thank you soo much Pavan! Works like a charm now! 🙂
Feel kinda stupid for not seeing that! Lol 🙂

You are the best!

Now I need to figure out how to upgrade the Options Three that got an update yesterday. Now theyt have made it look just like I wanted it in the beginning.. bummer! 😀

Thanks again! 🙂

How to add Options Framework to WordPress Theme

Add a Comment

Openstrap 2.0.3

Aadya 2.0.3

Awakening 2.0.3

Related Posts

Add a Comment

Openstrap 2.0.3

Aadya 2.0.3

Awakening 2.0.3