Updating Your WordPress Theme to Use More Than One Sidebar

Since I started working on my own themes, I’ve learnt a lot about how WordPress works. I’m still not at the level where I can write a theme from scratch, but I’m learning to modify themes for my own use. My first themes were based on either Public Domain or GPL themes, and I mainly stuck to modifying the CSS stylesheet.

My latest theme now uses five different sidebars to display information. There are four on the homepage (home.php) and one on the single post page (single.php). Most themes that I’ve come across implement one sidebar, or at most two. So how do you add more sidebars?

The first step is to edit your themes function.php file. Search the file for the following code:

if ( function_exists('register_sidebar') )

Some themes might also use the following code instead:

if ( !function_exists('register_sidebars') )

Within this section you’ll need to locate the code that tells WordPress how many sidebars you are using. Themes using a single sidebar will generally use this WordPress API function:

register_sidebar();

Themes using more than one sidebar, will use the following API function:

register_sidebars();

Both API functions take an array as a parameter. This array specifies the HTML code that appears before and after each widget that will appear in the sidebar. register_sidebars(); takes an additional parameter that allows you to specify how many sidebars should be used.

In either case, you’ll need to change this code to the following:

register_sidebars(x, array);

Replace x with the number of sidebars that you want in your theme. The array part of the code can be left as is.

The next step is to add the actual sidebars to the theme files that you want to contain the new sidebars. (Usually these would be either index.php, home.php, single.php, orarchives.php.)

Add the following code to the appropriate theme file:

<div class="sidebar_css_class"><ul class="sidebar_list_class"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(x) ) : ?><?php endif; ?></ul></div>

The class names used in this code example can be anything that you want, and will have to be added to your theme’s style.css file. Replace x with the specific number of the sidebar that you want to insert, e.g., if you want to insert a second sidebar into the theme, then your code will look like this:

<div class="sidebar_css_class"><ul class="sidebar_list_class"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?><?php endif; ?></ul></div>

Upload the files to your theme directory, overwriting the original files if prompted. (To be extra safe, you should already have backed up the original files.) To configure the new sidebar, go to the Widgets sub-page under the Design page in your WordPress Admin and select your sidebar from the drop-down list.

Footnote: register_sidebar(); does allow more than one sidebar to be specified. It’s used in cases where each sidebar needs a different name and allows the theme designer to specify different layouts/ appearances for each sidebar. More information can be found on the relevant WordPress codex pages: register_sidebar(); and register_sidebars();.