wp-toolbox

If you've been following our series on Basic WordPress Theme Design this post essentially plays the role of part 5. In this post we'll return to the theme we've been building and we'll add some background images as well as some background colors. With one minor exception we'll mostly be working with our style.css and header.php files.

This post will advance our WordPress theme from what you see in this example from Part 4 - to what you see in this one.

I'll provide the two images needed for this part of the project but feel free to use your own if you want to.

Let's get started!

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.

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.

In Part 1 of our Creating a Basic WordPress Theme series we kicked off our custom theme by creating a header, footer and style sheet. These three files make up one part of a barebones theme and offer some of the structure that's needed for bringing the whole theme together.

It's now time to get down to working with some Template Tags and getting the theme actually working. In this post we'll start by creating basic functions.php and sidebar.php files to make our theme widget ready. We'll also create an index.php file that invokes the WordPress loop and starts displaying our posts.

By the end of this post we'll have a working WordPress theme! It won't have any styling and it will lack some things like comments and a developed sidebar but it WILL be working.

When you're first getting started with a WordPress theme there really are only six files that you need. With only these six files you can create a blog that has a consistent header and footer, has a dynamic (widgetized) sidebar, displays an index page, displays single pages/posts and even displays categories, archives and searches.

Yes, most themes consist of more than just these basic six WordPress theme templates but ultimately these extra templates are just the result of customization.

While we will eventually get into creating more customized template files this post, and most of this series, are based on the creation of a basic WordPress Theme. In fact - using just these six basic files we can create a fully functioning theme in a matter of just a few short hours.