HOW TO: Customize WordPress : Part 2

As promised in Part One of How To Customize WordPress, this time I thought I would attempt to see how simple it can be to tweak an existing WordPress template using some CSS.

A lot of the more frequently used existing blog templates have only a 2 Column design, and are quite narrow at that so trying to get some whitespace and an extra column into one of them is the challenge I set myself.

The Template and The Goal

I said in the last article to choose a template that you enjoyed to look and feel of regardless of it it was actually perfect. For this demo I chose the Almost Spring Template by Becca Wei. It already has a lot of whitespace in it and as witnessed over at Matt Cuttâs Blog it looks good at a wider setting too.

Some tools to make it Easier

OK, I am presuming some knowledge of HTML and CSS for this, but will try to keep it as simple as possible for those who want a walk through.

Tools I use for this:

• Firefox Browser
• Chris Predericks, Web Developement Toolbar.
  Note: Even if youâre not a developer by nature this toolbar offers loads of invaluable tidbits, so I recommend it anyway.
• A Dom Inspector Favelet, from SlayerOffice.
  Note: this is not necessary for this demo but I also find it invaluable for a quick look at the nesting structure to help target elements via CSS. FireFox has itâs own DOM Inspector, but I still find this invaluable for speed, once I know what Iâm looking for.

Letâs get started!

1. Download the Almost Spring theme and then copy it ~ as described in Part 1. Then activate the copy theme in the Wordpress Dashboard.
2. View the site with the new theme activated. Then use the Web Dev Toolbar and go to Information > Display Block Size

   

   This shows the existing main wrapper width to be 750px which is split 520px for main column and 230px for right column

3. Now back to view the same site page, again on the WebDev Toolbar deselect the Display Block Size and this time select Information > Display ID & Class Details. This will show you the which elements the widths above belong to.

   

   a. The main element is #wrapper
   b. The main content is #content
   c. The right column is #sidebar

Now with the two bits of information we have the vague outline structure:

1. #wrapper = 750px
2. #content = 520px
3. #sidebar = 230px

I would like a 900px wide design with the main content = 500px and each of the side columns equal to 200px, so before adding in the third column we should make the overall design wide enough for it.

Changing the Template Stylesheet

In the WordPress dashboard, select Presentation > Theme Editor and select the stylesheet. We know from the above research that we are looking to change the #wrapper width from 750px to 900px so scroll down the stylesheet a bit looking for the #wrapper properties.

Change the #wrapper width from 750px to 900px and save by hitting the Update File button on the bottom right.

Go back to the site and hit refresh, then if you then use the WebDev Toolbar to display the block sizes, Information > Display Block Size again, it should now show the main width to be 900px, but the two inner columns are still the same as they were although there is now a gap on the right side.

OK! The next step is to adjust the widths of the existing two columns to suit what we want:
1. 500px for the main column (#content)
2. 200px for the right column (#sidebar)

So back to the stylesheet and again scroll down until you find these 2 elements and their properties:

That may look a little confusing, but panic not! It involves some hacks for IE and although I don't personally care for that method in the interest of not changing too much (if it ain't broke..) I'll stick with it for this. Basically you don't need to know how or why an exisiting theme works, just follow it's logic and remember that we only need to be concerned with the widths. SO in this case we just reduce all the relevant widths as necessary.

Going by the widths we found in earlier research:

1. #content needs to be reduced from 520px to 500px so reduce all the widths in the content properties by 20px.
2. #sidebar needs to be reduced from 230px to 200px so reduce all the widths in the sidebar by 30px.

Now save again.. and view using the Web Dev Toolbar to check all is still on target, the gap on the right is now 200px just waiting for another column but now we need to do some template tweaks to actually generate that third column's content.

The Non CSS Bit!

You can generate template pages for whatever you like in Wordpress and just a simple include statement to include them. So I want to generate a template page for that Third column to save having to add too much code into an existing template file.

Create leftsidebar.php

In a text editor create a page containing:

and save as leftsidebar.php. The first bit, the PHP bit, is not necessary, but is gives the template a friendly name in your DashBoard list. Upload this file to the \wp-content\themes\almost-spring-3col directory (note your copied directory theme name may be different) and refresh your DashBoard screen, it should now be listed in your themes file list.

Now we need to go to the Header Template file and add the include statement that will include this new template file. Select the Header Template file and scroll down to the bit which shows:

This is where the main content div is opened. There are a few different ways that a left column could be positioned at this point, but I would like to stick with floats as this template's footer is stable with the existing float positioning. This means that the left sidebar will have to appear before the main content. so just before the content div is opened add this line,
<?php include (TEMPLATEPATH . '/leftsidebar.php'); ?>
ensuring that the php file is exactly what you saved it as. This is simply the WordPress include statement that will include your new sidebar

Now we have this:

now refresh the site and view again to check it is including the sidebar content, it should look like this..

The Final CSS

You can now put whatever content you like in your new sidebar template, you could for instance put your adsense code block in there, but whatever you put in it the div id="sidebar-left" has to stay intact. sidebar-left that is the new ID (container) we are about to use to position the column properly. i.e. In the Left Sidebar template this code:

What we want to do is float the sidebar left, before the content and make it 200px wide to fill the gap we have left because this will move the main content and right sidebar over to make the design complete. Fortunately this means that the left sidebar has exactly the same properties as the right sidebar so it is a simple case of copying the #sidebar properties for #sidebar-left, or adding the new rule to the existing ones.

So again select the stylesheet and scroll to the #sidebar properties as above

and add #sidebar-left to all those rules using comma seperation

Now save and view and use the Web Dev Toolbar if you like to check it.

That's it, three columns 200px, 500px, 200px, and you can now put what you like in that 3rd column. If you want to put content in that column and have it match the right column's formatting then anywhere you see a #sidebar rule in the stylesheet just add the dame rule for #sidebar-left.

For example after changing the width of the right column the width of the links in that column are now too wide, they need to be reduced by 30px too, to fit in their new column width, and if you want the sidebar-left links to have the same formatting, in the stylesheet look for the bit that targets the sidebar links..

and change it to:

then to make the left sidebar have same properties add it:

You can do this for any instance of #sidebar code, copy the selector, seperate with a comma and add -left .

Wrapping it up

Targetting other elements in order to change their color, font styles or backgrounds can be done the same with the Web Developement Toolbar to find their existing names first. As long as you just want change aesthetic things like that it's a case of finding the name and then locating it in the stylesheet and making the required changes. It needn't be as complicated as the above, i.e. adding positioning, but I wanted to show how the external tools can make the job easy whatever your level of CSS knowledge!

Enjoy!