Posted in Tutorials, WordPress by
Anthony Hortin

I’ve found that the term “sidebar” within WordPress can have multiple meanings. Within your index.php file you will most likely find a call to the php function get_sidebar(). This is referring to the sidebar column, sometimes called the right-hand (or left-hand) navigation column. A sidebar also refers to the location where you add all your Widgets. The Widgets control the content that appears within the sidebar (column) and will usually display lists such as your Recent Posts, Categories, Links or dozens of other items.

Since WordPress is so configurable, it’s possible to have multiple sidebar columns defined such as when you have multiple page templates set up. For example, you may have a specific page template defined for your sites static homepage. As well as defining the body content for that page, you can also define a separate sidebar in case you would like it to appear differently from the rest of the site.

It’s also possible to register multiple sidebars that contain all the widgets. This latter sidebar is what we’ll be discussing here. A typical WordPress theme may only have one sidebar configured although it’s not uncommon to have 2 or 3 or even more. Even though it’s called a “sidebar” it doesn’t need to specifically reside in the sidebar of your website. You can add a “sidebar” to anywhere in your site you want to display your widgets. A common place to include them is the site footer.

Defining your new sidebar

Adding additional sidebars to your site is relatively easy. Within your functions.php file you will most likely have something similar to the code below, for your existing sidebar.

<?php

if ( function_exists('register_sidebar') ) {

   register_sidebar(array(
   'before_widget' => '<li id="%1$s" class="widget %2$s">',
   'after_widget' => '</li>',
   'before_title' => '<h2 class="widgettitle">',
   'after_title' => '</h2>'
   ));

}?>

To add another sidebar you simply need to register another instance. If you are registering more than one, then you will also need to name them. Change your functions.php file to look like the following. Take care to add in the extra line that specifies the name of your sidebar. Once these are functions are defined, you will notice the extra sidebar appear in the WordPress Dashboard under the Appearance > Widgets option. It’s here that you can drag and drop all your widgets into your various sidebars.

<?php

if ( function_exists('register_sidebar') ) {

   register_sidebar(array(
   'name' => 'sidebar 1',
   'before_widget' => '<div id="%1$s" class="widget %2$s">',
   'after_widget' => '</div>',
   'before_title' => '<h2>',
   'after_title' => '</h2>'
    ));

   register_sidebar(array(
   'name' => 'footer sidebar 1',
   'before_widget' => '<div id="%1$s" class="widget %2$s">',
   'after_widget' => '</div>',
   'before_title' => '<h2>',
   'after_title' => '</h2>'
   ));

}?>

You can find more details on the various parameters of the above call on the WordPress Codex.

Adding your new sidebar to your template

Within your sidebar.php file, change the call to your existing sidebar to include its name that you defined within the functions.php file earlier.

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

   <h2>Articles by month</h2>
   <ul>
      <?php wp_get_archives('title_li=&type=monthly'); ?>
   </ul>
   <h2>Categories</h2>
   <ul>
      <?php wp_list_categories('show_count=0&title_li='); ?>
   </ul>

<?php endif; ?>

To add your new sidebar, you can either copy the above code or you can simply copy the following lines. Add these lines to wherever you’d like your new widgets to appear. In this example you can see from the name that I’m placing mine in the footer of my website. As before, don’t forget to specify the correct sidebar name. In the above code, the html that appears between the php statements is what will appear when there are no widgets added to your sidebar. This ‘default’ code can obviously be modified to suit your theme. In the following code, since there is no extra html, nothing will be displayed unless a widget has been added into the sidebar within your WordPress dashboard.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer sidebar 1') ) : ?>
<?php endif; ?>

You will now find that your site has two widgetized sidebars. As mentioned earlier, there’s no reason why you couldn’t include further ones. It’s simply a matter of registering the new sidebar and then including the php to display it, in the relevant part of your site template.

I’ve also published this tutorial on Twitter Study Group. It’s a great place to learn, so check it out.

Thinking of adding more widgets to your WordPress site? Leave a comment and let me know if you found this useful. Thanks 🙂

8 responses on “How To Add Multiple Widget Sidebars To Your WordPress Blog

  1. Dori

    Great tutorial…only one question. I’m fairly new at this- what if I want an extra sidebar only on 1 page? How would I code that?

    1. Anthony Hortin

      Hi Dori,
      If you want one page to be slightly different to all the rest, such as by only having the one Sidebar, you’d need to create a separate Page Template for that page. When you add/edit that page within your dashboard, you would then tell it to use your new template.

      If you look at my site, you’ll see that my homepage has different content in my RH column than my blog pages. Even my other site pages have different content to my blog. This was achieved by creating a number of different page templates and assigning them appropriately.

      Checkout http://codex.wordpress.org/Pages on the WordPress site to find out some more info on Page Templates.

      Hope this helps and thanks for the comment 🙂

  2. Nicole

    This is a great tutorial, but everytime I edit my theme functions file I end up with an error message. I have double-checked it against what you put up above and can’t seem to resolve it.

    1. Anthony Hortin

      Thanks Nicole. I checked out your site and noticed the error. One thing you might want to double check is that you have semicolons (;) on the end of all your PHP statements. Also make sure that you haven’t left off any closing braces. Let me know how you go. Feel free to send me a msg on Twitter as well 🙂

    1. Anthony Hortin

      Hi Anna. Depending on the theme you are using, you can most likely just change the widgets that are being displayed, using the “Widgets” menu option with your WordPress dashboard. If that doesn’t do what you want, then you may need to edit your sidebar.php file within your theme.

  3. copacetic

    THANK YOU! This was exactly what I was looking for – I wanted my sidebar to divided into div class sections with a nice rounded corner on each little box, and each box would contain different widgets. Your code worked perfectly for what I wanted – keep up the good work!