How to use widgets with more than one sidebar on your WordPress blog

In continuation of my last post, Enabling sidebar widgets for your WordPress theme, I am now going to show you how you can use these newfound widgets with more than one sidebar on your WordPress blog.

Most blogs have only one sidebar, but some, such as Blog Herald, have two (or more!) After reading my last post, you learned how you can use widgets on your blog’s theme, so now, I will show you how you can use widgets on two or more sidebars. This post assumes that you’ve either read my last post, or you already know how to widgetize a theme but would like to know how to widgetize more than one sidebar.

I’m also going to show you how you can customize your sidebars by choosing how you want each widget to be formatted on a per-sidebar basis, and I’ll also show you how you can name your sidebars to more easily identify each one.

This tutorial will focus on using widgets on two sidebars, but the steps can be easily reproduced to adapt to more than two sidebars.

First of all, if you don’t have a file named functions.php in your WordPress theme’s folder, then create one. The contents should be similar to the following:

<?php

if (function_exists('register_sidebar'))
{
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
'name' => 'Left sidebar'
));

register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
'name' => 'Right sidebar'
));
}

?>

Be sure to change the value of ‘name’ to whatever you want; right now, the first sidebar’s name is set to ‘Left sidebar’ and the second sidebar’s name is set to ‘Right sidebar’. These are pretty logical names, but you may want to rename them to something that is more meaningful for yourself. You can also copy and paste each ‘register_sidebar’ function several times to create more sidebars; be sure to make the ‘name’ value for each sidebar unique from the others, or conflicts will occur!

The other arguments that you see in the code above are pretty self-explanatory; you can place HTML code in the 4 other arguments besides ‘name’. The HTML that you place in ‘before_widget’ goes before the widget; ‘after_widget’ goes after the widget; ‘before_title’ goes before the widget’s title within the widget; and ‘after_title’ goes after the widget’s title.

The first four are documented by Automattic already, but strangely enough, ‘name’ is not; I would consider this one the most important one, too.

Once you have created your functions.php file, it’s time we widgetize your theme. Now, this time it’s a bit different because we’ll be adding more than one widgetized sidebar to your theme. I’m going to assume that you already have at least two sidebars, but that they aren’t widgetized yet.

Just like in my previous tutorial, you’ll have to open up your sidebar.php file in your /wp-content/themes/<style name> directory.

Secondly, look for the very first <ul (yes, it’s purposely missing the closing >). This may look like <ul>, or <ul id=”sidebar”>, or something similar. Immediately after this line of code, place

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Left sidebar') ) : ?>

Replace ‘Left sidebar’ with your actual sidebar’s name that you’d like to go here. It should end up looking something like this:

<ul id="sidebar"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Left sidebar') ) : ?>

Then, find </ul> and immediately before that, place

<?php endif; ?>

Do this for every sidebar that you have; so you’d have another line like so:

<ul id="sidebar"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Right sidebar') ) : ?>

And we’re all done! Easy, isn’t it?

Gary King is a professional freelance web developer, primarily using Ruby on Rails and PHP to create cool new websites. When he’s not trying to take over the world one blog at a time, you can find him mulling over his thoughts at King Gary.