How to Create Multiple Dynamic Sidebars for WordPress Widgets

By Posted 2007 Updated   BloggingTutorialsWordPress

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.


77 comments on “How to Create Multiple Dynamic Sidebars for WordPress Widgets

  1. Hannit says:

    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 says:

    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 says:

    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 says:

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

  5. Rafael Dourado says:

    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 says:

    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 says:

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

  8. David Glendinning says:

    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 says:

    Thank you!! Simply, clean, great post!

  10. Rajeef says:

    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 says:

    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. :-)

  12. jbj says:

    Great tutorial, thanks, I was looking for something like this !

  13. sailor says:

    As an amateur PHP programmer struggling to get my own site developed, I found this article to be of great assistance. Without this I would still have been struggling to figure this lot out. Thanks.

  14. Web-Betty says:

    Hi!

    I found this article to be incredibly helpful, however, I’m having trouble with the headers in my second sidebar (which is actually at the very bottom of the page). You can see the “Calendar” but the title does not style with the like it should. The titles in the right sidebar are correct. I’m using for the titles and I’ve confirmed that my functions.php calls for . Can you assist?

    Thanks!

  15. nasirJumani says:

    I have got my dynamic sidebars widgetized in no time. Thanks alot! :)

  16. zacheos says:

    Some people use a hierarchy method in the naming of the template files to achieve multiple WordPress sidebars, but in my opinion it is too cumbersome for most users needs. The method of multiple sidebars for WordPress that I use involves only a very simple PHP snippet added to the template to call the desired sidebar file depending on the area of the site that you are in.

    • crush says:

      Thank you so much! I just have 2 sidebars now. But… I still need the ‘very simple PHP snippet… to call the desired sidebar file depending on the area of the site’.

      I would like to see different sidebars on different pages. Any PHP snippet available?

      • QuickOnlineTips says:

        You can easily different sidebars on pages, single posts, index pages, archives, categories, etc.

  17. Andrew says:

    Many thanks for this article– I went from scratching my head to 10 sidebars in 20 minutes.

  18. lonchbox says:

    Thanx, great post

  19. Buck Wilson says:

    Howdy-

    You should probably put both calls to register_sidebar within your if statement:

    ‘mid_column’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    ));

    register_sidebar(array(
    ‘name’=>’right_column’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    ));
    }
    ?>

    Otherwise the function will bomb if register_sidebar doesn’t exist for any reason. If you’re not worried about this, then omit the “if” statement altogether. However, just wrapping it around one call won’t help.

    Thanks for the post!

  20. mia says:

    Thank you so much for saving my day! :D

  21. Shannon says:

    Thanks for sharing this! My php knowledge is rudimentary, and this was a huge help. You saved me much time trying to figure out the problem with my template’s sidebars. I did run into an error updating this through the theme editor. Had to do it offline and ftp the files back up. Worked wonderfully.

  22. sbs ba?vurular? says:

    I was searching like this. Mia said ” you saved her day” I agree Mia

  23. Chais Meyer says:

    Thank you very much for this! Many hours saved and the wife will appreciate that. I am now looking for a way to call one of my 10 sidebars dynamically inside the wp admin without having to change my code in my template per page. whooo…that was a long sentence.

    If you have any tips in this area, I would love to hear about it.
    ~ Chais Meyer

  24. Prabhjeet Singh says:

    Another great article. CHEERS..! Just what i was looking for. And believe it took only 5 minutes to do this task. Really thanks…

  25. Maxim says:

    Thank you for this post. It helped me to save a lot of time. I was looking for the way to duplicate existing sidebars and finally found useful piece of information only here.

  26. Mike West says:

    Cool, it works perfect !! Thank you very much for your work ! But, wordpress is putting automaticly to the right side, to the other sidebar, and i wanted it to the left side of my site, how can i do this ? Thank you !

  27. Info Gaptek says:

    I found this page by googling.
    Thanks for posting this tips!

  28. Mark says:

    As I learn more I will always remember that I started here. Thank you for all the info I can put it to use in my business plan.

  29. Wayne says:

    Thank you so mutch I have tried every so called webmasters code and nothing worked, Why can’t anybody keap things simple like you! And show you what you need to do… 5 Stars

  30. weevie833 says:

    For each instance of sidebars that I have added, how would I go about defining which category IDs to include/exclude from each instance? I had originally defined the global exclusion IDs in the default-widget.php file prior to adding additional sidebar instances, but now I want to defeat that and include/exclude on specific instances of sidebars 1,2,3, etc. – thx – weevie833

  31. Dhini says:

    I use your tutorial. That is great but I would ask you how make it. Here below what I want
    Over Dhini :
    – Beauty
    – Chickmeida
    – Special
    – more

    But on my sidebar over Dhini show also Site (this I dont want it)

    Thank you

  32. blackscorrpio says:

    Thanks for tip! Because you took the time to put this online I’m a step closer to giving my blog the pro look I want it to have

  33. bcks says:

    THANK YOU! fantastic – helped me out loads… Still got something kooking out but this was awesome, thanks so much.

  34. chad chandler says:

    Thanks! You saved me countless hours by posting these tips!

  35. Bridgesan says:

    Great stuff man, this just open a hole new world of dynamic sidebars on my personal blog. Is there any way to show a different sidebars with certain posts,

  36. seth says:

    Your directions were easy to follow, but I am not getting the proper result. I am using the iBlog2 template which seems to draw info from the sidebar.php file before reading the template file. I was able to successfully edit the functions.php and then add a sidebar2 the the php page, (so two widgetitized sidebars display one on top of the other) but I cannot figure out how to have the theme template dictate the sidebar. this may be a drawback of the theme, but I could sure use some help if anyone has ideas.

    seth

  37. seth says:

    I figured it out. The get Sidebar was in the footer.php file. I had to created customized footer and sidebar phps, but now it is looking goof.

  38. Kevin Althaus says:

    Thank you for this easy tutorial! Beginner will surely appreciate this!

  39. Diane Bourque says:

    Thank you so much. This totally worked for me!

  40. Fino says:

    Great tutorial. Very clear and helpfull. Thanks!

  41. Rama Dev says:

    After some searching I have found your post and you seem authoritative and clear to me and I hope you have a sec to point me in the right direction.

    I just moved our site to a new host and on getting things back up one of my sidebar elements had disappeared.

    I went to the widgets panel (wordpress 2.7.1) and created a new wysiwyg text widget in the same sidebar1 and placed my content into it. But everything is now transparent over the background image, it seems that firebug is telling me that it has no style at all.

    What’s going on? I included the #wysiwig-13 element in the css, but the background color doesn’t seem to want to stick to this panel (Free Orientation).

    Do I need to let someone else know that this panel has been added?

    Thanks for any wisdom on this.

    rama dev

  42. Design Inspiration says:

    Excellent! Thanks very much!
    It’s not working 100% for now but I’m getting there!
    Cheers

  43. Gloria says:

    Hello! I’ve just added the code you mentioned above and in the admin panel everything works fine.
    But i have some problem with the code of the single.php: the portion “” doesn’t appear in the code of a single post.
    Can you tell me why?

  44. Linkbuildingservice says:

    Great, working! thanks.

  45. Niema Bryson says:

    Hi,
    I added the code. I have the second sidebar in my admin. I added one widget to check, so when I preview my site the sidebar appears and then disappear how come?
    Thanks

  46. Niema says:

    OKY, I played around with the codes. I was able to get both sidebars up, but sidbar2 which is apart of the About Me page widgets are at the bottom of page. Any advice

    • WordPress Designer says:

      Niema if the widgets are showing up at the bottom of the page it might be that you have CSS issues since its a 2nd sidebar

  47. Mohammad says:

    it works thanks………

  48. A. H. Ansari says:

    Great stuff buddy! I found what I was looking for, thanks.

  49. Todd Halfpenny says:

    Hey there,

    Good article and very clear… from the amount of comments it also seems to have been extramely useful. Can I also propose the use of the Widgets on pages plugin which allows you to add/remove and manage sidebars via the admin pages. These sidebars can then be added to the theme with 1 simple template tag. Might be an easier way for “beginners” to get the same control over their sites.

    Hope this is of some use.
    Todd

  50. uganda news says:

    thanks for the piece of code. it worked….

  51. uganda jobs says:

    wow, this is a great guide, i used it on my jobs site for ugandans and it worked. thanks alot

  52. craig says:

    I feel your article is missing a critical step.
    How/where do you select which sidebar a post or page should display??

    For instance, I created two sidebars. Both appear in my widgets tab.

    I create post 1 and I want sidebar 1.
    I create post 2 and I want sidebar 2.
    Where do you make this selection??

    thanks

  53. Anna says:

    I cant get the new sidebar to execute on the site. I’ve made a new sidebar function in the function.php. I’ve copied the existing sidebar and put the new “dynamic sidebar code” in it. But when I call for this new sidebar in a page nothing happens. There isnt even room for it since the text spreads across the entire page. This is what happens in this theme when there’s no sidebar designated.

    The weird thing is that the sidebar shows upp among the widgets as its supposed to and if I place the “dynamic sidebar code” directly on the page you can se the sidebar spread across the page in an odd fashion. So I know that the code is working.

    The code I’m using to call for the sidebar in the page is the include code:

    Without the extra spaces.

  54. Mark Shaw says:

    Great tutorial. This worked wonders for needing a second sidebar without installing some plugin to do it for me.

    I wanted to add for those who are interested in using a file such as: sidebar-2.php so they don’t clutter up their template, simple paste in the code in to sidebar-2.php

    Then in your main template, for example index.php, you can use the preferred get_sidebar(); function to call that new file.

    Use this syntax: get_sidebar(‘2’); for the name will look for sidebar-NAME.php

    Makes your template code look much cleaner. Thanks again for the great help.

  55. Gabrielle says:

    I still have one big problem: the sidebar doesn’t show on my site. I can see both sidebars on my widgets, i’ve already put stuff on it, but it’s not on the website!

  56. boblilbranding says:

    Holy crapola!
    It works, well almost. Now I just have to style it.
    If I can get that working I am so squared away and so grateful. Thanks again, you made my day.
    – Bob

    • boblilbranding says:

      Just wanna follow up and let you know that this works great on my blog. Thanks again.

  57. Ashley says:

    I’ve tried your code for two sidebars and it works but then when I try to add a third sidebar my whole site crashes. This is what is in my functions.php

    ‘Process Sidebar’));
    }
    register_sidebar(array(‘name’=>’Contact Sidebar’));
    }
    register_sidebar(array(‘name’=>’Services Sidebar’));

    ?>

    Any ideas?

  58. anuj says:

    that rocks! I was looking for a guide like this to help me on my wordpress blog

  59. Eszteuczka says:

    Thakns :)

  60. Christoph says:

    Perfect, just what I was looking for to be more flexible with my Adsens program :-)

  61. TStallman says:

    Wow…got my sidebar’s working in no time thank you so much!

  62. Trung Nguyen says:

    Wow, this is awesome guide that works to help me create dynamic sidebar widget myself, thanks QOT :)

  63. Chris says:

    Thanks for the tutorial

  64. rupak says:

    working fine..Thanks

  65. Matt says:

    Thank You for sharing that tutorial, it helped me a lot with organizing different widgets on different pages.
    cheers

  66. Pether says:

    I am having a serious nerve effing problem with my sidebars.
    I have tried for days now and havent gotten it to work.
    I have tried every d*mn thing there is.
    All i want is a new sidebar on my page template. I have copied every single thing that is on the sidebare-page template and the sidebar.php and duplicated everything in the css related to those to fit my own created sidebar, made just as in your guide.

    And it doesnt work. The d*mn sidebar just sits at the end of all content and comments. In the sidebar-page template there is room for the sidebar to fit, there isnt in mine. YET I HAVE COPIED EVERYTHING!? Changed all names, all filenames, everything.

    Getting seriously pissed at this.
    Where is the magical ‘I want this sidebar to fit perfectly into this page also’-checkbox?

  67. shehap says:

    it works thanks

  68. Banner Advertising says:

    Thank you for sharing this post! Good job!

  69. zeeshan ahmed says:

    I cant thank you enough,
    i was trying to do this for ages. thank you so much.

  70. Rahul Kashyap says:

    It is great post. But I have need footer widget. can i use this tutorial for my footer widget. Please say me. I have to need this type tutorial.

  71. Sticker Decals says:

    I first read your single widget article. Now this article has helped to much too! Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *




css.php