A Path Less Taken

WordPress is a very powerful blogging and content management system. I have used it for every blog I’ve ever hosted and now is the second time that I decided to try my hand at creating a WordPress theme. Don’t ask me why, but each time I start to do this I decide to start from scratch. I know, I know, you’re not supposed to do that. The reason I do it is because I want the theme to be 100% stuff that I want and 0% stuff that I don’t want.

The problem is, there is a fair amount of “stuff” that at a minimum you need to make a fully functional theme. This is where my plan usually ends with me UTTERLY bored with the process and abandoning the task to pursue something more interesting. I think it’s high time that I solider through and get at least one done. To that end I’ve decided to track my progress through the creation process. The idea is once I’m done you and I will have the “definitive” minimalist’s guide to creating a WordPress theme. Here’s hoping that we both survive the experience!

So let’s start out with the basics. I’m going to assume the following:

• You have a basic understanding of PHP, XHTML and CSS. This is not required to replicate what I’m doing, but it may help you make sense of it.
• You have WordPress installed and know how to obtain, deploy and activate themes.
• You have the patience of Job and a healthy sense of humor.

My approach will be to divide the guide into small bite sized sections scattered across multiple posts. The idea being to keep the content in easily understandable chunks of material. Having said that, let’s dive right in.

WordPress stores themes in the blog\wp-content\themes folder where blog\ represents the home directory of your blog. You can navigate to this directory and you should see a list of directories representing the themes that you have downloaded. If you go to the Appearance menu on the left of the WordPress admin dashboard and chose the Themes option you should see a theme for each folder in that directory. The first thing we will do to get started is create a new folder for our theme. I’m going to call my folder welcome as I’m building the Welcome theme.

After we create the welcome folder we still don’t see the theme in the list of available themes. This is because all WordPress themes MUST have 2 files to be displayed here. These are style.css and index.php. For now we simple create a text file in the folder and rename it index.php. We won’t put anything in it until later, but it will eventually be a very busy file. We also create the style.css file and open it for editing. We will add the following text to the file.

1
2
3
4
5
6
7
8
9

/*   
Theme Name: Welcome
Theme URI: http://www.legendrefamily.org/welcome/
Description: Welcome is a custom built 2 column theme for Wordpress.
Author: JJ Legendre
Author URI: http://www.legendrefamily.org/blog/
Template: 
Version: 0.0.1
*/

This must be included at the very top of the style.css file. WordPress reads this block of text and if it is structured appropriately uses it to populate the theme selection admin screen. If you save style.css and go to that screen you will see the Welcome WordPress Theme version 0.0.1 with a gray box where the preview image would be. Don’t worry, eventually we will get around to that. For now you can click the preview button and you will be rewarded with a blank preview of your blog. Don’t worry, we’ll get around to adding content too.

If you have followed this far then congratulations! You can take a break and get a frosty carbonated beverage. Next time we will discuss how WordPress actually gets that shiny new content to display in our humble little template.