The final step here is jazzing up the sidebar, and the styling. I recommend widgetizing your sidebar. The reason for this is that you can easily place objects in your sidebar without having to edit the page.

The styling is going to be very, very simplistic so it’s up to you to edit it how you like.

Sidebar

This is very simple, since the sidebar has already been put into the layout via header.php. I’m going to put this template in sidebar.php:

<div id="sidebar">
. . . 
</div>

The ellipsis represents what you will be putting in your sidebar. This could be anything – site information, links and so on. You can read more on customising your sidebar at the WordPress codex.

Styling

You will need a document named style.css. We will start by inserting some information about our layout at the top of the file:

/*
Theme Name: Blocks
Theme URI: http://heartdrops.org/
Description: My first WordPress theme
Version: 1.0
Author: Georgina
Author URI: http://heartdrops.org/
*/

Don’t remove the slashes and asterisks; and of course edit as you see fit.

Now I am going to be using my tutorial on centering your layout. The layout in that tutorial is the layout that I’ll be using in this one. Go through that tutorial to obtain the CSS – I recommend reading it if you are new to making layouts. Otherwise, the basic code is below, and I’ve modified it a little to include important things in body. Paste it into your style.css file:

body, p {
font: normal 85%/220% arial;
color: #111;
}

body {
padding: 0;
margin: 0;
background-color: #ccc;
} 

#container {
margin: 0 auto 0 auto;
width: 900px;
background-color: #ddd;
padding: 10px;
} 

#header {
background: url('header.png');
width: 900px;
height: 150px;
} 

#sidebar {
width: 250px;
height: auto;
float: left;
padding: 10px;
} 

#content {
width: 610px;
padding: 10px;
float: right;
} 

#footer {
clear: both;
padding: 10px;
}

We have the very basic elements of this theme. I have made a dummy header image, you can create your own or choose not to have one at all. I am going to provide some basic styling for other elements we’ve included in this theme, but it’s up to you to edit it how you like or create yours yourself.

h1 {
font: normal 125% georgia;
color: #444;
}

h2 {
font: italic 125% georgia;
color: #555;
}

h3 {
font: italic 115% georgia;
}

.postmetadata {
font: normal 85%/190% arial;
}

a:link, a:visited {
color: #555;
}

a:hover {
color: #999;
border-bottom: none;
}

b, strong {
color: #444;
}

i, em {
color: #666;
}

Upload style.css and all your other files to your blocks folder and you should have a perfectly working WordPress theme.

You can see a preview of a roughly edited version of this theme. It is just a preview and you cannot navigate the website with that theme but it is meant to show you what it is supposed to look like.

Credit to Heartdrops.org would be much appreciated if you find this tutorial useful.