Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to add Dynamic Widget Ready Sidebars in WordPress

Last updated on by
Elegant Themes
How to add Dynamic Widget Ready Sidebars in WordPress

There are times when you want to display widgets on other locations than your default sidebar. With such high demand for this hack, we will be sharing how you can create multiple dynamic sidebars that are widget ready for your WordPress blog. There are some plugins that will require you to use the widget only, or in some cases widget is what you feel comfortable with then this is the hack for you.

First you will need to visit your functions.php located within your theme folder.

For users using WordPress 2.8.1 and above, add the following code in:

register_sidebars(3);

For users using below WordPress 2.8.1, we suggest that you upgrade. We will not be sharing a way to do this below that version.

By adding the code above, you told WordPress to add 3 additional sidebar for your widget section, so now in total you will have 4 sidebars.

In your WP-Admin area go to Appearance » Widgets and you should see something like this:

How to Add Dynamic Widget Ready Sidebars in WordPress

Choose the widgets of your choice and place them in the sidebars that you like to display these in. Now some of these sidebars can be displayed in the footer or anywhere else you like.

Once you have done adding the widgets to each sidebar, simply open up a theme file of your choice and paste the following code to display each sidebar.

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
Insert text that will display only if you are not using any WordPress widgets in this sidebar.
<?php endif; ?>

Simply change the number 2 to the appropriate number. If you leave it blank, it will assume that the number is 1 and therefore display Sidebar 1.

By using this hack, you can accomplish results like we have in our footer:

How to Add Dynamic Widget Ready Sidebars in WordPress

This hack is very versatile and can come in handy in many cases, so save it, bookmark it, and share it with those who need it.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Mattia says:

    Simple, clear. Awesome.

  2. will says:

    awesome hack +now what widget would be best for the footer.

  3. omar jutt says:

    and what about css? please tell me code for css with everything set. SO that I only have to change the values.

  4. Cindi says:

    Where would this go in the functions.php ?

    register_sidebars(3);

    • Editorial Staff says:

      It can go anywhere within the php codes. At the top would be just fine.

      • Teodoro Lopez says:

        I added the – register_sidebars(3); – after the first registered sidebar that was already in my functions.php file and it gave me problems. Instead of giving me a 1 through 4 list it gave me sidebar 1 two times followed by sidebar 2 and 3. I ended up moving the register_sidebar(3); before the first registered sidebar and that fixed my issue.

  5. Cindi says:

    Place the following code where?

    Once you have done adding the widgets to each sidebar, simply open up a theme file of your choice and paste the following code to display each sidebar.

    Insert text that will display only if you are not using any WordPress widgets in this sidebar.

    • Editorial Staff says:

      You can place it wherever you like in your theme files. If you want to display these in the sidebar then put them in sidebar.php. If you want to use the widgets in the footer, use it in footer.php

  6. Teodoro Lopez says:

    I followed the steps on this tutorial however I am having a problem dragging the widgets to the sidebars I want them to go to, anyone know the reason why? using wordpress 2.9+

    Help will be greatly appreciated

    Thanks

    • Editorial Staff says:

      Is it just the widgets? Try going to your write panel, and see if you can move things around. If you can’t, then it is a JavaScript error that many users have faced. It is either being caused by one of the plugins that you have installed, or TinyMCE Script not functioning properly.

      • Teodoro Lopez says:

        thanks for the reply,

        I checked the writing panels and they didnt move either, I did go through the plugins and found out it was a plugin that was preventing me from making the changes. I deactivated and will now find a new plugin to replace the old one. it was an event calendar plugin.

        Thanks again!

  7. Hutek says:

    very very good
    Thank so much, it give me some ideas for new theme

  8. Naşul says:

    Very usefull.
    10x

  9. Michael Oeser says:

    Nice but would make more sense to give any sidebar (or better: widgetarea) a unique name although that requires a little mor code in the functions file. But it also adds more flexibility in terms of formating.

    //Widgetized sidebar with unique name
    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(‘name’=>’Sidebar Name’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));

    Cheers
    Michael

    • Editorial Staff says:

      Yeah that code might complicate some users, that is why we didn’t provide it. It comes built-in with the default WordPress theme, and it is certainly a better code, but to keep it very simple, we used the other one.

      • survey728 says:

        I’ve installed this sidebar in my footer but the widgets are stacking on top of one another instead of side by side at officialbabyshowerguide.com. Is there css I should be adding to the stylesheet for this?

        • wpbeginner says:

          @survey728 Yes, you need to add css classes. First idea would be to wrap it all in an id like #footer-widgets…Then add a class like #footer-widgets .widget{width: 100px; float: left;} Replace the width to whatever you like. Add margins and such to your like.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.