You can easily create a custom theme template to have alternate sidebar layouts.

This post is part of 30 WordPress hacks in 30 days.

Whether you’re installing a new WordPress theme or creating one from scratch, changing the sidebar seems to be one of the first things you do. Like most things in WordPress, you are only limited by your imagination. Different themes have different sidebar layouts. You can have one sidebar, or two, or even three or four. You can have one sidebar on the left, or right, two on the left or right, or one on each side.

How WordPress Pages Work

If you’re going to learn how to hack up your sidebar – I have to teach you how pretty much all WordPress pages function first.

From the WordPress Codex, let’s look at the world’s simplest WordPress index page –

Basically (in code) this says, “get my header, get my content, get my sidebar, and last get my footer”. Those are pretty much the 4 major areas of every WordPress page. Also, as I previously said – those 4 areas can be defined literally any way you want. WordPress uses a templated system, and the reason that it uses “get_sidebar” in every single templated page is so it gets the SAME sidebar content for each and every page. That way you define a sidebar (or header, or footer) ONE TIME, and every page on your blogs shows it the same.

Where is MY sidebar file?

By default “get_sidebar” gets the “sidebar.php” file from your theme directory. As of versio 2.5 of WordPress, you can also specify a particular sidebar file to be included. That’s probably not the case with your theme, most of the WordPress themes available were created before 2.5, and they usually have one sidebar file that includes additional sidebars either by div tag or another included file.

How is a sidebar coded?

Like I said before, when WordPress runs “get_sidebar” it looks for the file “sidebar.php” in your theme directory. That file then usually contains blocks of code to retrieve sections of information, like your blogroll, categories, archives, pages, etc. Each block is laid out in (html) “list ordered fashion” nearly always something like this –

Each theme styles sidebars and sidebar sections differently, with different font sizes, backgrounds colors, borders, spacing, and more in the theme stylesheet – but each block in the sidebar is written in that same code format.

What About sidebar widgets?

Widgets were added in WordPress 2.x so people wouldn’t have to muck around in the code anymore. A “widget” is basicly just a block of code that does something. Like using a widget to display categories, pages, or a search box. Widgets are great, because you can just choose the ones you want to enable and “save”. To use widgets in your sidebar, your sidebar.php (or other sidebar files) has to be “widgitized”. Read “widgitizing themes if your theme isn’t already widgitized.

How do I hack my sidebar layout?

There are two extremes to this. Most people would just change their theme until they find the page and sidebar layout they want. Web designers and coders would probably just rewrite the theme HTML and CSS code to their liking. Most people I know are somewhere between the two. They don’t want to change their entire theme, but they aren’t techie enough to be able to rewrite all the code themselves. To go around hacking in your sidebar code – I’m going to assume that you already have at least basic HTML and CSS skills.

This post isn’t about adding blocks of content or widgets to your sidebar, it’s about hacking the layout of your sidebar(s). For instance, I’m a big fan of the three column layout, with the content on the left and 2 sidebars on the right. Awhile back I installed a forum on this blog, and the main content area wasn’t big enough to accomodate it. I wasn’t about to change my theme just to change the sidebar layout…so this is what I did.

The first thing I did was download a copy of my “page.php” file.

Next I added the code to the top of the file to turn it into a template file –

Then I removed this line –

and I replaced it with just the code to display the left sidebar. I saved it as “forum-template.php” and uploaded it to my theme directory. Then in my WordPress dashboard, I went created a new page and used “Forum Template Page” for the page template. Once I save this page, I will have created a custom template page for my forum that just displays my left sidebar. This opens up the content section of the page to be large enough to accomodate width of the forum. I could have used the right sidebar instead, or just had no sidebar at all (only a header and footer).

You could create multiple template that use an alternate sidebar structure, and “include” those pages by using code like this –

just change the name of the file to the one you’re using. You can have as many template files and as many sidebar files as you want, I would just keep it to a minimum so you can keep track of them all.
Have you created custom sidebary layouts? Comment now!