In our last few posts we walked through the creation of a basic WordPress theme. It wasn't anything pretty but it did manage to display our most recent posts and our blog's sidebar. In this post we'll be using CSS and some HTML to create a header, footer, and main body for our new theme.

We're going to be keeping things very simple as we continue along the path to full theme creation so don't be surprised by our choice of primary and secondary colors when setting up portions of the page. Later on we can go back and add a more appealing color scheme but for now it's best to keep things simple.

To start we'll create a basic header that will display our blog's title with a link to the blog's main content. Then we'll move on to structuring the main body which contains the sidebar and posts and finally we'll put together a rudimentary footer.

By the end of this post we'll have moved from a theme that looks like our example from part two to a theme that is a bit more color coded.

Now - to work.

Basics for Structuring a WordPress Theme

Right now we basically have to divide our theme into four sections. We need to identify the header which we'd like to appear on every page, the sidebar, the post body and the footer. In the image below I've taken the basic wp-Toolbox theme (which we're using as an end-goal) and broken it up by colored sections. We already know that we're using four files to compile the theme (index.php, header.php, sidebar.php and footer.php) so now we just need to determine what goes where.

wp-Toolbox Theme with Color Coding

In the image above we've divided the basic theme into three divisions. Red is the header, green the sidebar, blue the content and we'll use yellow for the footer (which isn't currently pictured).

Our first step towards accomplishing this with our theme will be to create some new selectors in our style sheet which set the background color of these divisions.

Using Color to Set the Stage

As I mentioned before we have four main divisions on each page - header, footer, sidebar and content. In our style.css file we have to take a second to actually create rules to properly color them. We do this through the use of a few new id selectors and a small bit of HTML.

First the CSS.

Open up your stylesheet and add the following:
/* Main Structures */
#header { background: red; }
#content { background: blue; }
#sidebar { background: green; }
#footer { background: yellow; }
Save this into your theme's directory and reload your theme - you'll notice that the sidebar should turn a bright shade of green while everything else remains white.

If you've been following this series verbatim your sidebar, right now, is the only part of your theme that has an identifier that your style sheet can work with. What we're going to do right now is add some more of this type of HTML to make things come together.

Adding a Header to your WordPress Theme

Right now we have a header.php file put together that houses all the basic information that our theme needs to operate. The problem is that we're missing the header we want to show to our visitor. That's going to require some HTML, a couple Template Tags and some CSS. To get started we'll open up header.php and look for the opening <body> tag.

After the <body> tag add the following:
<div id="header">
</div>

Because our header is a unique entity that will never appear more than once on a page we use 'id' instead of 'class.' It's also important to set a unique identifier that is easy to remember. This is our header so we'll roll with "header" to identify it.

Our problem right now, though, is that the header doesn't actually have anything in it. Let's fix that by using the bloginfo() tag we discussed back in pt 1 of this series. In pt 1 we used bloginfo() to locate the style sheet as well as to name the blog in our <title> tags. We're going to do the same thing here and we'll add an <h1> tag to make it stand out. To call our blog's name we need to use bloginfo() and call the "name" value like so:

<div id="header">
<h1><?php bloginfo('name'); ?></h1>
</div>

Try saving that to your header.php file right after the <body> tag and reload your Sandbox theme. What happens? You should see something very similar to the picture below. If not double check your code and try again.

Header with background color

Creating some Basic Style Rules for your Theme's Content

So our header and sidebar are currently set - now onto the content. The rules here are basically the same as above. We want to add style to the portion of our site that contains the true content so we've got to open up the file that holds it. In this case it's index.php.

In pt 2 we briefly discussed the WordPress Loop. That's basically the code we're currently looking to enclose - it is, afterall, the main content of our theme. Immediately after the get_header() tag add <div id="content"> and immediately before get_sidebar() add </div>.

The loop itself runs in circles only where the code is shown. What we've basically just done is create a container that encloses every post that's displayed on a page. Later this same container will also include our comment form and posted comments too.

Your index.php file should currently look like this:

<?php get_header(); ?>
<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(); ?>
<?php get_footer(); ?>

Save your file and reload the page - you should now see your posts with a blue background. You may also notice that the post's header has become basically invisible because the blue closely matches the default color for links.

Don'y worry - we'll fix that later.

Creating a Basic WordPress Footer

Since we've already created our sidebar in part 2 we'll jump directly to the our theme's footer. To keep things from getting boring we'll do a bit more tweaking too.

You can probably guess what the code here will look like so go ahead and add the footer using the <div> tags. To take things a little further we'll return to bloginfo() to flesh out our footer a bit.

We already know how to get WordPress to print our blog's title - now it's time to get it to create a link back to the homepage.

We know that bloginfo() can return our blog's title and stylesheet_url but what we want now is the blog's full address. To start let's do the basic portion of creating a link by putting down the text we want to appear as a link - in this case our blog's title.

<?php bloginfo('name'); ?>

The next step involves creating the actual link. Because we know that the above code is going to display our blog's name we can go a step further and build a link right around it.

<a href="" title=""><?php bloginfo('name'); ?></a>

We know the title for the link is going to be our blog's name so we can go ahead and add the <?php bloginfo('name'); ?> into the title value. But how do we retrieve the URL?

It's easier than you might think - we use <?php bloginfo('url'); ?>

Our footer should now look like this:

<div id="footer">
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
</div>

Wrapping it Up

To make things a bit easier I've also uploaded some text files that should give you a sense of what your header.php, index.php, footer.php and style.css files should now look like.

In this post we took a very plain theme and made it ugly. The good news is that despite all that we managed to setup four of the five basic structures we'll need to really get our theme looking professional. In pt 4 we'll put our sidebar where it belongs (next to the content not under it) and we'll reset some of the default style values so that we can take control of some things that the browser is currently managing.

By the end of part 4 we should have the beginning of a solid blog theme in place. Be sure to check back!