Tammy Hart Designs

Multiple Widget “Sidebars” in WordPress Themes

Most WordPress users love the ability to customize their front end functionality with easy to use widgets. All you do is drag and drop, make a few minor customizations if you want to, and bingo bango, customization in a flash! But something that recently stumped me was.. how can I make more than one sidebar in the theme and keep them all widgetized so that the client can then customize everything to his liking and any future changes he might want to make. So I started searching around and I found very little information about it. I figured I wasn’t the only developer in need of learning how, so here I am, and here is the best I can make of it. If anyone can add to it, just let me know.

In my project, I wanted widget capability in my sidebar, and in my super footer. I already had my >functions.php code ready for one sidebar. I found one site that gave me peices of what I needed to know, but didn’t explain it well enough for me. So I figured it out through good ol’ trial and error.

Here is what my new Sidebar functions look like in functions.php:

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

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

As you can see, it registers two sidebars, one called “sidebar”, and one called “footer”. You can repeat these sections for as many sidebars you need and name them whatever you want to name them. But how do you tell which sidebar to be which in the template files?
Here is what the default widget code looks like:

<? if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : endif; ?>

Here is what it looks like with the name in it:

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

Of course, you should include your <?php endif; ?>where you need it to be.

Another quick note about custom sidebars

Sometimes there are elements that you want to stay in your sidebar, and not be canceled out by widgets. Simply place your widget code above or below these concrete elements, and don’t wrap it with the <?php endif; ?>.

5 Responses to “Multiple Widget “Sidebars” in WordPress Themes”

  1. CMS Web Design  

    Very handy script! Thanks for posting

  2. Ryan  

    Excellent tutorial. I surfed through a lot of shonky tutorials via Google until I stumbled across yours which is considerably better than the other ones I read. Thanks heaps :)

  3. tammyhart  

    No problem! Glad I could help.

  4. Laura  

    Exactly what I was looking for, and very clearly explained. Thanks.

    One thing – when you copy and paste your code from this page, the line numbers are included!

  5. tammyhart  

    you can use the view plain or copy to clipboard links to copy it without the numbers.

Leave a Reply