-
Subscribe Now
Powered by FeedBurner
What are RSS Feeds?
-
-
Feb
1
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
7 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.