WordPress Theme: Part 8

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://hey.georgie.nu/
Description: My first WordPress theme
Version: 1.0
Author: Georgina
Author URI: http://hey.georgie.nu/
*/

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

Now I am going to be using a very basic container template – a very, very simple layout. The CSS I am using is below. 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 working WordPress theme.

Please note that there may be default functionality missing from this theme as it is intended to only serve the very basics without the use of another theme as a base. Refer to the default themes for some default styling, and the functions.php in another theme for some core functions.

Credit to Hey Georgie would be much appreciated if you find this tutorial useful.