November 27th, 2007

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.



If you like this post, then please subscribe to my full text RSS feed. You can also subscribe by email and have new posts sent to your inbox.

Read more
How to Widget-Enable Wordpress Themes in 3 Easy Steps
Top Posts of November 2007
Install WordPress Widgets Plugin by Automattic
Create Firefoxit Firefox Widgets
Google Mac Dashboard Widgets

Comments

RSS feed for comments on this post.
  • 1. Hannit | 28/11/07  #

    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.

  • 2. David Stembridge | 5/12/07  #

    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!

  • 3. David Stembridge | 5/12/07  #

    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!

  • 4. QuickOnlineTips | 5/12/07  #

    David - it is indeed a h2 vs h4 issue. Customize it as per your own site CSS.

  • 5. Rafael Dourado | 10/01/08  #

    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.

  • 6. Jason Kelley | 21/02/08  #

    I added 7 new sidebars to functions.php file within my current theme but do not see any additional sidebars in the wordpress admin. Any thoughts…

  • 7. QuickOnlineTips | 21/02/08  #

    Check under the widgets tab. Remember to name them differently.

  • 8. David Glendinning | 27/03/08  #

    Have added an additional sidebar called sidebar2 to the functions.php file and can see it OK in the widgets admin. However I am having a problem getting the new sidebar to execute. What is the correct format for to get ’sidebar2′ to execute in the template.

  • 9. Sounds Good | 3/04/08  #

    Thank you!! Simply, clean, great post!

  • 10. Rajeef | 6/04/08  #

    Can you explain one thing — how do you make your page call your new sidebars? I mean, I would like to call my second sidebar as the “right column”.

    Do I have to edit my template pages?

    Thanks!

    Raj

  • 11. QuickOnlineTips | 6/04/08  #

    The dynamic sidebar template codes have to be inserted into the sidebar.php in your blog template. Otherwise how will it know where the code has to be executed. :-)

Articles Linking Here (Trackback url)


Comment on “How to Create Multiple Dynamic Sidebars for Wordpress Widgets”


Your Ad Here
Large ads starting at $75!

Recent Posts

arrow Popular Articles