Feb
1
WordPress: Add a Second Widget-Ready Sidebar
Filed Under Tools and Tutorials, Wordpress | 23 Comments
This is the tutorial I wish I had found when I first wanted to know how to add a second widget-ready sidebar.
- Step One: Create a second sidebar file
- 1)a: Add content to sidebar2.php
- 1)b: Upload sidebar2.php
- 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
- 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.
Tags: 101 Posts
Comments
23 Comments so far
Great write-up!
Why not simply open sidebar.php and copy & paste the code for the 2nd sidebar there? This way you eliminate the need for some additional changes.
great but too complicated for me, can you show example that you have made on this, thanks
@ Ruud – Thanks for the tip!
@ Tinh – Please tell me where you get lost and I’ll try. I want to make a series of tutorials that will help people who are learning how to customize WordPress. I’ve tried to make this as copy-and-paste as I can. The one thing that you have to know first is how use CSS to position the sidebar(s).
I love, love, love this tutorial. And now I’m really psyched about future ones from you. Hmmm…I might just have to create a folder just for these tutorials, so I always know where to find them.
Wow, Elizabeth!
This is written about 100% more clearly than about 99% of the WP tutorials I have read in the past. You’ve done a beautiful job, right down to the way you formatted the article. Just super.
Miriam
(who is still hoping you’re going to tackle the e-commerce plugin, haha!)
[...] WordPress: Add a Second Widget-Ready Sidebar [...]
Hello!
I think this try.
Please ignore my last comment, except for the praise for this excellent tutorial, because the problem was I had an extra } in my stylesheet that caused the problem.
Once again excellent tutorial!!!!
Eric B
Thanks so much. This worked for me! It was so much easier than I thought it would be, thanks to your tutorial.
hey.
i am trying to add another sidebar to the left on the deafult theme. i followed your instructions, but when i got to “Step Three: Use functions.php to tell your theme about the new sidebar” i had some problems. the first lines of the original functions.php looks like this:
”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
so i changed it to:
”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
but when i update it, i get an “Parse error: syntax error, unexpected T_ARRAY in …/functions.php on line 8″ error.
please help…
hey.
i am trying to add another sidebar to the left on the deafult theme. i followed your instructions, but when i got to “Step Three: Use functions.php to tell your theme about the new sidebar” i had some problems. lines 7 and 8 of the original functions.php looks like this:
“if ( function_exists(’register_sidebar’) )
register_sidebars( array(”
so i changed it to:
“if ( function_exists(’register_sidebars’) )
register_sidebars(2);”
but when i update it, i get an “Parse error: syntax error, unexpected T_ARRAY in …/functions.php on line 8″ error.
please help…
Love this tutorial, helped me out a lot. Thanks.
you are awesome!!!
This was exactly what I was looking for! I’m going to give it a try but can you explain what Ruud Hein meant in his comment about eliminating some steps by adding 2nd sidebar code in sidebar.php?
awesome! Thanks so much, worked like a charm!
Thanks, this really helped me
I looked on the web for other tutorials about adding an extra sidebar and this one was the best one!
thanks for the tutorial. I got it t work -sort of.
the second column that I added (on the left) appears on the bottom and has different parameters than the original one on the right.
any suggestions??
Sancho, without looking, it sounds to me like you have a CSS problem. Do you have a screenshot or link I could look at?
sure. the blog I started re-designing is located at:
http://www.SANCHOzone.com
let me know if you need me to post any specific part of the code for you to look at.
thanks!
-s
Finally. Some answers on how to do this! The directions on Wordpress were impossible to follow. One note, I only had to change sidebar to sidebars in functions.php. I didn’t have to change 1 to 2 or anything like that as there were no numbers. Thank you! :3
Thank you so much for this tutorial!!!!!
Great tutorial! I have it working, but it adds the second sidebar on the right, right next to my existing sidebar. How do tell it to appear on the left side of the page?
I really appreciate this tutorial and this site.
@Ed – I am no expert but it sounds like a CSS issue. You have to use your style sheet where to put your fancy new sidebar.
@ablereach – I can’t get the second sidebar to appear on my page. My index php used the “”.
Since your instructions said to use the include I used the include but alas, no second sidebar. From the index.php I removed the php call for both sidebars just to see if I could effect them. Strangely my original sidebar is still showing up. Could it be that the sidebars are called from somewhere else?
Thank you very much,