You may have found the perfect theme for you, but after using it for a bit you decide it needs another sidebar. Instead of switching themes completely you can add one yourself. It isn’t for beginners, but if you know how to access and edit your php and css files with a basic understanding of CSS then you should be able to accomplish this just fine. Of course if you have an problems or just want some one else to do it, I am here to help.
For the purpose of this tutorial we are going to use the default wordpress theme as an example. It starts out with one sidebar. In this tutorial we are simply adding one sidebar to the left of the current sidebar, it will not be wigitized so you will need to add your own content using HTML. You CAN make the 2nd sidebar wigitized, it is a bit more complicated then I plan on including here though but you can try this tutorial to give it a try.
Step 1 – make the sidebar
The first file we need to open is the sidebar.php. Now we re-save this file as sidebar-left.php leaving the rest of the code intact. (I use Dreamweaver to make all my PHP edits, but you can use a program like filezilla and notepad if you wish, just re-upload sidebar-left.php into the same place as sidebar.php. Once we have created sidebar-left.php we need to edit it to be a separate sidebar. To do this we are going to delete everything that comes between the first < div > and the last < / div >, see screenshot for details. (your first div may have other properties or classes, ignore those for now.
Now we are going to add something basic to allow us to see the sidebar when we add it- if it is blank then we won’t see the changes. Most sidebars work with a unordered list and h2 headings, so just copy the code below into your ‘sidebar-left.php’ in between the two div’s that you left before.
You can customize this all you want, with whatever you want in your sidebars- but you will need to copy the above for every ‘section’ you want, Like ‘Links’, ‘Buttons’, etc. But for now you can just leave it as is. Now we are going to make the ‘call’ to the sidebar in the index.php file.
Step 2- Call the sidebar
This is one of the easiest steps- simply open index.php and scroll to the bottom, there you will see the call to the sidebar and the call to the footer. Now just BEFORE the call to the sidebar you just type in the highlighted portion on the screenshot. Now upload the sidebar-left and the index.php and refresh your blog to see what has happened so far. (Warning, it will look like a mess because we still need to edit the css to make the alignment and size work.
As you can see in my result screenshot, it placed my new sidebar on top of the first one. Your main goal right now is to find the second sidebar, make sure it shows up on the index page.
Step 3 – Edit CSS to make it all fit
To make this part easier I recommend downloading a plugin for firefox called Web Developer, if you don’t use firefox then this will be a bit more difficult, so get it! With this plugin we are able to quickly see what parts of the CSS we need to edit and where the lines are. Once you have it installed and ready to go, you need to hit the “css” dropdown and choose “view style information” now you will move your mouse over your page and little red boxes will appear, just select an area and a box will appear with the details of that ‘section’. See the screenshots below.
Now depending on your theme you may have a lot of css edits to make, or you may have only a few. Because themes are so varied I can not tell you exactly what to change, some themes will use floats, margins, or even padding styles to specify where the sidebar sits. On most themes you will need to find EVERY instance of the word ‘sidebar’ in style.css and duplicate it, renaming the new one to sidebar2, and also changing the DIV style in the sidebarleft.php to reflect the new name (style/id/class=”sidebar2″)
You will also need to change the widths of your content, sidebars and possibly the main width depending on your theme. Using the web developer css plugin will help a lot in this as you will be able to mouse over sections and see if there is a width property you will need to change. It is a good idea to have one of the sidebars narrower than the other, to save space and to be less cluttered.
Disclaimer: This will work on all themes, some themes will be nearly impossible for a user to do this, as it may have more functions, graphics, and hidden styles that make it very difficult to line up right. This tutorial is for basic themes, for users that are somewhat familiar with CSS and PHP, if you don’t know what you style.css file is, or you don’t know how to access it on your own, then you probably should not try this or offer to do this for others, it is easy to break a blog if your not careful- but if you make a backup of your files you can try everything you want to try, you never learn without trying things.
Let me know if you need any help with this, and if you want me to do this for you just request a quote so I can take a peek at your theme and see what would be involved.