Adding Extra Sidebar to your Wordpress Theme
You like a Wordpress theme on the Internet but Oh!… What’s this?? The theme has only one sidebar! You need more than one and are on the verge of switching to some other theme with more sidebars. But wait!! Let me teach you how to add an extra sidebar or sidebars to your favorite theme. People who know PHP will find it easy to follow but even novices can easily do it using the code that I have provided in this tutorial. I am assuming that you already know HTML and a bit of CSS.
To begin the tutorial, extract your theme into a folder and open it to see all the files. If your theme has only one sidebar, then most probably you will NOT find a file called functions.php in your theme folder. In that case you will have to create this file yourself. Just open notepad or any other code editor to start a new file. Put this code into that file :-
<?php
if ( function_exists('register_sidebars') )
register_sidebars(2);
?>
Save the file as functions.php and put it in your theme folder. This piece of code actually tells Wordpress to register two sidebars for you (See register_sidebars(2) in the code). If your theme has more than one sidebar, you will find the functions.php file already present in your theme folder. You just have to edit the number to your requirement and save the file. You can increase this number if you want more sidebars and if your theme’s layout can accommodate it. Now, when you go to your Wordpress admin section and browse to the widgets under the menu item called presentation, you will see two sidebars listed there. You can drag your widget items into any of the sidebars.
Now comes the part where we actually build the sidebars. If your theme has only one sidebar, try to locate a file called sidebar.php in your theme folder. In this example, where we are trying to modify the theme for two sidebars, let’s rename sidebar.php to sidebar1.php and make a new blank file called sidebar2.php. Put this code into sidebar2.php and save the file :-
<div>
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
<?php endif; ?>
</ul>
</div>
So, we have the two sidebars ready but they have not been placed in the index.php file yet. Both these sidebars need to be called from the index.php file in order to include them in your theme. Just open the index.php file from your theme folder and locate the code that calls your sidebar file (sidebar.php earlier). It should look something like :-
<?php include (TEMPLATEPATH . '/sidebar.php'); ?>
Edit this code and change the words sidebar.php to sidebar1.php.
This takes care of the first sidebar. Now take a look at the index.php file carefully and find a suitable place to insert the second sidebar. This might involve modifying your layout or adding new divs. Once you find a suitable place, place the following code there :-
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
Save the index.php file and now preview your theme. You will see all the widgets that you placed in both your sidebars appearing on your website. If you have not placed any widgets yet, you will not see any change. There might be alignment errors but you will have to fix them yourself. You can add more sidebars in a similar way to your Wordpress theme. I hope this tutorial helps some of you.
Great tutorial. I am using the Theme Dark Night Everything looks good until I go to the Index.php file.
That line of code isn’t in the index file or anywhere else for that matter. Am I screwed?
I don’t think this works so well with 2.7. It jacks my theme all up and i’m using the default theme (modifying it myself).
Think I could bug you into looking at 2.7 and seeing if this still applys? I want to add a 3rd column (second sidebar) to the theme.
@Trisha:- my darn keyboard. lets try this again, all in one post.
there is no code built in to your css for adding an extra sidebar. You will want to add an id tag for your sidebar2. this is the code i use to style my extra sidebar, and by adding the ul and list-style:none… it will get rid of the list your complaining about:
#sidebar2 ul {
width:500px;
margin:20px auto; padding:10px;
background:white; border:1px solid #999; list-style: none;
}
then just add the div in your sidebar2.php
hope this helps
@Luke:- there is no code built in to your css for adding an extra sidebar. You will want to add an id tag for your sidebar2. this is the code i use to style my extra sidebar, and by adding the ul and list-style:none… it will get rid of the list your complaining about:
#sidebar2 ul {
width:500px; margin:20px auto; padding:10px;
background:white; border:1px solid #999; list-style: none;
}
its been over a year and this code still works, the only code i found that works. THANKS SO MUCH!
JIM –
Thanks for the reply.
I’m no CSS expert, but I’m a decent tinkerer. I’ve been fidgeting with the widths, etc. and can’t seem to get things to fit correctly.
As you can see at my site (http://touchingharmstheart.com/), I’ve put placeholder text where the “sidebar1″ and “sidebar2″ are placed.
I can’t seem to get “sidebar2″ to respond to CSS (there’s not a tag for it in my theme’s style sheet). The CSS also seems to think that “sidebar2″ is a list of some sort. I’m flummoxed.
I’ll keep tinkering, but I’m convinced I need some CSS guidance. Any recommendations?
Luke, I misread your post. If it is showing but not in the right place, ( maybe under ) everything, then it is a CSS problem for sure .There may not be enough width to handle everything.
JIM
Luke,
I struggled for weeks trying to make sidebar additions work, in reality the addition tutorial is correct, but the layout may not handle it.
Look at the Daily press theme here on BohBlog, it is really good, has 2 sidebars on right under another sidebar.
hope this helps
JIM
Greetings …
This tutorial is easy to follow and (almost) gave me great results. My problem:
I’ve tried placing the “” tag **everywhere** in my index.php but it will not sit in a sidebar position. That is to say, it appears and it works, it’s just in the wrong position on my blog.
I’m using a pretty old theme (Water 1.0 – http://wordpress.org/extend/themes/water) so perhaps a 2nd sidebar is impossible. Can anyone let me know?
Or is there a way to create a 3rd column in which to place the 2nd sidebar?
Thanks …
@ josh
If you have a sidebar DIV, you can use the attribute ‘overflow:auto; or overflow:scroll;’ (in your css) it adds a scrollbar to the sidebar.
Here’s a link:
http://www.w3schools.com/Css/pr_pos_overflow.asp
I hope I helped you out.