Adding Extra Sidebar to your Wordpress Theme
Written by Jai on November 23, 2007 – 7:58 pm - 18,760 views
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.
DIGG this tutorial!
If you enjoyed this post, make sure you subscribe to my RSS feed!
78 Responses
to “Adding Extra Sidebar to your Wordpress Theme”
14 Trackback(s)
- Nov 24, 2007 : Adding Extra Sidebar to your Wordpress Theme — benway.net
- Nov 29, 2007 : WordPress Template customisation | JazzyMoon
- Dec 12, 2007 : ????? ?????? ? WP | ????????? ????
- Jan 3, 2008 : Creeva’s World 2.0 » Web Wandering Dump
- Jan 7, 2008 : ?????????? ?? ???????? ? ??????? ????????? ?????? ? WP | ?????? ?? ?????
- Jan 8, 2008 : Creeva’s World 2.0 » How to add sidebar(s) to a Wordpress Theme | Blog Oh Blog
- Jan 16, 2008 : Sea Sick | PLANET3RRY
- Feb 17, 2008 : links for 2008-02-17 | jon bounds
- Mar 2, 2008 : Making the web » The Benefits of Having Two Sidebars
- Jun 7, 2008 : Peachy » Blog Archive » Länk: addnind av sidomenyer i Wordpress
- Jun 10, 2008 : Why to Redesign your Blog? | ::..::Finding Your Own Good in One Place::..::
- Jun 16, 2008 : The Benefits of Having Two Sidebars | Script Installer
- Aug 16, 2008 : The Benefits of Having Two Sidebars | Making the Web
- Sep 27, 2008 : eleen.com » Blog Archive » Three columns!
thank you 
on Nov 23, 2007
I am dying to learn how to do coding and design a wordpress theme. I just need to find the time for it.
Nice tutorial.
on Nov 23, 2007
why not choose theme that already have 2 columns
on Nov 23, 2007
@ayahshiva : Yes, you can apply the same procedure to a theme that has 2 columns. Just increase the number to 3 in the functions.php file. Then you will have to create three sidebar files and include them in your index.php file. This number also changes in the sidebar file code accordingly.
on Nov 24, 2007
Nice tutorial.
I should try this one.:-)
on Nov 24, 2007
This 4 sidebar themes looks like hero! Great!
on Nov 25, 2007
Thanks so much for this tutorial-I needed an easier version than the one I was using as reference(some folks just make things harder than they have to be)your method really helped me out.
on Dec 6, 2007
@Restlessoul: Please post your technical question in the forums.
on Dec 7, 2007
Your tutorial on how to add a sidebar literally did save me from switching from a theme I love! Thanks!
I have just one question. How can I make it so the sidebar will be on the left side of my blog?
on Dec 7, 2007
@Amr: You will have to use CSS for that.
on Dec 29, 2007
i tried this tutorial with your Silver Light theme, but i get 2 sidebar with th esame content ..
Where is my error ?
Thanks
on Dec 29, 2007
in the widgets section i got two sidebars that i created from your tutorial.. it’s great! Just trying to figure out more or less the same as “amr” is trying to figure.. how to get the bar over to the far right side instead of in the middle of the blog : )
on Jan 19, 2008
great tutorial! thanks
on Jan 29, 2008
I followed step by step…. in index.php there is no ” include sidebar” its somethig with “get sidebar()”.
I’m not seeing the second sidebar
on Feb 11, 2008
Thanks for article! Very easy to understand and I install additional sidebar to my blog in 5 minutes!
on Feb 16, 2008
Thanks.I’ll optimize my wp to sell in ebay.
on Feb 26, 2008
My functions.php looks like this:
”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
?>
How do I change this? Thanks.
on Feb 26, 2008
Again:
”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
?>
on Feb 26, 2008
Sorry. I’ll post the first 2 lines again:
<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(array(
on Feb 26, 2008
@EssEtch: After the line which says
if (function_exists(’register_sidebar’))
just add this line :-
register_sidebars(2);
where 2 is the no. of sidebars that you want to have in your wp theme.
on Feb 29, 2008
i love this tutorial
on Mar 2, 2008
Nice Article. I have a post on my blog about why having two sidebars can benefit the site in terms of ease of navigation and advetisement revenue.
You can find the post here: http://bitfilm.net/2008/02/24/.....-sidebars/
on Mar 17, 2008
Hi, Just following the post, which seemed easy enough. I am using one of your themes Kelabu and wanted to add a right side bar. All was good until the editing of the index.php. I cannot get the right side bar to appear. Can you help me any further?
on Mar 20, 2008
i did whatever this tutorial said but i am getting this error
Warning: array_merge() [function.array-merge]: Argument #2 is not an array in \wp-includes\widgets.php on line 53
on Mar 20, 2008
if i give you theme url then can you please do this for me?
on Mar 23, 2008
I am currently using the Silverlight-01 Theme. (Thank you very much!)
The theme says it’s supposed to come with 2 sidebars. I tried dragging widgets into both
Sidebar 1 and Sidebar 2 under >Presentation >Widgets. However, only the widgets from side Sidebar 2 show up (they show on the right hand side of the screen). How can I make the widgets from Sidebar 1 show up on the left hand side of the screen?
Since I think the theme was meant to have 2 sidebars, I didn’t want to mess with the code and screw it up.
However I did create the files sidebar1.php and sidebar2.php as the article describes.
Thanks for the help.
Chris
on Mar 30, 2008
Thanks for the post, it was very usefull for me during “tuning” my theme
on Apr 6, 2008
excellent tutorial, I needed this for my site to display RSS feeds from multiple places, thanks a million
on Apr 10, 2008
I Love You, Thankyou Thankyou Thankyou.
on Apr 10, 2008
This was exactly what I was looking for but could you perhaps elaborate or do a tutorial on the following for we novices brave enough to attempt this?
“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 :-”
Or even provide a link to where we can find this info?
Cheers,
DBR
on Apr 18, 2008
tried this. messed up my wordpress site. Using wp 2.5. Just lettin’ people know. I’m not sure how successful this will be with recent versions of wp
on Apr 18, 2008
should mention that my blog had NO sidebars to start with.
on Apr 23, 2008
Hi, I am using the GreyLagoon theme and after going through tutorial step by step, I get this error message:
Parse error: syntax error, unexpected ‘;’ in /home/oldwiza1/public_html/wp-content/themes/graylagoon-01/sidebar2.php on line 5
I believe my error may be related to where I post this code:
Can you help me?
on May 6, 2008
I followed your steps exactly and am getting this:
Warning: Cannot modify header information - headers already sent by (output started at /home/tablefou/public_html/momcooks/wp-content/themes/rockinruby-10/functions.php:6) in /home/tablefou/public_html/momcooks/wp-admin/theme-editor.php on line 60
I don’t understand what adding a second sidebar has to do with the header. Any suggestions?
on May 25, 2008
Thanks very usefull
on May 25, 2008
IF you are getting a parse error..make sure you are inserting the right code in sidebar2.php, etc.
Try this:
on May 29, 2008
I noticed this post was published in Nov 2007. Does the trick work with new versions of WP? Or will things go wrong when I update it later?
on May 29, 2008
@Matt: Yes, the modification will work with WP2.5 + version too.
on Jun 6, 2008
Great mod - and all successfully changed although the problem I have now is that the widgets I use in the admin for sidebar 2 do not show on the sidebar 2.
I simply get the same as sidebar one even though the admin says differently.
Thanks
on Jun 6, 2008
forget that - forgot to put a (2) in the second sidebar file. all is well now!
Thanks a lot
on Jun 10, 2008
Fantastic tutorial! Thanks for taking the time to do this!
on Jun 12, 2008
Thank you for this tutorial.
I was checking this for a client and you save my day.
Rui
on Jun 21, 2008
Hi Jai!
I have been looking for a tutorial, however I cannot see the codes you posted in your post I can only see the first part of codes;
“if ( function_exists(’register_sidebars’) )
register_sidebars(2);
?>”
But the rest are just blue boxes with nothing.
Is it a problem on my end? I really need this tut and I tried to view the codes in both FF and IE.
Noobatron..
on Jun 21, 2008
@Noobtron : It was a problem with the way code in my posts was showing. Fixed now!
on Jun 21, 2008
Allright, Thanks alot!
and thanks for he tutorial!
on Jun 26, 2008
thanks a lot.. this is really help full
on Jul 3, 2008
just wanted to say a massive thank you for this article…
it did require a few more detailed changes for my theme, but am delighted to report that after a root around my files, I manage to make the necessary changes.
it looks lovely!
on Jul 5, 2008
my sidebar functions starts like this
if ( function_exists(’register_sidebar’) )
{
register_sidebar(array(
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
}
how to make my sidebar increase??thanks in advance.
on Jul 11, 2008
@Chris:- I had that problem too but looks like that there is a drop down that you can switch between the 1 and 2nd column
on Jul 11, 2008
Question: what about the header. I have a flash header and would like to know if the second sidebar will go under the header if i extend it or go beside it?
on Jul 22, 2008
I dont get this tutorial
I mean I see what you are getting at, but its really difficult to follow… Most of the time I cant find the code phrases you mention in my wordpress files
on Jul 22, 2008
And yeah, modifying functions.php as you suggest causes an error.
on Jul 25, 2008
Hi,
and thanks for this turotial ! I havn’t applied it now, because I have question first.
I have a theme with two sidebars at the right. Is it possible with your method a third sidebar, at the left corner?
thanks in advance.
on Jul 29, 2008
I’m working on a theme has a sidebar, but I can’t see how it is called to pages. There is no file like to be found anywhere.
on Aug 31, 2008
Thank you guy for the tutorial , it’ll really work now in our radio estation.
http://www.estaciondesconocida.cl
Good guy
on Sep 5, 2008
Just like Dan Im not seeing on Idex.php. Instead I’m getting this:
What should I do?
on Sep 5, 2008
the code didnt show up. Im here again:
i get this:
on Sep 5, 2008
sorry I dont know whats going on I cant show the code properly. I get the pho get_sidebar thing
on Sep 7, 2008
@ninku:- i assume you are using Journalist template and i’m also using this template and hard to follow this tutorial. Can u help us?
on Sep 14, 2008
anyone use Flash news theme from woothemes ? I recently bought it a while ago and can not for the sakes of me , get any kind of sidebar running on it.
It’s either you use their already pre-made sidebar or that’s it.
After I tried to follow your directions it seems to work for half a second then disappears.
on Sep 21, 2008
Big thanks from me too!
Very useful - sorted out my third post-only sidebar.
Cheers,
Alex
on Sep 23, 2008
packing sand grain by grain but i told my buddy i would finish this project for him. i hope i do. this tutorial helped me. thanks a bunch!
on Sep 28, 2008
Hi jai,
i am confuse where to put this code because my index.php file is like this
on Oct 4, 2008
I’ve gotten everything to work, except the alignment, as you mentioned might be a problem.
I can’t seem to get my new, 4th, column to sit next to the others, it keeps tucking itself below the 3rd column. I’ve tried extending the fixed width to fit it all, but i can’t get it to move. How do I fix this?
any help would be greatly appreciated.
on Oct 5, 2008
Great, Thanks for helping me.
recently added one new sidebar at bottom