How to make an Option Panel in your WP Theme in 5 minutes.

I was thinking to make a larger post about converting/simplifying a WordPress Theme, but I found so many details to dig in that I decided to split in more shorter posts for the best of the readers.

If you are a Theme Developer or you just wanted to improve a theme, usually you’ll need an Option Panel to customize the theme changing a few parameters.

I have been playing with the Option Tree for few days. In short, this plugin will help you make a Custom Option Page in no time, literally with (almost) no code.

There are many possibilities to create basically any Option you like. The Settings are easy to follow, the help is included and clear and the results are quickly reflected. You can customize your Option Panel and add tabs if you like.

Handling the Options

With this plugin, instead using get_option you end up using the get_option_tree  function to retrieve the option values. I added the following function to functions.php to simplify its use:

get option tree: based on plugin option_tree
function got( $option_name,$echo=true)
	if ( function_exists( 'get_option_tree' ) ) 
		if ($echo==true)
			get_option_tree( $option_name , '',true);
			return null;
		return get_option_tree( $option_name );

In this way I got a simplified and shorter function: echo get_option(“my_option”)  becomes echo got(“my_option”,false) or got(“my_option”) to echo directly the result. Maybe you want to add some extra code in case the plugin isn’t activated,  something I had to deal in one special case.

Expanding possibilities

The goal was to replace completely a custom Option Panel in a theme for a customized one made completely based on the Option Tree Plugin. I tried to reproduce exactly the same options I got in the original theme. Although it was easy in most cases, I found an interesting exception. I picked up the Colorbold Theme from Site5 FREE Premium WordPress Themes, a simple and nice theme I choose to rebuild this site. This is the original Option Panel:

Showing the logo from the option panel


In the example, after we saved the logo url, the image is displayed. I didn’t find a direct way to show the image , would it be a workaround?


Shortcode (and more) to the rescue

The first idea was implementing shortcodes. I made it a simple one in functions.php:

function logo_shortcode( $attr, $content = null ) {
    return '< img src="' . got('cbp_colorbold_logo_img',false) . '" />';
add_shortcode('logo', 'logo_shortcode');

where cbp_colorbold_logo_img is the option name for the logo img. The idea was simple, writing something like Current logo: [ logo/] would expand to the proper image.

But it didn’t work.

Patching and Testing

I found that function get_option_tree does not run in admin mode. Why is that? The answer is inside the file functions.load.php:

} else if ( !is_admin() ) {
include( OT_PLUGIN_DIR . '/functions/get-option-tree.php' );

Again, why is the reason behind to avoid running get_option_tree in admin mode? I’ll try to contact with the author to find out later. For the moment I patched the code to prove the concept:

} else if ( !is_admin() ) {
  //include( OT_PLUGIN_DIR . '/functions/get-option-tree.php' );
 include( OT_PLUGIN_DIR . '/functions/get-option-tree.php' );

But…it didn’t work. Digging into the code  I found that every field had its own file association in the \option-tree\functions\admin\ folder.

So the input type field is related to input.php  where I could see the following:

The problem here is that description does not process shortcodes properly, which can be easily solved replacing:

echo htmlspecialchars_decode( $value->item_desc );


echo do_shortcode(htmlspecialchars_decode( $value->item_desc ));

That finally do the trick:

I tried modifying the style a bit, but even I got what I wanted it would require more changes, so for now I stopped here.

A better way

There are many solutions for one problem. I wasn’t very happy with the results, so I tried one more time. Playing with the various field types, I saw that field type Textblock  render any html text we want to show in the Option Panel. The idea was to use something like a macro substitution. For example:

<img src=”#my_logo_option_name_here#” />

would expand into:

<img src=”” />

This concept would be easier to implement and I would avoid to modify functions.load.php and also input.php (!)

So, I extended tree\functions\admin\textblock.php:

function option_tree_textblock( $value, $settings, $int ) 
  <div class="option option-textblock">
    <!-- <h3 class="text-title"><?php echo htmlspecialchars_decode( $value->item_title ); ?></h3> -->
    <div class="section">
      <div class="text_block">

		$macro_value= stripslashes( $value->item_desc );

		//loop options to replace it properly
		foreach ($theme_options as $key => $value)
		echo htmlspecialchars_decode ($macro_value,ENT_QUOTES);

Rendering a textblock with this content:

Current logo:<br/>
<img src='#cbp_colorbold_logo_img#' />

it would expand to:

which is exactly the same look I had in the original panel. This time I didn’t need shortcodes, patching functions.load.php nor input.php. One change in one file and we’re done.

Next steps & some conclusions

I think if you want to make an  Option Panel faster than you think, Option Tree will cover most of your needs although you could find some minor limitations. There are more advantages that I didn’t cover (but I pretend to in the next posts).

If you want to take complete control of your Option Panel, a better approach would be the Options Framework Plugin This road could require little more code and also will be subject to another post.

This is the beginning, which will be branched to some interesting findings on GitHub, recoding techniques, HTML5 conversion, plugins,  theme reviews (didn’t tell you I am WordPress Reviewer?) and other stuffs. Stay tuned.

1 Comment

    • Reply Cancel Reply
    • September 18, 2012

    Nice to read this post. If you help me the code to show the slide in loop using option tree plugin then I will be very happy and thankful to you.

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=""> <s> <strike> <strong>