Displaying Multiple Dynamic Widgetized Sidebars in WordPress

WordCamp NYC 2009

DOWNLOAD: dynamic_sidebars.zip

I was over at Word Camp NYC this past weekend and it inspired me to post this little code snippet about how to display “Multiple Dynamic Widgetized Sidebars” in WordPress. I wasn’t able to find a solution like this before I encountered this problem, so I think it might come in handy for some developers out there.

The Problem: A site requires different sidebars on certain pages, but the rest of the site uses a default sidebar.

The Solution: Mutiple Dynamic Widgetized Sidebars! What are those you ask? Well, most WordPress themes these days can handle sidebars with widgets, typically the relevant code in sidebar.php and functions.php looks something like this:

<?php
//functions.php

if ( function_exists('register_sidebar') )
	register_sidebar(array(
		'before_widget' => '<h2 class="widgettitle">',
		'after_widget' => '</h2>',
		'before_title' => '',
		'after_title' => '',
	));

?>

<?php 	
//sidebar.php

  if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
	Your static sidebar code goes here.
<?php endif; ?>

Now this code works fine if you are using one global sidebar, the problem is, how do you account for a situation that requires a number of distinct pages with unique sidebars? Well, one way you could do it is by creating conditional statements based on the page ID, but that is a rather unfriendly of doing things since it requires adding a new conditional each time you add a new page with a different sidebar. Plus, when you are using page ID’s to control your sidebar display, you run the risk of accidentally deleting pages and then breaking your code. Finally, when you do things this way, there is no easy way for a novice WordPress user or even non-developer to easily specify which sidebar goes where on the live site. In answer to all those dilemmas and more, I’ve proposed the following solution which involves a little recoding of the functions.php and sidebar.php files.

First off, we’re going to rewrite the functions.php file and register all the different sidebars for the site at once (in this case, I’m dealing with a total of 3). When naming your sidebars, you can call them anything you like, but to make life easier, you might want the names to reflect the types of pages the sidebars are going on, in this case I’m going with “sidebar_default”, “sidebar_profile”, and “sidebar_details”.

<?php
//functions.php

if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar_default',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar_profile',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar_details',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

?>

Up until now, we’ve used more or less the same code one would use to register and display multiple sidebars globally across a site, but the trick for displaying them dynamically comes in the rewrite of sidebar.php. In order to show a default sidebar across the site I created a variable called $sidebar_value which is based on the value of the metadata key arbitrarily named “sidebar”. If the value of $sidebar_value is an empty string, (which is what it will be if you have not defined the metdata key for a particular page), $sidebar_value is set to “sidebar_default”, which is the name of my default sidebar in functions.php. Now here comes the good part, if the metadata key called “sidebar” is defined a particular page, then the $sidebar_value variable is set to whatever value you have specified. So, in this case when I am on the “Profile” page I set the “sidebar” metadata key equal to “sidebar_profile” and likewise, when I am on the “Details” page I set the “sidebar” metadata key equal to “sidebar_details” (See Figure 1). In order to achieve this functionality, I just added the $sidebar_value variable to the dynamic_sidebar() function as an argument.

Figure 1. Add A Custom Field (Metadata Key/Value Pair)
Add Sidebar Metadata

Here’s what the new sidebar.php code looks like:

<div id="sidebar">
        <?php 	
        //sidebar.php
        
	//get your sidebar value from the metadata
	$sidebar_value = 
        strtolower(trim(get_post_meta($post->ID, 'sidebar', single)));
	
	if($sidebar_value == '') {
	/*if the sidebar metadata is not set, set 
	default the sidebar value to 'sidebar_default'*/
		$sidebar_value = 'sidebar_default';
	}
	
	//if sidebar metadata value is x then show sidebar x
	if ( !function_exists('dynamic_sidebar') || 
                        !dynamic_sidebar($sidebar_value)) :  
	?>
	<div class="sidebar">
		<h2>This is the default static sidebar title</h2>
		<p>Your default static sidebar content goes here. 
		You will most likely never see this though.</p>
	</div>
	<?php	
		endif;
	?>
			
</div>

Once you add in this code to your theme and you set your metadata key values (ie. custom field values) correctly, you will easily be able to dynamically display distinct sidebars on specific pages of your WordPress site. If you’re not so familiar with adding custom fields, you could always use the Custom Field Template Plugin by Hiroaki Miyashita to display a list of “friendly named” sidebars to choose from.

One Comment

  1. Chris Evans says:

    I am going to be implementing the above sidebar code to allow for certain sidebars on certain pages but what if I want several sidebars on the same page? Basically right underneath each other. That way if one side bar is contact info they can just call several sidebars including that so they don’t have to right the same info on each contact page.

Comments are closed.