Add Left Sidebar To 2 Column WordPress Theme

For a programming noob, how easy is it to add a left sidebar to a 2 column WordPress Theme that has a right sidebar? Not easy. The simple reason is, noobs like me don’t think so logically as compared to someone who has the proper training. So I spent the last two days offline just trying to add a left sidebar to this Theme that I had created with a right sidebar. Did I say it was not easy? It is now, once I begin to think logic. Here are some tips you might find useful if you are trying to add a left sidebar to your own WordPress Theme.

Before I begin, left sidebar in this case, is a sidebar on the left side of your contents and not a sidebar that is immediately to the left of your existing one which is on the right.

Think Logic.

If you have been modding themes for a while, you should know that a Theme consist of 4 core components, namely the header, the content area, the sidebar and the footer. All these are then wrapped inside what some call a container, or a wrapper or something weird that takes a little bit of guesswork. How these components appear in your Theme and how it looks depends on how you declare it in your stylesheet and how to “call” up the components when your Theme loads.

Logically, the container or wrapper should be wide enough to contain all these 4 components. So if your content area is 500 pixels wide and your sidebar is 200 pixels then common sense will tell you your container should be more than 700 pixels. Why more? That’s because you must have padding on both sides so your content do not stick to the edge if your container. For noobs, this will be on trial and error basis to get the right width. Pros have ways to calculate. I am to lazy to study that.

Now, when you look at your 2 Column Theme, the contents are separated with the sidebar. That means, the content area can be manipulated independently without effecting the sidebars and vice versa. You would be thinking, how difficult would that be to add another sidebar to the left side. Just create another sidebar php file, declare it in my stylesheet, and then call it up in all the pages I want that sidebar to appear. That should do it. Uh uh. Not so fast.

For one, all your components are already “floated” to the left in your stylesheet. Even your existing right sidebar is floated to the left. Stumped? Think logic.

The right sidebar is an independent component. It has to be floated left and the furthest it can float to the left is next to your content area. If you remove your content, then it will float all the way to the left. You might be thinking you can always change the position of your contents to the right. This will give you space for another sidebar on the left. Wrong again. Doing so will push everything to the right, including your existing sidebar which is sort of leaning on your content area for support to avoid floating all the way to the left. So what is the most logical think to do? Think. Logically.

Since you can’t align the whole content area to the right, let it stay as it is, but “wrap” it. So now you have a content wrapper, or whatever you want to call it wrapped inside the main container, or wrapper. Put your existing content area inside this wrapper. Your existing sidedar will now be getting the support from the newly created content wrapper instead of the original content area. Now you have something to play with.

Inside this content wrapper, you can float your contents to the right. It is now “trapped” inside the content wrapper so it won’t be going anywhere or pushing your existing sidebar with the new position. The newly created left sidebar is also placed inside this content wrapper, floated to the left. Yeahh.. you have a new left sidebar!!

Now all you have to do is to widgetise it, style it and call it up. More confused than you were before reading this post?

Elementary, My dear Mr. Watson. Think. Think logically.