Prelude
Part 1: Setting Up

Let’s run through a checklist of things you should’ve done by now:

• installed WordPress in a web or local host
• imported content (whether from another blog or dummy content downloaded from the web) to your new blog
• chosen, downloaded, and installed a blank WP theme
• went through the PHP and CSS files in your blank theme to familiarize yourself with its setup

If you have done these things, you should now have a blog that looks similar to this:

Our new blog running the ET-Starter theme with the WP .XML Test Data Import dummy content

Remember when I said in Part 1 of this series that one of the great things about the ET-Starter theme is that you can easily toggle between single, 2, and 3-column layouts? As you can see above the default layout is 3-column with the main content in the middle. We want to change to a two-column with the content on the right.

To do this log into your WordPress admin, and click on “Theme Options” under the “Appearance” menu on the left. Check “Yes” next to Would you like a two column theme? and select “content-right” for the Main Content Order option.

Save changes, and your blog should now look like this:

Now, let’s set the dimensions using CSS. Let’s first look at the dimensions of the ET-Starter template. To do this, open the theme’s style.css file and compare it with the theme itself using Firefox’s nifty Firebug extension or using Chrome’s “Inspect Element” feature.

(For this tutorial I will be using Chrome’s “Inspect Element” feature rather than Firebug because I prefer Chrome over Firefox. Chrome’s “Inspect Element” feature is similar to Firebug, but with less options. However, Firebug is an indispensable tool for any web developer/designer and I recommend that you familiarize yourself with it!)

Right-click/control-click on your theme while viewing it in Chrome, and click on “Inspect Element” on the little pop-up menu. A window should slide out from the bottom of the page. While you are in the “Elements” mode (which I believe is the default), run your pointer over the different lines in the lines of code on the left and you should see that the different parts of the window get highlighted while you’re doing this.

By now, you have probably figured out that when you mouseover the different CSS elements, the element on the page that it corresponds to gets highlighted.

You can choose to go more or less detailed into each element and its sub-elements
by clicking on the little arrows at the left of each line.

With this handy feature, we can now see that the content of this blog theme has the CSS class of .content.content-two-columncontent-right while the sidebar has the class of .primary-sidebar.content-two-columncontent-right.

Now take a look at the style.css file. You will see that .content.content-two-columncontent-right has a width of 73% (line 112 on the original file) and that .primary-sidebar.content-two-columncontent-right has a width of 24% (line 178).

We can also see that the “container” ID, which acts like a “wrapper” around the entire the blog, has a width of 940px (line 49).

Now, the way that I want the theme to look is as follows:

So all we need to do is replace those numbers with the new in style.css:

#container should now have a width of 870px (line 49)

.content.content-two-columncontent-right should now have a width of 600px (line 112)

.primary-sidebar.content-two-columncontent-right should now have a width of 240px (line 178)

Save the file. Your theme should now look like this:

Not much of a change, I know. But we’re slowly but surely getting there!

Next up: the header!

Now we get to the nitty gritty fun: developing your own WordPress theme! To make things a bit easier on myself — and for my readers so that they can see a live sample — I will detail how I built the theme I am currently using:

(From now on I am going to assume that you have some knowledge of HTML and CSS. If you do not, I really, REALLY recommend that you learn! I truly believe that even a BASIC understanding of HTML and CSS will help you out tremendously as a blogger. Go check out W3Schools for some great tutorials.

What about PHP — the language that WordPress is based on? You do not need to know PHP to build your own theme, but it does make things a lot easier. Go see PHP 101: PHP for the Absolute Beginner if you’re interested.)

There are tons of free tutorials on the web that teach you how to build your own WP theme from scratch, and I invite you to check those out instead if you want a more in-depth, detailed lesson on WP theme development. But since the purpose of this series is to help the everyday blogger, I will try my best to keep things as simple and easy as possible.

First, you need to set up a testing environment where you make whatever changes you want to your new blog theme without your readers wondering what the heck is going on.

If you have an account with a web hosting company, you can easily create a new database and set up a new WP installation in a subdomain (e.g., demo.geekinheels.com) or a new directory (e.g., geekinheels.com/demo).

However, the easier option is to set up a local test server — off the web and on your own computer. You can do that by using XAMPP (Windows) or MAMP (Mac).

Next, download the latest version of WP at http://wordpress.org/download/.

If you’re using XAMPP follow these instruction for installing WordPress on your local test server.

If you’re using MAMP follow these instructions for installing WordPress on your local test server.

You will also want some content to see what your blog will look like once it’s filled with posts, pages, comments, etc. You can choose to upload an export file from your existing blog, or you can download dummy content. See here for a list of downloadable dummy content (I am partial to the WP .XML Test Data Import).

Now we can finally get crackin’ at the theme! You can choose to start from scratch…but why do so when working from a blank theme is so much easier?

Look through the list at 10 Blank/Naked WordPress Themes Perfect for Development to find a theme that is perfect for your needs.

For my theme, I chose to go with ET-Starter. It’s not entirely a blank theme, per se, but it gives you the option of easily toggling between single, 2, and 3-column layouts and includes a built-in jQuery drop down menu.

(Note: the ET-Starter website is no longer up, but you can download the theme at http://code.google.com/p/wordpresstemplates/downloads/detail?name=et-starter-1-4.zip)

Now that you have downloaded your blank theme, go ahead and open the different PHP and CSS files using your favorite text editor. As mentioned in the last post in this series, my favorite is TextWrangler, but Notepad++ is another great option.

Take some time to look over the files and familiarize yourself with them. My personal preference is to organize the lines of code while doing this step so that it will be easier to work with as I am customizing the theme. Because isn’t this —

Easier to work with than this?

Next up: preparing the bare-bones layout of your theme!