Build Your Own Business Website header image

How to Create Context Sensitive Sidebars in Thesis

The Verve Meta Box Plugin is no longer available. As a replacement we are suggesting the Types Plugin.

Thesis makes it quite easy to add context sensitive sidebars to custom templates.  I’m going to demonstrate in this tutorial how to create context sensitive sidebars and apply them to your custom templates.  This tutorial arose out of a question I answered on DIY Themes Forums.  That question can be found here.  I’ve created a demonstration of this tutorial at http://forumdemos2.byobwebsite.com.

The goal here is to create a custom template for a specific page topic.  The example here is of a website that contains information about pets.  It has 3 main categories of pages.  It has a set of pages about Dogs, a set about Cats and a set about Birds.  All of the pages in the Dog “category” (this is not a WordPress category as categories only apply to posts and not pages) will be given the Dogs Sidebar, all of the pages about Cats will be given the Cats Sidebar, etc.

The way we will make the choice of sidebars is that we will assign a specific sidebar to each specific page.  We will create a meta box on the page edit screen that will make it possible to select this every time we create a page without having to adjust the code.  We will be using the Verve Meta Boxes plugin for creating the meta boxes.

Install the Verve Meta Boxes Plugin

You can download and install Verve Meta Boxes from the WordPress Plugin Repository. Verve Meta Boxes is a very useful plugin and makes customizing the post or page edit screen a snap.

Configure Verve Meta Boxes

Verve Meta Boxes in the Tools Men

Tools Menu

Once installed we will configure the plugin by selecting “Verve Meta Boxes” in the Tools Menu.

We will create a new Meta Box called “Context Menus”.  This will be the title that shows on the top bar of the meta box.  We want this to only apply to pages, so we will check the “page” checkbox.  This means that the meta box will only be displayed on the page edit screen and not on the post edit screen.  Then select “Create Box”.

You can see these settings demonstrated in the figure below.

Create a new meta box

New Meta Box for Selecting the Context Menu

Once the meta box is created we need to add fields to it. A field in this context is a “custom field”. From the programing side of WordPress a custom field is actually called “post meta”. Post meta is a storage location for information about the post. In this context our post meta will be saving our sidebar selection. So the field we want to add is a drop down list that will give us a choice of each of the three sidebars. Choose

  • Field type – select
  • Field Name – “Sidebar Type”
  • Field Description – “Select the Sidebar from the list”

Select Add field and then enter the name of each sidebar in the box below the field type as a comman separated list. See the example below.

Create the field for the meta box

Enter the sidebar names in a comma separated list

Once completed select Update Box and then open a page in your Pages dialog.  You will see that the meta box has been added just above the SEO Details and Additonal Style box.  See the image below.

Newly created meta box

Our Newly Created Context Sensitive Sidebar Meta Box

Register Our New Sidebars

Once the meta box is completed it is time to write our new code.  The first step in this is to “Register” our sidebars.  The code for this is shown below:

/*******************************************************************************
 * These functions Create Context Sensitive Sidebars which will be used in
 * Custom Templates.
 *
 * First we register the Sidebars
 ******************************************************************************/

register_sidebar(array(
			'name' => 'Dogs Sidebar',
			'before_widget' => '<li class="widget %2$s" id="%1$s">',
			'after_widget' => '</li>',
			'before_title' => '<h3>',
			'after_title' => '</h3>'
			));
register_sidebar(array(
			'name' => 'Cats Sidebar',
			'before_widget' => '<li class="widget %2$s" id="%1$s">',
			'after_widget' => '</li>',
			'before_title' => '<h3>',
			'after_title' => '</h3>'
			));
register_sidebar(array(
			'name' => 'Birds Sidebar',
			'before_widget' => '<li class="widget %2$s" id="%1$s">',
			'after_widget' => '</li>',
			'before_title' => '<h3>',
			'after_title' => '</h3>'
			)); 

This code is almost exactly as recommended in the WordPress Codex.  The one difference is that Thesis uses the h3 tag for headings while the WordPress example uses the h2 tag.

This code registers 3 sidebars, each with a unique name.  Each widget will be wrapped in an <li> tag with a unique id and class.  Each title will be wrapped in an <h3> tag.  In my opinion the Thesis solution is better because from an SEO standpoint the h2 tag is important.  However, the content of the sidebars is rarely important for SEO.  I leave the h2 tag for important elements of my content.

Build the Dynamic Sidebars

The next step is to build the dynamic sidebars.  The code for that is below:

 /*******************************************************************************
 * Next We Build the Sidebars - one function per sidebar so we can call them
 * individually
 ******************************************************************************/

function byob_dogs_sidebar() {
    echo "\t\t<div id=\"sidebars\">
";
    thesis_hook_before_sidebars(); #hook
        ?>
        <div id="context-sidebar" class="sidebar">
            <?php thesis_hook_before_sidebar_1(); ?>
            <ul class="sidebar_list">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Dogs Sidebar') ) { ?>
                    <li class="widget">
                        <div class="widget_box">
                            <h3><?php _e('Dogs', 'thesis'); ?></h3>
                            <p>This is your new sidebar.  Add widgets here from your WP Dashboard just like normal.</p>
                        </div>
                    </li>
                <?php } ?>
            </ul>
            <?php thesis_hook_after_sidebar_1(); ?>
        </div>
        <?php
   thesis_hook_after_sidebars(); #hook
   echo "\t\t</div>
";
 }

 function byob_cats_sidebar() {
    echo "\t\t<div id=\"sidebars\">
";
    thesis_hook_before_sidebars(); #hook
        ?>
        <div id="context-sidebar" class="sidebar">
            <?php thesis_hook_before_sidebar_1(); ?>
            <ul class="sidebar_list">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Cats Sidebar') ) { ?>
                    <li class="widget">
                        <div class="widget_box">
                            <h3><?php _e('Cats', 'thesis'); ?></h3>
                            <p>This is your new sidebar.  Add widgets here from your WP Dashboard just like normal.</p>
                        </div>
                    </li>
                <?php } ?>
            </ul>
            <?php thesis_hook_after_sidebar_1(); ?>
        </div>
        <?php
   thesis_hook_after_sidebars(); #hook
   echo "\t\t</div>
";
 }

 function byob_birds_sidebar() {
    echo "\t\t<div id=\"sidebars\">
";
    thesis_hook_before_sidebars(); #hook
        ?>
        <div id="context-sidebar" class="sidebar">
            <?php thesis_hook_before_sidebar_1(); ?>
            <ul class="sidebar_list">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Birds Sidebar') ) { ?>
                    <li class="widget">
                        <div class="widget_box">
                            <h3><?php _e('Birds', 'thesis'); ?></h3>
                            <p>This is your new sidebar.  Add widgets here from your WP Dashboard just like normal.</p>
                        </div>
                    </li>
                <?php } ?>
            </ul>
            <?php thesis_hook_after_sidebar_1(); ?>
        </div>
        <?php
   thesis_hook_after_sidebars(); #hook
   echo "\t\t</div>
";
 }

Each sidebar is placed within it’s own function so that it is easy to reference in the custom template.  Notice that the function name is prefaced by a unique prefix “byob”. This way I know for certain that my function name won’t conflict with another.
In my opinion it is always best to  use the default Thesis HTML structures so that’s what we’re doing here.  First we create the div sidebars.  Next we add the thesis hook.  Then we create a new div called “context-sidebar” which replaces the typical Thesis div called “sidebar-1”.  We do this so that we can style the sidebar differently if we so choose.

Next comes the Thesis structure ul.sidebar_list and then some difficult to explain code that doesn’t actually behave the way you think it would if you were reading it.  Suffice it to say that what it does is display the Blue Thesis box in the sidebar if there are no widgets in the sidebar, otherwise it displays the widgets.

Finally we add the closing HTML structure and the closing Thesis hooks.  This way anything you hook to thesis_hooks_after_sidebar will show up on these custom sidebars as well.

Create the Logic that Selects the Appropriate Sidebar

Now we need to create the logic that will display the sidebar we select when editing the page.  The way this works is that we get the value of the “Sidebar Type” post meta.  Based on that value we will display a given sidebar.  The code is below:

/*******************************************************************************
 * Next We Build the Logic that Selects the Correct Sidebar.  This relies on Verve
  * Meta Boxes plugin for creating the custom post meta and the met box dialog
 ******************************************************************************/

 function byob_choose_sidebar(){
     global $post;
     $post_id = $post->ID;
     $byob_sidebar_type = get_post_meta($post_id, 'sidebar_type', true);

     if ($byob_sidebar_type == "Dogs Sidebar"){
         byob_dogs_sidebar();
     }elseif($byob_sidebar_type == "Cats Sidebar"){
         byob_cats_sidebar();
     }elseif($byob_sidebar_type == "Birds Sidebar"){
         byob_birds_sidebar();
     }else{
         thesis_sidebar_1();
     }
 } 

The very first thing we do is refernce the global variable $post. We have to do that because this function is occuring outside of the loop. If we do not reference that variable we won’t be able to access the post meta value for our page.
Next we get the post meta. We want the value of the “sidebar_type” post meta for the current page. Once we get that post meta we assign the value of it to the variable $byob_sidebar_type. And now that we have that value in the variable we can use it to decide which sidebar to display.
For this we will use an if statement. If the condition is true then we will do the commands below. This is why we place each sidebar in its own function. If it is the Dogs Sidebar then we can call the dogs sidebar function.
Finally, if it isn’t any of the sidebars in our list then we want to display the default sidebar_1.

Create the Custom Template

With all of the preliminaries out of the way we can now create the custom template.  We are creating a default custom template that will be used every time the custom template is selected unless there is some language that picks a different template.  In this case I already have a custom template on this site that is assigned to the front page.  So what I want to do is to decide if the page is the front page, if it is I will display the front page custom template.  If it isn’t then I will display the default custom template.  The code for this is below:

/*******************************************************************************
 * Next We Build the Custom Template - this template checks for specific pages
  * and applies those custom templates to the specific pages, otherwise it applies
  * the typical custom template
 ******************************************************************************/

 function byob_custom_template_selector(){
     if(is_front_page()){
         custom_3column_template();
     }else{
         thesis_content_column();
         byob_choose_sidebar();
     }
 }
 remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
 add_action('thesis_hook_custom_template', 'byob_custom_template_selector'); 

The function starts off with the conditional – if is front page. If it is then it returns the custom 3 column template. If it isn’t then it returns the Thesis Content column and the sidebar.

All of this happens because we have removed the sample custom template from the Thesis hook and have added the function custom template selector in its place.

The full code for this is below in one big chunk.

I welcome your questions or comments.

/*******************************************************************************
 * These functions Create Context Sensitive Sidebars which will be used in
 * Custom Templates.
 *
 * First we register the Sidebars
 ******************************************************************************/

register_sidebar(array(
			'name' => 'Dogs Sidebar',
			'before_widget' => '<li class="widget %2$s" id="%1$s">',
			'after_widget' => '</li>',
			'before_title' => '<h3>',
			'after_title' => '</h3>'
			));
register_sidebar(array(
			'name' => 'Cats Sidebar',
			'before_widget' => '<li class="widget %2$s" id="%1$s">',
			'after_widget' => '</li>',
			'before_title' => '<h3>',
			'after_title' => '</h3>'
			));
register_sidebar(array(
			'name' => 'Birds Sidebar',
			'before_widget' => '<li class="widget %2$s" id="%1$s">',
			'after_widget' => '</li>',
			'before_title' => '<h3>',
			'after_title' => '</h3>'
			));

/*******************************************************************************
 * Next We Build the Sidebars - one function per sidebar so we can call them
 * individually
 ******************************************************************************/

function byob_dogs_sidebar() {
    echo "\t\t<div id=\"sidebars\">
";
    thesis_hook_before_sidebars(); #hook
        ?>
        <div id="context-sidebar" class="sidebar">
            <?php thesis_hook_before_sidebar_1(); ?>
            <ul class="sidebar_list">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Dogs Sidebar') ) { ?>
                    <li class="widget">
                        <div class="widget_box">
                            <h3><?php _e('Dogs', 'thesis'); ?></h3>
                            <p>This is your new sidebar.  Add widgets here from your WP Dashboard just like normal.</p>
                        </div>
                    </li>
                <?php } ?>
            </ul>
            <?php thesis_hook_after_sidebar_1(); ?>
        </div>
        <?php
   thesis_hook_after_sidebars(); #hook
   echo "\t\t</div>
";
 }

 function byob_cats_sidebar() {
    echo "\t\t<div id=\"sidebars\">
";
    thesis_hook_before_sidebars(); #hook
        ?>
        <div id="context-sidebar" class="sidebar">
            <?php thesis_hook_before_sidebar_1(); ?>
            <ul class="sidebar_list">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Cats Sidebar') ) { ?>
                    <li class="widget">
                        <div class="widget_box">
                            <h3><?php _e('Cats', 'thesis'); ?></h3>
                            <p>This is your new sidebar.  Add widgets here from your WP Dashboard just like normal.</p>
                        </div>
                    </li>
                <?php } ?>
            </ul>
            <?php thesis_hook_after_sidebar_1(); ?>
        </div>
        <?php
   thesis_hook_after_sidebars(); #hook
   echo "\t\t</div>
";
 }

 function byob_birds_sidebar() {
    echo "\t\t<div id=\"sidebars\">
";
    thesis_hook_before_sidebars(); #hook
        ?>
        <div id="context-sidebar" class="sidebar">
            <?php thesis_hook_before_sidebar_1(); ?>
            <ul class="sidebar_list">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Birds Sidebar') ) { ?>
                    <li class="widget">
                        <div class="widget_box">
                            <h3><?php _e('Birds', 'thesis'); ?></h3>
                            <p>This is your new sidebar.  Add widgets here from your WP Dashboard just like normal.</p>
                        </div>
                    </li>
                <?php } ?>
            </ul>
            <?php thesis_hook_after_sidebar_1(); ?>
        </div>
        <?php
   thesis_hook_after_sidebars(); #hook
   echo "\t\t</div>
";
 }

 /*******************************************************************************
 * Next We Build the Logic that Selects the Correct Sidebar.  This relies on Verve
  * Meta Boxes plugin for creating the custom post meta and the met box dialog
 ******************************************************************************/

 function byob_choose_sidebar(){
     global $post;
     $post_id = $post->ID;
     $byob_sidebar_type = get_post_meta($post_id, 'sidebar_type', true);

     if ($byob_sidebar_type == "Dogs Sidebar"){
         byob_dogs_sidebar();
     }elseif($byob_sidebar_type == "Cats Sidebar"){
         byob_cats_sidebar();
     }elseif($byob_sidebar_type == "Birds Sidebar"){
         byob_birds_sidebar();
     }else{
         thesis_sidebar_1();
     }
 }

 /*******************************************************************************
 * Next We Build the Custom Template - this template checks for specific pages
  * and applies those custom templates to the specific pages, otherwise it applies
  * the typical custom template
 ******************************************************************************/

 function byob_custom_template_selector(){
     if(is_front_page()){
         custom_3column_template();
     }else{
         thesis_content_column();
         byob_choose_sidebar();
     }
 }
 remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
 add_action('thesis_hook_custom_template', 'byob_custom_template_selector'); 
9 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options

Related Posts

9 comments… add one
  • Cris Catalan January 19, 2011, 8:36 pm

    Awesome. You can’t find it anywhere. Better add to favorites! 🙂

  • Mike D. November 16, 2011, 9:47 pm

    This was a great tutorial, thanks for putting it out there, I couldn’t find anything relevant to what I wanted and came across this. However – not sure it works in Thesis 1.8? I tried your code verbatim and I don’t see the widgets in the widget area. Thanks again for this excellent tutorial.

    • Rick Anderson November 18, 2011, 8:17 am

      The code works fine in 1.8. In fact, this tutorial was written in it. If the sidebars don’t show up in the widgets panel then the register_sidebars function doesn’t exist or isn’t firing.

  • Alan Dexter December 24, 2011, 9:47 am

    Using this I code I have been getting this error and I can no longer edit custom Functions Via thesis. Any Ideas? I’m a relative novice to CSS, so I Dont have the ability to understand what is going on yet. Would love some help. Thanks.
    wp-includes/pluggable.php on line 866

    • Rick Anderson December 25, 2011, 5:40 am

      Alan, you shouldn’t be editing your custom_functions.php file with the custom file editor. It’s easy to create syntax errors when cutting and pasting code. If you use the custom file editor to do that then you can create a situation where your site crashes and you have no means of fixing it.

      I’d suggest you use an FTP client (like Filezilla) to upload a clean copy of your custom_functiions.php file. You could rename the old broken one first if you have code in it that you want to preserve.

      FWIW – the tutorial you are following is quite ambitious for a novice. My recommendation, once you get your site back up, would be to go through my “Customize Thesis Like a Pro” series. That will give you a tool set to work with.

  • Jeff Robb April 28, 2012, 5:47 am

    Verve Meta Boxes seems to be no longer available, is there another option for a plugin that you would recommend?

  • Diane Cox October 20, 2013, 7:05 am

    I just looked for Verve and it’s gone. What should I use as a replacement.

    • Rick Anderson November 1, 2013, 5:44 am

      I like the Types plugin. There are a bunch of videos here on how to use it.

Leave a Comment