WordPress Tip: Different Sidebars on Different Pages

I recently had an inquiry here on the RVoodoo blog.  Someone asking how to set up different sidebars on different pages.  You may notice that some pages have no sidebars, some pages have the normal sidebar, and our shop pages have a shop related sidebar.  Well, how did we do that?  It’s quite simple really, here’s how it’s done.

First, the general setup.  Functions.php is where your sidebars are set up.  So we are going to go in there, and register some more sidebars.  Then we will make files corresponding to these sidebars.  You don’t really need to do this part if you don’t want to, you can call the widget areas in your template directly.  I prefer to just make sidebars and include them in my templates, so I’ll explain how to do it that way.  Now don’t get hung up on the term “sidebars”.  Sidebars are just widget areas, they can be used as sidebars, but they can be used to put widgets anywhere really.  For instance, the photo bar on the top of my index page here is a sidebar area.  After we register the sidebars, and make the files, we will include them where we need them.  Either with templates, or with conditionals.

So, lets start off with registering some more sidebars.  It’s a good idea to plan out what you need.  How many more sidebars?  You don’t need to finalize your plans right now though.  Once you know how to add a sidebar, you can add as many as you want.  So head over to your functions.php file and look for code that looks like this:


add_action( 'widgets_init', 'my_register_sidebars' );

function my_register_sidebars() {

	register_sidebar(array(
		'id' => 'primary',
		'name' => __('Main Sidebar'),
		'description' => __('Sidebar used on most pages'),
		'before_widget' => '<li class="widget %2$s" id="%1$s">'. "\n\t\t\t" .'<div class="rounded">'. "\n\t\t\t\t",
		'after_widget' => "\t" . '</div>' ."\n\t\t". '</li>' . "\n",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>' . "\n\t"
	));
}

That’s my main sidebar.  Your code may look a bit different, and that’s fine.  It doesn’t have to look exactly like mine.  The important part is to recognize your sidebar code. To make more sidebars, we are just going to copy some of the existing code and repeat it. To see what the various parts of that code are doing, just read up on registering sidebars in the codex. Now, lets add in 2 more sidebars. Just copy the register_sidebars block of code and repeat it. If your sidebars are registered in a function, make sure you keep the register_sidebars inside the function (before the }). If not, I recommend looking at how it’s done in my code, and consider setting yours up like that. Now, here’s the block of code with 2 new sidebars added:


add_action( 'widgets_init', 'my_register_sidebars' );

function my_register_sidebars() {

	register_sidebar(array(
		'id' => 'primary',
		'name' => __('Main Sidebar'),
		'description' => __('Sidebar used on most pages'),
		'before_widget' => '<li class="widget %2$s" id="%1$s">'. "\n\t\t\t" .'<div class="rounded">'. "\n\t\t\t\t",
		'after_widget' => "\t" . '</div>' ."\n\t\t". '</li>' . "\n",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>' . "\n\t"
	));
	register_sidebar(array(
		'id' => 'topwidget',
		'name' => __('Top Widget'),
		'description' => __('Widget area between nav bar and content on index page'),
		'before_widget' => '<li class="top-widget %2$s" id="%1$s">'. "\n\t\t\t" .'<div class="rounded">' . "\n\t\t\t\t",
		'after_widget' => "\t" . '</div>' ."\n\t\t". '</li>' . "\n",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>' . "\n\t"
	));
	register_sidebar(array(
		'id' => 'shop',
		'name' => __('Shop Sidebar'),
		'description' => __('Sidebar for shop custom post type'),
		'before_widget' => '<li class="widget %2$s" id="%1$s">'. "\n\t\t\t" .'<div class="rounded">'. "\n\t\t\t\t",
		'after_widget' => "\t" . '</div>' ."\n\t\t". '</li>' . "\n",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>' . "\n\t"
	));
}

You’ll notice now that in addition to the primary sidebar, we’ve added shop and topwidget. You can call these whatever you want. Just use names you can remember, as these names will be used to call your new sidebars. So now we have 3 sidebars registered. If you were to visit the widgets admin menu of your site, all 3 would show up. You could add widgets, etc. But nothing will actually display anywhere. That’s because you haven’t called the sidebars anywhere yet. That’s the next step. Let’s set up those files.
The files are simple really. Just create them, and name them appropriately. The name isn’t too important, I just use descriptive names so I can call them easily. The important part is to call them sidebar-something.php. That naming convention allows us to call them later. For our example, we will set up a file called sidebar-top.php. Now, you can code the sidebars however you want. You can hard code stuff into the sidebar, etc. But if you want widgets, the important part is:


<?php dynamic_sidebar( 'topwidget' ); ?>

That brings in the widget area topwidget, which we set up in functions.php earlier. I like to give a default, so I set my sidebar-top.php file up like this:


	<div id="top-widget">

		<ul>
			<!--Open Top Widget UL-->
			<?php if ( is_active_sidebar( 'topwidget' ) ) : ?>
				<?php dynamic_sidebar( 'topwidget' ); ?>
			<?php else : ?>
			<li class="top-widget" id="Pages">
				<div class="rounded">
					<h3 class="widget-title">Pages</h3>
					<ul>
						<?php wp_list_pages('title_li='); ?>
					</ul>
				</div>
			</li>
			<?php endif; ?>
		</ul>

	</div>

Which basically says if the topwidget sidebar is registered, and if there are any widgets set up, display them. Otherwise, display a list of pages. You can do whatever you want here, you can have a combination of widgets and hardcoded stuff if you like, etc. So now, we have the sidebars registered in functions.php and we have the files set up, the last thing to do is to call them.
First, here is how we call a sidebar. You probably already have the line:


<?php get_sidebar(); ?>

in your index.php and elsewhere. That calls sidebar.php, your primary sidebar. To call our example sidebar sidebar-top.php the line of code would look like this:


<?php get_sidebar('top'); ?>

That’s it. So to put it all together, in functions.php we registered some new sidebars. One of them was topwidget. We made a file called sidebar-top.php which included the dynamic topwidget sidebar. And now we are able to call those widgets by calling in the top sidebar. Simple right?
How do we use this? How do we place the sidebars on different pages? Well, there are 2 simple methods. One way is with page templates. For instance I have a shop set up, which I want to use different sidebars for. So I made a page template. To create the template, I simply made a copy of index.php and renamed it shop.php. I then added this header to the top.


<?php
/*
Template Name: eShop Template
*/
?>

I also included come custom queries, etc to call in the proper posts. Then I made a page called Shop, and assigned it that page template. Then I edited the code for shop.php and swapped out the call to get_sidebar from the default sidebar to the shop sidebar. That’s one way to do it. But what if you want to change up your sidebar based on page IDs. For example, on your page view, you want page ID 11 and 21 to each have their own sidebar, and everything else to have the default. Well, in page.php you would use a conditional like this:


<?php if( is_page('11') ) : ?>
<?php get_sidebar('customsidebar'); ?>
<?php elseif( is_page('21') ) : ?>
<?php get_sidebar('anothersidebar'); ?>
<?php else : ?>
<?php get_sidebar(); ?>
<?php endif; ?>

And I think that covers it. You can use all sorts of conditionals to display sidebars. In single.php, page.php, index.php, etc. Stuff for custom post types, categories, etc. So play around and enjoy.
I hope I didn’t confuse anyone…I tend to type as I think and maybe float around alittle, but the info is all here. If you have any questions, as always, send ‘em my way and I’ll see if I can help!

css.php
%d bloggers like this: