Widgetise Your Theme Part II

Last week I wrote about how to widgetise your theme, and explained how to turn your sidebar into a dynamic sidebar, allowing you to add widgets from within your admin panel, rather than manually coding them into the sidebar. We can now take this one step further and create multiple sidebars/widget ‘blocks’. These don’t have to always be a full length sidebar, they could be two or three sections in the footer of your site, or perhaps you want a left and right sidebar, or two next to each other. Once they’re set up however, all you need to do is add the widgets you require to each section. You could even create two different types depending on which section of the site you’re on, using conditionals

So last week we used the basic code in our functions file of:

if (function_exists('register_sidebar')) {
    register_sidebar(array(
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}

To create multiple sidebars we first need to add the name key into our array to allow us to distinguish between the different registered sidebars. This is a fairly simple change e.g.

if (function_exists('register_sidebar')) {
    register_sidebar(array(
        'name' => 'Right Sidebar',
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}

Multiple Sidebars

To then create a second sidebar you just use a different name for each. You can also change the before and after keys too eg.

if (function_exists('register_sidebar')) {
    register_sidebar(array(
        'name' => 'Right Sidebar',
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
    register_sidebar(array(
        'name' => 'Footer',
        'before_widget' => '<div class="footer_widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}

When you then want to call a sidebar you need to alter the code in your theme file to include the sidebar name as a parameter of the function dynamic_sidebar() eg.

if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer')) :
    // enter HTML code here for items such as recent comments, recent posts etc.
endif;

We use the register_sidebar() function if we want to give very different names to each sidebar and/or change the before and after code. However, there is also the register_sidebars() function, which can reduce code, providing certain elements are to remain the same. To use the register_sidebars() function we tell the function how many sidebars to register eg.

if (function_exists('register_sidebars')) {
    register_sidebars(2, array('name' => 'Sidebar %d'));
}

This would create two sidebars with the names Sidebar 1 and Sidebar 2. This is an okay solution if you only intend to have maybe a couple of sidebars and you know which one goes where, however for ease of use I would recommend the first method and assign more precise names. Plus if you intend to give your theme away or sell it, then whilst you may know which sidebar is which, the user may not!

Adding Widgets

Now when you go to your Widgets section under Appearance, in the admin, you’ll have a drop down to select which sidebar to add the widget to. This allows you to set up each dynamic sidebar easily.

Written by Sarah from Stuff By Sarah
Posted on May 14th, 2009 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

Comments Off