WordPress: Add a Second Widget-Ready Sidebar

This is the tutorial I wish I had found when I first wanted to know how to add a second widget-ready sidebar.

  1. Step One: Create a second sidebar file
    • 1)a: Add content to sidebar2.php
    • 1)b: Upload sidebar2.php
  2. Step Two: Add the new sidebar to your WordPress layout
    • 2)a: Find the code that calls the original sidebar
    • 2)b: Add your own includes
  3. Step Three: Use functions.php to tell your theme about the new sidebar
    • 3)a: Insert widget-ready CSS
    • 3)b: check your work

Step One: Create a second sidebar file

Create an empty text file and give it a name. For the purpose of these instructions I’m using the file name sidebar2.php.

1)a: Add content to sidebar2.php

The example below will work for a second widgetized sidebar. Surrounding the second sidebar with a CSS div named “sidebar2″ provides a way to control positioning and use styling independent from another sidebar.

Note the difference between the original dynamic_sidebar() that you’ll you’ll find in a single sidebar theme, and the use of dynamic_sidebar(2) for a second sidebar. This difference is how the dialog at Options > Themes > Widgets knows which sidebar gets which widgets.

 
<!-- begin sidebar2 -->
<div id="sidebar2">
<ul>
     <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>

     <?php endif; ?>
  </ul>
</div>
 
<!-- end sidebar2 -->

 

1)b: Upload Sidebar2.php

The new sidebar should go in the directory containing your theme. If you’re using the WordPress Default theme, you need to upload it to /wp-content/themes/default/.

Step Two: Add the new sidebar to your WordPress layout

Decide where you want the contents of your second sidebar file to appear on a page, and in what kinds of pages. Some possible destinations are index.php, single.php, page.php, 404.php, search.php, and archives.php. What you choose will depend on your needs.

2)a: Find the code that calls the original sidebar

Where does the original sidebar appear now? The home page? The single post view? Some template files will contain a way to insert the existing sidebar. Methods that may be used will look something like one of these three examples.

This first example uses the WordPress include tag, get_sidebar. In this case, if a theme doesn’t have its own sidebar.php, WordPress will use the sidebar.php from the WordPress Default theme.

 
<?php get_sidebar(); ?>
 

These next two examples use a php “include” to call a single sidebar with the file name sidebar.php. The first assumes that sidebar.php is in the same directory as any template files containing this code. The second specifies TEMPLATEPATH. TEMPLATEPATH is the default location for the files contained in whatever theme is currently in use. Either will work, unless you’re doing something fancy that is out of the span of this tutorial.

 
<?php include("sidebar.php"); ?>

 

 
<?php include(TEMPLATEPATH."/sidebar.php");?>
 

2)b: Add your own includes

Use a separate include for each sidebar. In both examples below, the first include will call the original sidebar, if it has the default file name of sidebar.php. The second will call our new sidebar, with the file name of sidebar2.php. Place the sidebar.php line where you would like to see sidebar.php’s contents generated, and the sidebar2.php line where you want sidebar2.php to appear.

 
<?php include("sidebar.php"); ?>
 
<?php include("sidebar2.php"); ?>

 

Or you could use this:

 
<?php include(TEMPLATEPATH."/sidebar.php");?>
 
<?php include(TEMPLATEPATH."/sidebar2.php");?>

 

Step Three: Use functions.php to tell your theme about the new sidebar

Think of functions.php as a sort of a master of ceremonies for instructions specific to your WordPress theme. The simplest, widgetized, single-sidebar theme will have a functions.php file that contains something like this, without further specifications:

 
if ( function_exists('register_sidebar') )

  register_sidebar();
 

To add a second sidebar to such a simple theme, change the “1″ to a “2″ and make “sidebar” plural. If you’re adding two sidebars, change the “1″ to a “3.”

 
if ( function_exists('register_sidebars') )

  register_sidebars(2);
 

3)a: Insert widget-ready CSS

A few more lines of code make a big difference, giving more control over CSS and automatically creating a lovely, nested navigation list. For an example, take a look at the first few lines of the functions.php that comes with WordPress’s single-sidebar Default theme. That theme and some others have special CSS powers because of a slightly more complicated funtions.php. In the example below, where you see li id="%1$s" and class="widget %2$s", WordPress will automagically insert IDs and classes named after whatever widget is displayed. To make use of those IDs and classes you’ll need to edit your stylesheet.

 
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>

 
',
  ));
 

To add a second widgetized sidebar and retain the nifty formatting by the example above, you could add a curly bracket to the end of the first line, make “sidebar” plural and add the number 2 on the second line, and nest the whole thing with a closing curly bracket on the eighth line. The result will look like this:

 
if ( function_exists('register_sidebar') ){

  register_sidebars(2,array(
    'before_widget' => '
<li id="%1$s" class="widget %2$s">',
    'after_widget' => '</li>

 
',
    'before_title' => '
<h2 class="widgettitle">',
    'after_title' => '</h2>

 
',
  ));
}
 

Two sidebars should now show up at Presentation > Widgets.

3)b: Check your work

Open your home page and click refresh. At this point, your site might look odd because of CSS layout problems, but there should not be any php error messages. If something besides CSS styling is off, re-trace your steps and check for typos, missing bits or extra spaces before and after php opening and closing tags.

This entry was posted in Tools and Tutorials, WordPress. Bookmark the permalink.

12 Responses to WordPress: Add a Second Widget-Ready Sidebar

  1. leen says:

    wow thank you so much for this tutorial! did not only solved my problem, you also made me understand sidebars/widgets better :D

  2. stanley says:

    Hi,
    i know your tutorial is very easy to follow, please bear with me as i am newbie to wp. what i really want is a different side bar for different pages. in step 2a you said “Find the code that calls the original sidebar” where do i find this code, i mean in what file or folder?

    • You have two things to figure out before I can give you a useful answer. First, specifically what is different about the pages where you want the different sidebar? Is it for Posts in a specific blog category – or do you want a different sidebar for some or all Pages? Second, do you want a completely different sidebar, or the same sidebar but with some different widgets?

      Finding the code that calls the original sidebar is the easy part. Unzip a copy of the theme on your computer, do a text search for “sidebar” and look for < ?php get_sidebar(); ?> or something like include("any-sidebar-name.php"). The first example is the standard. Exactly which template files contain a sidebar will vary with the theme.

      How’s your CSS? Do the different sidebars need to be styled differently?

  3. Thank you, I had tried to follow a post on how to add an extra sidebar on another website, but got lost, your instructions are very clear and concise. I got the extra sidebar added! Thanks

  4. etube says:

    Now everything is clear .. very good explanation. thank you very much. Jose.

  5. Craig says:

    You are awesome!! The only tutorial that worked for me :-)

    Thank You!!

  6. nacho says:

    the best tutorial of sidebars i have found in internet
    thanks you so

  7. Ronallie says:

    Thanks for this set of instructions. It really helps me a lot. :)

  8. John says:

    Thanks. This IS the greatest explanation. Looking forward to working it through in the morning.

  9. Artur says:

    Thank you…. this is the greatest explanation ever. It helped me a lot…. once again… thank you

  10. Please help!I have tried a few different approaches with this and have the same result. Everytime I add the new widget area to my theme everything below where I add it disappears when I view it live. Why would it be doing this?

    • Stephan – if it’s showing up where it shouldn’t be, you either have broken html or a css issue. I’m guessing that your css is not taking into consideration the addition of a widget area.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>