Quick Online Tips
About     Contact
Blogging       Tutorials       Google       SEO       Facebook       Twitter       Apple       Computers       Security       Videos       Downloads

How to Create Multiple Dynamic Sidebars for WordPress Widgets

In the last tutorial, you learnt how to widgetize your wordpress theme to support wordpress widgets. Now this tutorial explains how to create multiple dynamic sidebars to add various combinations of widgets to customize your wordpress theme even more.

I suggest you read how to Widget-Enable WordPress Themes in 3 Easy Steps before reading further as examples will be quoted in the same context.

Edit Functions.php for Multiple Dynamic Sidebars

The functions.php code which helped to widgetize your wordpress theme and support a single dynamic sidebar, now needs to be edited (using any text editor like Notepad) to support multiple sidebars. You remember we had modified the default function.php from

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

to the new code below to support our customized template with h4 subtitles and non-default unordered lists in the sidebar. REMEMBER you need to edit functions.php to match your wordpress theme or it will not work.

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
?>

To support multiple sidebars, I simply need to specify that multiple sidebars be used and name them as I like. In our case I use Sidebar1, Sidebar2 etc and as many as you like. The code now looks like this -

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
register_sidebar(array('name'=>'sidebar2',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
?>

I personally have extended this capacity to 6 dynamic sidebars on this blog. Here is how it looks like on top of admin panel.

4 Dynamic Widget Sidebars
Now you can drag and drop widgets of your choice to different sidebars and customize the options. Remember to Save Changes or else all customization is lost.

Add Dynamic Sidebars to WordPress Template

Now you need to place the code in the wordpress theme template where you want the relevant wordpress widgets to work. Instead of the previous code, you can place the different dynamic sidebars in different areas of the template.

Sidebar1 code goes like this
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>

Sidebar2 code goes like this
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('sidebar2') ) : ?>
<?php endif; ?>

Save the template and watch your widgets go live. You can add lots of dynamic sidebars with various widget combinations and have truly unique web design concept.



67 Responses

  1. Very clear article.

    In order to make this really usable I’d add the following plugin: http://www.lancelhoff.com/2007/08/29/wordpress-duplicate-sidebar-widgets/

    This plugin lets you duplicate existing widgets so you can use more then one instance of them. Can be very useful in case you want to have some common functionality on the sidebars.

    Hannit posted on 28/11/2007
  2. On my template, the call for sidebar is:

    I registered a new sidebar successfully; but when I add the call for new sidebar as you suggested…

    I get a oddly formated page.
    I am adding the code to a very slightly modified page template. Any ideas, or clues?
    Thanks!

    David Stembridge posted on 05/12/2007
  3. OK… I modified the base page, rather than a tweaked page, and that works. The formating seems a little off though, from the main page I’m working on:
    http://www.fbcwaynesboro.org/wp
    I have been tweaking on a second WP install here:
    http://www.fbcwaynesboro.org/wp2
    Going back and forth, the heading for the new sidebars doesn’t look the same. Is that because I’m using the h4 subtitles? Why are you suggesting the header change?
    Thanks again!

    David Stembridge posted on 05/12/2007
  4. David – it is indeed a h2 vs h4 issue. Customize it as per your own site CSS.

    QuickOnlineTips posted on 05/12/2007
  5. Nice article! Just to complement what you said… The function dynamic_sidebar accept numbers too, like 1 for the first sidebar and 2 for the second. I prefer using numbers, because sometimes I change the sidebar name for some users understand it.

    Rafael Dourado posted on 10/01/2008
Twitter   Twitter     RSS Feed readers
Advertisements

Advertise here