Geek Out! - WordPress tips, XHTML/CSS illumination, and adventures in jQuery

Multiple Widget Locations

Did you know you can register multiple Widget locations in WordPress (self hosted blogs of course)? Well, you can. All you have to do is go to your functions.php file (default usage in /wp-content/themes/default/functions.php), where you’ll see something that looks like this:

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

By adding a line to the array, you can name the sidebar, and duplicate them, like so:

register_sidebar(array(
 'name' => 'Sidebar_1',
 'before_widget' => '<li id="%1$s">',
 'after_widget' => '</li>',
 'before_title' => '<h2>',
 'after_title' => '</h2>',
 ));
 register_sidebar(array(
 'name' => 'Footer',
 'before_widget' => '<li id="%1$s">',
 'after_widget' => '</li>',
 'before_title' => '<h2>',
 'after_title' => '</h2>',
 ));

Note that you can change the formatting of your sidebar widgets here as well. For example, if you wanted to use divs instead of lis, you could change that here.

Whatever you name the sidebar here, for example: ‘Sidebar_1′ or ‘Footer’ will appear under Widgets in your WordPress dashboard.

Now that you’ve done that, you just need to specify which sidebar goes where by pulling in the dynamic sidebar, for example, in your footer. The code looks like this:

<?php     /* Widgetized sidebar */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) : ?>

<?php endif; ?>

This code will pull in any widgets that are placed in the “Footer” widget slot in your WordPress backend. You’ll probably want to make another for the “Sidebar_1″. Before the <?php endif; ?> you place any placeholder content in case there are no active widgets.

You might specify that the Footer widgets need to be wrapped in divs instead. In which case your code would look like this:

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

And that’s basically it. If I left something out, let me know.

Like this post? Let me know in the comments, and I’ll post more WordPress trickery.