As a useful exercise in its own right, but also as a way to become familiar with both the HTML and CSS of a WordPress theme, this exercise will turn a 2-column WordPress theme into a 3-column version. Because the default theme is tricky in certain ways, I am using instead Journalist, although the principles described here involved apply to any.

One of the easiest ways to see how a template is structured, is to open the Main Index Template in my HTML editor and replace sections like <?php get_header(); ?> with its template. Once I have done this for header, sidebar and footer (in the case of this theme), I can look at the code of what would be a complete page in my blog. Then I paste the whole thing onto a new page and strip out everything which is not related to the basic page structure. What remains in this case is:

<div id="container">

	<div id="content"></div>

	<div id="right"></div>

	<div id="footer"></div>
	
</div>

Now I can open the stylesheet (style.css) and see how those blocks are handled (I have removed references to fonts etc to simplify this illustration):

#container {
width:950px;
}

#content {
float:left;
width:700px;
border-left:#999 1px solid;
margin:0 0 0 20px;
padding:0 0 0 10px;
}

#right {
float:left;
width:180px;
border-left:#999 1px solid;
margin:0 0 0 20px;
padding:0 0 10px 10px;
}

#footer {
width:700px;
border-left:#999 1px solid;
margin:0 0 20px 20px;
padding:5px 0 5px 10px;
}

The whole structure is held within the 950-pixel container block. There is no header as such, just an h1 tag. The content block is 700 pixels wide and the right is 180 pixels wide. Both have 10 pixels left-padding and 20 pixel left-margin. There are also two 1-pixel borders, so the total width of the layout is 700+10+20+180+10+20+1+1=942 pixels, leaving 8 pixels as a right margin.

180 pixels is a fairly common width to use for a sidebar, so we shall stick with it. The new sidebar will therefore need 180+10+20+1=211 pixels. To keep this illustration simple, we will not change the overall width, so to accomodate the new block, the width of the content block must be reduced by 211 pixels (to 489 pixels). With this design, the footer is not full-width, so it must also be narrowed to 489 pixels and for safety, scan through the stylesheet looking for any elements within the content block which are greater than this width. This theme has a textarea which is 500 pixels wide, so reduce that to 400 pixels.

The easiest way to create the second sidebar is to open the original in your editor. Since we are only working on the structure right now, we can ignore the content. All we need to do is change the <div id=”right”> at the very top of the file to <div id=”right2″>, then save it as sidebar2.php. FTP the new file to your server into the theme directory and CHMOD 666 it for editing later.

To recap, in the stylesheet we have changed #content { width:700px; } to #content { width:489px; }, textarea { width:500px; } to textarea { width:400px; } and #footer { width:700px; } to #footer { width:489px; }, we have created and uploaded sidebar2.php. Since we have created a new block - #right2 - we need some styles for it. Again, since this is about structure and not design, locate the block of #right parameters in the stylesheet, copy and paste them below their original position and make them all refer to #right2 thus:

#right2 {
float:left;
width:180px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
border-left:#999 1px solid;
margin:0 0 0 20px;
padding:0 0 10px 10px;
}

#right2 h3 {
font-size:14px;
margin:20px 0 5px 0;
}

#right2 a {
color:#222;
text-decoration:none;
border-bottom:#ccc 1px solid;
}

#right2 a:hover {
color:#222;
text-decoration:none;
border-bottom:#777 1px solid;
}

#right2 ul {
list-style:none;
}

#right2 ul ul {
margin:5px 0 0 10px;
}

#right2 ul ul ul {
margin:5px 0 0 10px;
}

#right2 ul li {
padding:0 0 5px 0;
}

Paste the revised stylesheet over the one WordPress is currently using and finally call up the Main Index Template. Scroll to the very bottom and above the line <?php get_sidebar(); ?> add <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>. This is the result:

And with that under your belt you are well on your way to creating your own, original templates.

In case you attempt this exercise using the same Journalist theme, be aware that I cheated slightly. The theme includes a stylesheet called style-ie.css which has a couple of hacks for coping with Explorer’s vagaries and those hacks include dimensions which will need changing in line with this article. Since a second stylesheet is fairly unusual and this article is for the illustration of general principles, I did not want to clutter it with such details.