Switched from 2 to 3 Column WordPress Theme Easily

I modified my WordPress template from 2 columns to a 3 column wordpress theme today. As more stuff was available to add to my WordPress blog, the long time 2 column theme was limiting the blog growth. Check out the new format as I now talk about the benefits of 3 columns and how I converted it easily.

3 Column Themes

The easiest way was to select a new WordPress theme, upload by ftp to the themes folder and switch to the new theme in one click! But I was trying to find a simple solution to convert from 2 columns to 3 columns without switching to an entirely new wordpress theme, as that would require lots of tweaking to customize the blog again to a familiar feel.

I decided to use CSS to split the sidebar into two columns rather than use tables. I found some amazing 3-column wordpress themes out there and studied the CSS style sheets of these themes to arrive at a simple solution. I created two columns with fixed widths (via div tags) within the sidebar and float-ed them right and left. Fill in the content and its done. I just needed to edit the CSS stylesheet and sidebar.php, nothing more. Remember to backup the original file before tweaking it.

I also got the flexibility to add full width sidebar links for my latest posts and even fitted in a 336px width Chitika unit. I could easily break away from the 2 split css columns by using the “clear:both” tag in another full width div box.

Now I can hopefully attract some Blogads advertisers by placing these ads in a premium top right sidebar position above the fold (which I am told Blogads guys really like). If I manage to get some Blogads advertisers, these large ads can easily align along the side without affecting the links to my search and feed subscription options which I want to stay on top also. I now have more space to fit in the long list of categories and archives links. The scrolling has reduced as I fit in more content is a smaller space.

A disadvantage of the 3 columns is that the effective width of the blog has increased and readers with 800×600 screen resolutions (used by around 7-8% of my readers) now get some horizontal scrolling to do.

Can you believe this was originally a Blix theme which I have heavily customized over the last year. You don’t need a professional web designer to make your design unique, you just need to modify the CSS really well. What are your thoughts on the new wordpress design? Maybe I should add a dash of more color…


  1. Venu says:

    The theme seems to be breaking in IE6 (I am sure many visitor probably are still using IE6)

    Even the theme I have seems to always break (Still haven’t found a way to fix it)

    whenever the content of the main div exceeds the max size, i guess it pushes down the sidebar !

  2. ReviewSaurus - The Techie Dino! says:

    I’m not sure that why you were not using three column theme before. 3 column theme is always useful, as it helps you integrate lots of things in the sidebars.

    I’m surprised that you actually made it look so different than blix ! Great work!

  3. Kyle Eslick says:

    I like it!

    Just FYI, the right sidebar column doesn’t display correctly in IE6 (I know, who uses it besides my work?) :)

    It forces it down below the left column.

    Otherwise, looks great (including the colors)!

  4. Jennifer says:

    Wow… It looks great in a 3 column format. I might switch mine too. I always liked 3 better than two.

    I made mine fluid from fixed a few weeks ago and like that change too.

  5. Gabe says:

    I like the 3 column theme better, because it allows me to look at the latest posts, the caegories, search, subscribe, and view the posts easily.

  6. Alpesh Nakar says:

    Am I missing something? I can see 2 cols only!

    Featured Gadget is overlapping…

    Look forward to see the final result.


  7. milo says:

    I cannot see any background images except of the header, why not switch to fluid layout then? This way you’ll have a range from 800 to 1600 px wide.

  8. QuickOnlineTips says:

    Thanks for your comments. I have increased the width of the main container more. Now it should look fine. Please let me know any further problems.

  9. Meg says:

    A step-by-step how-to for dummies would have been better. People just waste time trying to seek for easy conversions and find a mere stupid comment.

    It isn’t mandatory to share, but if you’re so willing to do it, might as well do it right, so people can take advantage of it.

  10. Hariharakumar says:

    great, I am also trying to do the same,convert 2 col to3 col theme. Thanks for this post.

  11. kiash says:

    Nice tutorial!

Leave a Reply

Your email address will not be published. Required fields are marked *