Create WordPress Theme

Tutorial Introduction:

Back in 2005, I wrote a little tutorial for WordPress 1.5 on how to integrate wordpress with an existing website. Since then, with the release of WordPress 2.x, working with WordPress has become even easier. This tutorial is an update to my original tutorial and as it appears under a different name, I want to take a moment to clarify who this tutorial is for.

This tutorial is especially for:

1. People interested in learning how to build a WordPress theme from scratch or, more specifically, for those interested in taking an existing design and converting it into a beautifully working WordPress theme.

2. People interested in integrating WordPress with their existing website. As touched on lightly in my first tutorial, the best way to go about integration, in my experience, is to take your existing website and build a WordPress theme out of it, then apply that theme to your WordPress blog and voila, if all has gone well you have a perfect integration. It can require some handiness with CSS, but the principles covered in this tutorial will get you well on your way.

Extra Note on WordPress Integration:

As questions on integration are the ones I receive most often, I’ll take a few more moments to make sure your options are clear. In my experience, there are two ways to integrate WordPress with an existing website:

• One, you can install WordPress, write your posts, and then use PHP or Javascript to integrate the feed directly into your existing design. The drawback with this is if you want to include any links in the feed (for example, to read the rest of the post or add comments). If they click a link, it has to take them somewhere and by default they’ll go to your installation of WordPress which will most likely look nothing like your existing website.
• Two, you can take your existing design, tables or CSS, and create a WordPress theme that matches your site exactly. Then, apply it to your WordPress installation and you can now have a “/blog” (or whatever you decide to use WordPress for) that looks and feels exactly like your website. Thus, while it doesn’t actually sound like an integration, the result for your end users is the same: you’ve added the functionality of WordPress without sacrificing your design and now offer your users added functionality with total continuity.

  Note: While you can easily stop at “integrating” a simple blog, WordPress is able to do a whole lot more. For a number of my clients and my own personal projects, WordPress works excellently as a complete CMS (Content Management System), even for sites that look nothing like a blog.

Alrighty, let’s get started!

Step One: Preparing Your Work Area

Prior to diving into the WordPress code, we have a few things to make sure we have all straightened out and ready to go. For this tutorial, so as not to pick on anyone else, I’ll be using my own blog as an example.

Here’s what we need:

1. A Design – While some folks undoubtedly code their designs directly into a WordPress theme, we’re going to make things a bit simpler and start with a design coded in beautiful HTML and CSS. For your first couple of integrations (or your first and last), I recommend starting with your design already coded. It doesn’t have to have all the WordPress features added in (as you’ll see in my example). The most important thing is to have the layout setup and ready to go. While you can do a design in tables, I highly recommend using CSS. For this particular example, we’ll be starting with a finished design, coded in CSS and XHTML.
2. A WordPress Installation – Be sure you have the lastest version of WordPress installed and we’re ready to go.

Here’s what I recommend in addition:

1. Experience with CSS – While not required, having a basic knowledge of CSS will go a long ways in making those extra changes and customizations that come to mind as you assemble your theme. For the sake of this tutorial, I’ll make no assumptions about your knowledge of CSS, but will encourage you to have a knowledge nonetheless ;).
2. A Sense of Humor or Patience or Both – Occasionally when dealing with WordPress and CSS, things don’t go quite as expected. For those of you familiar with CSS and/or PHP, you know that it can be the tiniest little bug that can make everything seem to go crazy. When the bugs pop up, get out the fly swatter and patiently take care of it or, if you’re unable to squash it, call in the exterminators.

Alrighty, now that we have that covered, let’s reveal our test subject. Click the image to load the HTML.

For the sake of this tutorial, I’ve left the design “incomplete”. The layout is finished up, the colors have been selected and a lot of the options have been decided on, but where we might normally take a bit of extra time to put in examples of the WordPress elements, I’ve left them intentionally blank. As we continue through the tutorial, we’ll add them in and have a chance to learn a bit about “template tags” ;).

[Note: Those familiar with CSS can skip this paragraph] – If you take a look at the source code, you’ll notice that other than the content, there’s not a whole lot of code to look at. You can especially notice this if you hunt down an old site that uses <table>’s and compare the code. This is because the layout has been built in CSS (Cascading Style Sheets). That means that instead of using “tables” to lay out where everything goes, the design has been separated from the content through the use of an external stylesheet. While I’ve done a number of integrations for clients with table based websites, being able to work with CSS makes things a whole lot easier.

Alrighty, now that we’ve had a chance to look at our test subject, let’s take a bold step forward and begin building our theme! First though, stand up, stretch, get a glass of water and then sit back down. Too many hours at the computer without a break and we’ll end up looking like Quasimodo.

Step Two: Preparing Your Theme Creation Playground

Now, while there are some out there who know all the WordPress template tags off the top of their head (I’m not quite there yet), for the rest of us it helps to have a place to start. In a best case scenario, you just pull out your already prepared WordPress theme, loaded with all the features you like to use, and simply replace the existing style sheet with your own. But for the sake of this tutorial, we’re going to work with the good old default WordPress theme (Kubrick) prepared by our good friends at BinaryBonsai.com.

What we’re going to do is take the default WordPress theme, clean it up, and then use it as a starting point for making our own.

To get started, copy the “default” theme from your WordPress installation (located in wp-content/themes/) and paste it in a new folder along with a copy of your design. You do these steps anyway you like, but I find it helps to keep things organized. Here’s how my folder looks:

As you may have guessed, to avoid any confusion when it comes time to upload, I’ve renamed the “default” theme to “blog_theme”.

The pretty flowers, by the way, are from a series of photos I took during a 2 month volunteer stay in the Dominican Republic early in 2007. Not typically a “flowers-on-my-desktop” kind of developer, I had to make an exception for these ;).

to be continued