multiple wordpress widget sidebars

While customizing my site I decided it would be cool to have different widget sidebars on various pages. I wanted to display navigation on the search/archive pages, related subject info on the post pages, irrelevant itunes info on my life story, and keep a generic sidebar on the rest of the pages. I hunted around on the web but I couldn’t find a brief explanation of the cleanest way to convert a template to have multiple sidebars. The best resource I found was the Automattic Widget API page, but I still had some questions. There are plenty of great themes which implement this feature so I figured it couldn’t be too difficult. In fact it turned out to be pretty easy. Here is how I did it for my WordPress 2.2 site.

1) Create the multiple sidebars.

Sidebars are defined in the file functions.php in your template directory. The sidebar is created with a code segment that looks like either

if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
));

or

if ( function_exists('register_sidebar') )
    register_sidebar();

or maybe

if ( function_exists('register_sidebars') )
    register_sidebars(1);

Each of these code examples registers a single sidebar. I wanted to register multiple sidebars each with a descriptive title. Here is my replacement code:

if ( function_exists('register_sidebar') ) {
    register_sidebar(array('name' => '1 - Default'));
    register_sidebar(array('name' => '2 - Post'));
    register_sidebar(array('name' => '3 - Archive'));
    register_sidebar(array('name' => '4 - Life'));
}

Each call to register_sidebar() creates a new sidebar using the parameters passed in through the array. This initialization array can also define unique values for widget formating values for before_widget, after_widget, before_title, and after_title. I just stuck with the defaults. To learn more, check out the register_sidebar() function in the /wp-includes/widget.php file.

2) Using duplicate widgets on multiple sidebars

One challenge with multiple sidebars is the WordPress admin interface. Each widget can only be dragged to a single destination. What if you want to use the same widget in more than one sidebar? The solution to this is to register the same widget twice. For example, I wanted to use the Creative Commons widget on every sidebar. In the file /wp-content/plugins/wpLicense/widget.php I changed the line which registered a single widget

register_sidebar_widget(array('Content License', 'widgets'), 'widget_cc');

To instead register multiple widgets

register_sidebar_widget(array('Content License 1', 'widgets'), 'widget_cc');
register_sidebar_widget(array('Content License 2', 'widgets'), 'widget_cc');
register_sidebar_widget(array('Content License 3', 'widgets'), 'widget_cc');
register_sidebar_widget(array('Content License 4', 'widgets'), 'widget_cc');

In the WordPress admin interface, I now had four identical copies of the Content License which I could drag to each of the sidebars. This step must be taken in the actual code for any widget for which you require multiple instances.

3) Assigning sidebars to pages
Each sidebar that was created is available by passing a numerical index value to the function dynamic_sidebar($index). The index value is based on the order in which the sidebars were registered, where the first sidebar has an index of ’1′. Typically dynamic_sidebar() is called in the sidebar.php file. Template pages load the sidebar.php file with the function get_sidebar(), which unfortunately takes no parameters. I was able to get around this limitation by making the sidebar.php file smart enough to know which sidebar to display by using a handful of wordpress’ built-in methods. Here is the contents:

<div id="sidebar">
    <ul class="sidebar_list">
    <?php

        //default
        $sidebar_index=1;

        //posts
        if(is_single()) {
            $sidebar_index=2;
        }

        //navigation pages
        if( is_page('archives') || is_search() || is_404() ) < 0) {
            $sidebar_index=3;
        }

        //life story page
        if(is_page('life')) {
            $sidebar_index=4;
        }
        ?>
        <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar($sidebar_index)) : ?>
            <li class="widget">
                <h2>Latest Blog Entries</h2>
                <ul>
                    <?php query_posts('showposts=10'); ?>
                    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <li><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
                    <?php endwhile; endif; ?>
                </ul>
            </li>
            <li class="widget">
                <h2>Categories</h2>
                <ul>
                    <?php wp_list_categories('title_li=0'); ?>
                </ul>
            </li>
            <?php get_links_list('id'); ?>
            <?php endif; ?>

        </ul>
</div>

The variable $sidebar_index defaults to 1, the index of the default sidebar. The wordpress is_single() function returns true for any single post page. The wordpress is_page($page_slug) function checks whether or not the sidebar is being rendered on a particular user created page. Finally, the wordpress is_search() and is_404() functions check to see if the sidebar is being rendered on a search or a 404 page respectively.

UPDATE:
It looks like this issue will be addressed in WordPress 2.4, scheduled for release in December 2007.

Creative Commons License
This work, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

50 comments ↓

#1 Pete on 07.20.07 at 5:03 am

Im sure this code is what I need but I can’t seem to make it work..
im using the relax 3 column theme
http://themes.orth.me.uk/3col_rex_ver1/index.php/archives/

I have registered 4 sidebars in function.php

if(function_exists(‘register_sidebar’)) {
register_sidebar(array(‘name’=>’JPN’,'before_widget’ => ”,’after_widget’ => ”));
register_sidebar(array(‘name’=>’JPN2′,’before_widget’ => ”,’after_widget’ => ”));
register_sidebar(array(‘name’=>’ENG’,'before_widget’ => ”,’after_widget’ => ”));
register_sidebar(array(‘name’=>’ENG2′,’before_widget’ => ”,’after_widget’ => ”));

}

they show up in the widgets panel no worries.

What im trying first is to set the dynamic_sidebar() to load the last 2 and not the first 2. So basically the first ones are ignored. But whatever I do its always loading the 2 sidebars named JPN and JPN2.

Cheers!

#2 Pete on 07.20.07 at 6:05 am

I found the same code in a Left and Right sidebar.. I overwrote the whole code with your code and now it works! :)

Cheers!

#3 brandon on 08.02.07 at 1:33 am

I’m sure I’m missing something or did something incorrectly, but I can’t get this to work. I registered two sidebars, per your instructions in step 1:

register_sidebar(array(‘name’ => ’1 – Default’));
register_sidebar(array(‘name’ => ’2 – Post’));

I also used the code in step 3. I now have two sidebars in the WP interface. However, the content of the 2nd sidebar doesn’t show up on my post pages. What did I do wrong? Please help!!!

Thanks,
BG

#4 jon on 08.02.07 at 2:08 am

Which version of wordpress are you running? The widget code changed a bit for 2.2.

Try removing the following lines:

//navigation pages
if( is_page(‘archives’) || is_search() || is_404() || (strlen(STP_GetCurrentTagSet()) ) > 0) {
$sidebar_index=3;
}

//life story page
if(is_page(‘life’)) {
$sidebar_index=4;
}

And replace that section with
echo(“sidebar_index: “.$sidebar_index);

Do you see a different value for sidebar_index on the single post pages compared to the rest of the site?

I’ll also update the code example to get rid of the reference to the simple tags plugin. That might be causing you a problem.

#5 brandon on 08.02.07 at 1:29 pm

yes, i’m running version 2.2.

i’ll update the code tonight and let you know what happens. thanks

bg

#6 Michelle on 08.10.07 at 10:09 am

How do you make two searchform.php widgits, one for each sidebar – I’m just using the default searchform that was loaded with wordpress.

Also, my single page posts pull the same sidebar as the default.

We are using version 2.2 for wordpress.

#7 Matt Bernius on 08.12.07 at 10:43 pm

This is a great resource. I got everything to work on the first try.

One thing I’ve noticed is that none of the widget’s “option boxes” work now. I can drag and drop each widget without a problem. But double clicking on the customization box in the right corner doesn’t bring up the dynamic window. Any thoughts on what might be causing that?

#8 PatJe.de » Blog Archive » Neues Aussehen on 08.19.07 at 7:59 pm

[...] habe ich mit Hilfe dieses Artikels getrennte Widgets (Navigationsleisten) für den einzelnen Artikel und übrige Seiten im [...]

#9 Morgan on 08.26.07 at 5:36 pm

Hi,

I create the multiple sidebars in function.php and added the following code in sidebar.php:

but when i call the page 14 (livros -> Teoria dos Jogos) it does not call any sidebar.

Where should i specify wich content should each sidebar load.

#10 Jake Strawn on 08.29.07 at 4:56 pm

Great information on customizing widgets. I’m just getting started on setting up my custom theme after only 3 WordPress installs and customizations, no theme is exactly what I want, so it’s time to build from scratch.

This article provides me with exactly what I needed when trying to figure out how to handle multiple sidebars, and duplicate widgets, which will be an important feature.

Thanks for the info!

#11 Richard on 09.01.07 at 1:37 pm

Just starting with WP and was frustrated in thinking, “Gee – why can’t I specify a sidebar/widget per page?” Since page(s) is/are part of WP, it only makes sense, doesn’t it?

So thanks for your code – I will definitely be using it.

OTOH – I’d sure like to see WP handle it from the git-go. I would expect there to be a lot of people not wanting to touch the code, but wanting the feature.

Thanks again for the code!

#12 guest on 09.16.07 at 7:36 pm

thanks for the code,
I have replaced the code in the functions.php file and now I can see multiple sidebars in my widgets interface.

But I’m having a heck of a time assigning sidebars to pages.
When I insert your code into my sidebar.php doc, I get parsing errors about extra ‘>’ in the lines calling if( is_page(‘archives’)

Currently, in my sidebar.php doc I have a ton of xhtml pulling in a YUI carousel component, followed by the block of php that starts with:

if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

I think I still need to use multiple sidebar files (sidebar_index.php, sidebar_about.php) instead of just one sidebar.php file because my sidebars have a ton of xhtml in them that’s creating carousel structures before the widgets, and a styled frame around the widget group(sliding doors technique content blocks).

I’ve tried migrating the xhtml to text widgets, but it breaks the structure/styles since text widgets get wrapped in additional id’s and classes, yadda yadda. So, assuming I need to have individual sidebar files, how do I call a specific widget sidebar into each one? And once I’ve called a specific widget sidebar, how can I style around individual widgets instead of styling around all widgets as a group?

fyi – I’m using the multiple widgets plugin found here:
http://www.lancelhoff.com/2007/08/29/wordpress-duplicate-sidebar-widgets/

So I’m not using your code for widget duplication. thanks in advance!

#13 guest on 09.16.07 at 8:13 pm

to be more clear….

assuming I have multiple sidebar files, how can I assign one of the widget sidebars to, say, my sidebar_about.php file?

#14 cfur on 09.17.07 at 3:44 pm

Thanks for the solution! I had to tweak things a little…
@guest, I have a similar WP2.2 layout I think, and I just checked the page_id… here’s what worked for me

Simply changed the line in functions.php:

register_sidebars(22, array( // now have 22 widget sidebars (was 4)

and then used similar derivatives of the following parts in each sidebar div for each of my 4 x_sidebar.php:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

It is a total hack, I know. I’m sure there is a more elegant solution with better bookkeeping, but it was a quick fix for me. Anyway, thanks for the great idea….

#15 cfur on 09.17.07 at 3:46 pm

Thanks for the solution! I had to tweak things a little…
@guest, I have a similar WP2.2 layout I think, and I just checked the page_id… here’s what worked for me

Simply changed the line in functions.php:

register_sidebars(22, array( // now have 22 widget sidebars (was 4)

and then used similar derivatives of the following parts in each sidebar div for each of my 4 x_sidebar.php:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

It is a total hack, I know. I’m sure there is a more elegant solution with better bookkeeping, but it was a quick fix for me. Anyway, thanks for the great idea….

#16 Kathrina on 09.18.07 at 6:15 pm

Hi,
thanks a lot for this codes and explanations!
You saved me, so far….

just have one problem tough…

How do I dublicate the default Available Widgets?? .. i.e. Search, Categories, Links, etc…

Have been looking everywhere, but can’t find any file that register them….

Any clue??

#17 Ben on 09.24.07 at 2:24 pm

Hello great tip, i have a question im a designer and everything works good, but i am not able to display the sidebars on my template; if i leave the code get_sidebar(); it shows the first sidebar but im not able to display the rest of them, how can i do it? thanks

#18 S.J. Day on 10.07.07 at 11:44 pm

I have the same problem as Brandon. I have two sidebars in the WP interface, but only the default shows up on the pages. I’m using WP 2.2 as well.

Thanks!

#19 Super Multiple Widget Sidebars For Wordpress | Stephan Miller on 10.15.07 at 1:17 pm

[...] For full details on how to add multiple widget sidebars to your WordPress theme, see Marston Development Studio. [...]

#20 Mine del.icio.us-links den 15. oktober | shevy.dk on 10.15.07 at 8:31 pm

[...] multiple wordpress widget sidebars – En lille howto [...]

#21 Mine del.icio.us-links fra 16. december til 16. oktober | shevy.dk on 10.16.07 at 8:34 pm

[...] multiple wordpress widget sidebars – En lille howto [...]

#22 Tom on 10.22.07 at 11:25 am

I have tried this script but for some reason only the first sidebar works. I set it up for 4 sidebars but all my widgets go into the first sidebar. Can you help me out?

#23 Bryan on 10.28.07 at 10:36 pm

Excellent tutorial Jonathan, thank you! This is just what I was looking for and it’s not too difficult to implement either.

However, when you use a theme with 3 sidebars, and you want all of them to be unique based on which page you’re on… well you can just imagine, the Widgets panel gets quite messy!!

Too bad there’s not a way to create a new Widget sub-menu in the admin panel… maybe one for each page on which you want unique sidebars to be used. Any idea on how to do that?

#24 revenantkioku on 11.18.07 at 10:48 pm

It works for creating multiple instances, but if they have a control, it seems that duplicating that code only makes them share the same one. Wonder what needs to be set to let them have their own unique controls.

#25 Dhruva Sagar on 01.22.08 at 6:16 am

Hey, thanks a lot for this nice tutorial, but what I wanted is slightly different, although I think I can use this info still to get what I desire too, lets see.
What I basically want is the opposite of what you want…I want that for a particular page, no sidebars should be visible, but for the others there should be the normal 2 sidebars visible as always…do you think you could help me in this regards?

#26 Kevin M. Scarbrough on 02.04.08 at 9:04 am

Thanks for the great tutorial, it really helped out. Far more useful than anything else I’ve seen.

#27 Justin Jones on 02.11.08 at 4:34 am

thanks! this was helpful — I’ve been searching for ways to use the same widget twice… didn’t know it was so freakin simple! haha – thanks :)

#28 Vistronic on 02.18.08 at 8:52 pm

Thanks.
I will use data to try and make a Horz footer side bar, if I can get widgets to display Horz. I already have 3 side bars. I am trying for 5.

#29 Tenzin on 04.09.08 at 6:41 am

hi,
i’ve been looking all around the internet for this information. Finally I found it. But the problem is I have two side bars – one on right and one on left. So i really don’t know how to go about it. Can you please help me?
Thank you for this wonderful tip !! You Rock !
regards

#30 A Journey Through WordPress Theme Design | Tanner Hobin on 04.14.08 at 11:54 am

[...] I used this little tutorial for creating multiple widget sidebars [...]

#31 links for 2008-05-14 « Shawn’s Link Blog on 05.14.08 at 5:20 am

[...] multiple wordpress widget sidebars — Marston Development Studio shows how to implement different widget sidebars on various wordpress pages. (tags: wordpress sidebar widgets) [...]

#32 Piter on 07.03.08 at 8:02 am

How can i get multiple widget on wordpress 2.51 ?

#33 David Stembridge on 08.04.08 at 4:41 pm

is it possible to exceed the “9 available” extra widgets? I am using flexipages widget, which gives you the possibility of have up to 9 copies. I need more though. Any ideas if this can be achieved within the widget.php file, or the actual plugin file.
Thanks!

#34 zacheos on 09.09.08 at 4:02 pm

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 user’s 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.

#35 Kimberly on 11.03.08 at 6:21 pm

“Using duplicate widgets on multiple sidebars”

THANK YOU! This is EXACTLY what I needed for my two sidebars. This works perfectly!

#36 vytas on 01.20.09 at 7:46 am

what about default widgets? (wp 2.6, 2.7)
unable to find working plugins.
maybe you are using some kind of workarround for that?

#37 kylemoseby.com » Blog Archive » links for 2009-02-15 on 02.15.09 at 8:31 pm

[...] multiple wordpress widget sidebars — Marston Development Studio (tags: wordpress code widgets development sidebar multiple widget webdev) [...]

#38 Toure on 03.11.09 at 2:49 pm

Hello, I am using the latest wordpress 2.7 with the sandbox 1.6 theme. Could anyone direct me on how to make a change so I can get different sidebar per page? I can’t find the code described above in the function.php of sandbox 1.6 theme and I am sure if I should make a change withing the function of widget.php of wordpress 2.7
Any help will be appreciated, thanks.

#39 Julian on 06.04.09 at 6:11 pm

Everything is messed up in the code.

#40 Rebecca on 06.08.09 at 6:35 am

amazing!!! thank you. so simple yet helps so much :)

#41 Softduit|Social Media services, CMS Website management, Theme Designs & Business Development Consulting | Softduit Media on 06.13.09 at 12:00 pm

[...] Multiple Widgets – From time to time, you need to run different sidebars on different pages, so you will need to configure many multiple sidebars, which might require using the same widget on more than one sidebar, you’ll need the Multiple Widgets Plugin Share and Enjoy: [...]

#42 Matthew Johnson on 06.17.09 at 10:10 pm

Thanks very much, this worked instantly. Great post!!

#43 Chad Bishop on 09.19.09 at 1:04 pm

Thanks for the article!

Some more good template/widget tips here!

http://outthinkgroup.com/2009/01/06/wordpress-templates-multiple-widget-locations/

#44 hostpapa review on 11.05.09 at 1:58 pm

now i feel like an expert. thanks for the tips.
really explained, should be digged!

#45 Cole on 05.20.10 at 11:32 pm

I used this to update the method I use to call multiple sidebars. I just cannot help but wonder if there might be.. a slightly neater way to do it. Still, it works and it’s neater than how I was doing it before!

#46 wordpress programming on 06.23.10 at 6:27 am

This is what am looking for long time. Thank god!!! Finally I got it.

Thanks,

#47 Anonymous on 11.08.10 at 8:06 am

I made three sidebars in the footer.
in footer.php, I put this code:

and in functions.php, I put this code
register_sidebar(array(
‘name’=>’footerbar1′,
‘before_widget’ => ”, // Removes
‘after_widget’ => ”, // Removes
‘before_title’ => ”, // Replaces
‘after_title’ => ”, // Replaces
));
register_sidebar(array(
‘name’=>’footerbar2′,
‘before_widget’ => ”, // Removes
‘after_widget’ => ”, // Removes
‘before_title’ => ”, // Replaces
‘after_title’ => ”, // Replaces
));
register_sidebar(array(
‘name’=>’footerebar3′,
‘before_widget’ => ”, // Removes
‘after_widget’ => ”, // Removes
‘before_title’ => ”, // Replaces
‘after_title’ => ”, // Replaces
));
And it all worked fine!!!!! I’m Happy!!!!! Just for noobies, you can copy it.

#48 Mike on 11.22.10 at 2:23 pm

Great Article! Thanks for the information. Here’s a plugin that folks may find handy… The Graceful Sidebar Plugin enables bloggers to customize the contents of the sidebar for each page or post. Simply create two custom fields called “graceful_title” and “graceful_content” with the content to be displayed. Then drag the Graceful Sidebar Widget to your theme’s sidebar.

Thanks again – and Enjoy!

#49 Matt on 01.30.12 at 1:06 pm

You really should replace => in your code with => for someone that is copy/pasting it will break the site if the user doesn’t know any better.

#50 Matt on 01.30.12 at 1:07 pm

Hah, your comments renders => properly but your code snippets don’t?

= & g t ; should be =>

Leave a Comment