If you've been following our series on Creating a Basic WordPress Theme you should now have a blog that looks something like the example generated by part 3. While the text is probably very different the basic idea should be the same.

In this post we'll add the code needed to take our previous example and make it a bit more like a standard blog theme. Specifically we'll be moving the sidebar to the left of the main content block and we'll be trimming the edges to give the theme a nice set of borders around the outside. By the end of this post our Blog will look less like the previous example and more like this.

This post will mostly be concerned with CSS but to kick things off we do need to add a new <div> block to our index.php file. After that we'll be working almost exclusively with our stylesheet.

Creating a Content Container

In part 3 we covered the creation of the four main portions of our theme. We created a header, footer, sidebar and content block each of which contains stuff that matches it's title.

While each of these is important in it's own right we do need one additional block. In order to make things easier on ourselves we're going to create another container that houses both our sidebar and our content. We'll call this our "mainBody."

Because the sidebar and content divisions are going to be smaller than the header and footer (they'll be floating next to each other). We need "mainBody" to act as a container that is the same width as the header and footer to keep our sidebar and content in line.

To do this we create a new <div> with an id of "mainBody" - you can see that code below.

<?php get_header(); ?>
<div id="mainBody">
<div id="content">
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

Notice the new <div> tag starts just after get_header() and just before get_footer. This makes sure to include everything that's not the header and not the footer.

At this point our index.php file is starting to get a little bit so I'm including this text file for a better look at what's going on.

Now that our mainBody container is in place we can move on to our stylesheet. At this point you can close index.php and open style.css.

Setting our First Rules with style.css

This is where things start to take off!

To get started we'll need to reset some of the styling that governs <body> tags by default. We do this by basically zeroing a lot of stuff out. Looking back at our theme as it currently appears you can see a white line that surrounds the whole page. This is caused by the <body> tags default padding and margin values.

That's right - even before you add styling rules some HTML elements will already have them! We have to fix that.

To start off let's add a section to our stylesheet that will cover native HTML elements (like <body>, <p>, <h1> etc.). To add comments to our stylesheet we simply start by adding '/*', then we add our comment and we finish with '*/'. You're stylesheet right now already has several commented lines in it that were added in earlier parts of this series.

I like to keep my stylesheet tidy so I usually separate my selectors based on id, class and native HTML elements. We'll add a special section for HTML Elements now:

/* HTML Elements */
body { margin: 0; padding: 0; text-align:center;}

With that code we've done three things - we've eliminated the margins, we've eliminated the borders, and we've told the page to center all text by default.

The white space we saw around the border of our page at the end of the last session was caused by one of two things. In some browsers it's a result of an existing rule giving the <body> container a margin, in other browsers it's the result of the <body> container having some padding. Unfortunately different browsers handle margins and padding differently, a problem we'll deal with again and again, so it usually helps to zero them out before continuing.

I also do something special here with the text-alignment for the whole document. In CSS it can be difficult to center some things - again because of how different browsers interpret CSS. One method of getting around this is to simply center everything and then left-align, right-align or justify as you go along. It's simply a method I've adopted after a few themes.

At this point you can save your style sheet and reload the page - the side and bottom borders should be gone (there may still be some separating the header, content, sidebar and footer) and the text should all be sitting at the center of the page. You may, however still be seeing a border at the top of the page. This is a result of some inherent styling that accompanies the <h1> tag we used in our header - thankfully it's nothing serious but it is one more example of how existing HTML entities might change our expected outcomes.

We'll deal with the heading tags when we get around to typography but for no we can leave it be.

Now it's time to align everything!

Centering your Theme within a Browser

There are essentially two things we need to decide right now. First we need to know how big we want our theme to actually be - then we need to decide how big we want our sidebar.

There are a lot of things to take into account here. Older computers tend to have a resolution around 800x600 and that's a definite concern. In the same vein you may be thinking about monetizing your theme - so it helps to have a sidebar large enough to accommodate advertising buttons. Another major issue is your content - a lot of video providers don't offer options for easily resizing their videos.

For the hackingWordPress theme I wanted to be able to include some advertisements somewhere down the line and I also want the ability to post YouTube videos in case I ever need to. That led me to deciding on a width of 900px. This way I can have a large content section and sidebar with plenty of options for content and monetization. Obviously I want my header and footer to match that size so they'll also take on this width.

Because all three containers are going to share the same width I am going to define their widths in one line of code. We do this by naming each selector involved followed by a comma an then the property and value.

#header, #mainBody, #footer { width: 900px; }

At this point you should see that everything has the same width but try loading the page in both Firefox and IE. Notice a difference? In Firefox each of the sections is still on the left hand side of the window. In Internet Explorer you've got nice borders up and down the sides.

To get both browsers displaying the same thing we have to add some margin settings to the code above. To do this we add "margin: 0 auto;" right before "width: 900px;." Using that code we've successfully told our browser that each section should have no top or bottom margin and that they should have an equal margin on both sides. Our new code should look like this:

#header, #mainBody, #footer { margin: 0 auto; width: 900px; }

The only problem now is that our sidebar is still underneath our content. That's the next and last thing we'll fix for this section of the series.

Creating a Sidebar to the Left of your Content

This part has been simplified by the fact that we've enclosed our content and sidebar within the mainBody container. As we mentioned before we want a healthy section for display our post and we also want a good sized sidebar. We're currently working within 900px and after a bit of math I've decided on the following.

I'd like my sidebar to be no less than 260px, that leaves 640px for my content - more than enough. The problem is that if I stick with these numbers there's going to be a problem. If you create an item that's 260px and place it next to an item that's 640px Internet Explorer requires more than 900px in order to make it fit.

I know ... 260 + 640 = 900.

It's a quirky IE thing that we have to live with. To handle it I just subtract 5 pixels from the side that can spare it - in this case it's the content block. We now have the sidebar at 260px and the content at 635px.

Returning to our stylesheet let's add the new rules. The content and sidebar sections should now look like this:

#content { background: blue; width: 635px; }
#sidebar { background: green; width: 260px; }

Save your sidebar and reload the page. Not too bad - we just need to move that pesky sidebar.

The trick to moving the sidebar actually revolves around moving the content - we do that by using the float attribute.

Add "float:right;" to #content and see what happens.

Your sidebar should now be on the left-hand side of your blog! Unfortunately the footer is a little screwy. It's an issue that regularly accompanies floating large items like your content block - to fix it just add "clear: both;" to #footer. Reload your page and you should be a lot happier with what you're seeing.

At this point you can see a full version of our CSS file here.

Wrapping Things Up

At this point our blog theme is really starting to come together. While we're still looking at a lot of primary colors and stark contrasts between parts of the site we're also seeing a more developed theme come together.

In Part 5 of this series we'll move on to making our blog a bit more attractive by adding some background images and setting a color scheme that's more appealing. We're still following the hackingWordPress theme as our target so things aren't going to get too crazy but there will be plenty of opportunity to personalize. To kick things off start thinking about what colors you'd like to use in your blog's theme. You can also head over to the Web2.0 Stripe Generator to create a background image that you'd like to use.