Tutorial: Adding a second dynamic (widget) sidebar in WordPress

I was looking around in the WordPress support forums the other day and the question of how to add a second dynamic sidebar came up.

This is probably quite a common question, and it’s definitely one of the few things that I looked for when dynamic sidebars were introduced in WordPress. I’ve decided take the reply which I gave and make it into a tutorial.

There should be quite a number of tutorials or solutions out there already, but let me just add a step-by-step tutorial to the fold as well….

So Let’s Go:

1. First up, open the function.php in your theme folder.
   • If the file doesn’t exist, skip to step 3.
2. Find the line that says:
   

   if ( function_exists('register_sidebar') ) {
   	register_sidebar(array(
   		'before_widget' => '<li id="%1$s">',
   		'after_widget' => '</li>',
   		'before_title' => '<h2>',
   		'after_title' => '</h2>',
   	));

   
   and replace it with the code from step 3.
3. Create a function.php file and add the following codes to the file:

   if ( function_exists('register_sidebar') ) {
      register_sidebar(array('name'=>'primary_sidebar',
          'before_widget' => '<li id="%1$s">',
          'after_widget' => '</li>',
          'before_title' => '<h2>',
          'after_title' => '</h2>',
      ));
   
      register_sidebar(array('name'=>'secondary_sidebar',
          'before_widget' => '<li id="%1$s">',
          'after_widget' => '</li>',
          'before_title' => '<h2>',
          'after_title' => '</h2>',
      ));
   
   };

   
   Note the part of the array that says: 'name'=>'primary_sidebar'. It defines a name for the dynamic sidebar instance which you can call later.
4. After you’re done, find your current sidebar code, usually located in your sidebar.php and replace the following line:

   if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() : ?>

   
   with
   

   if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('primary_sidebar') ) : ?>

5. To show the second sidebar, go to the part of your code where you want and add the following:

   <ul>
      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('secondary_sidebar') ) : else : ?>
      <?php endif; ?>
   </ul>

6. That’s all!. Now it’s left to styling your new sidebar!

Having more than two sidebars:

In the event you need to define more dynamic sidebars, just add a new register_sidebar array, and make a call in the template to the name of the new sidebar array.

Note

One thing to note: the default WordPress kubrick and the above code outputs your widgets in a list. To change that, modify the before_widget and after_widget variables and remove the <ul> and </ul> enclosing the function call..

Another thing to note is that the function calls to the sideabrs should not be nested within each other.