How to Make a WordPress Theme (in 5 steps)

Themes Closet — Mon, 30 Mar 2009 09:22:09 +0000

Making a theme for WordPress (or any other CMS) is just like creating a design for a regular website. Of course there are some things that you should consider, but still, the process is the same.

So How to make a WordPress theme? Follow these simple steps:

1. Define Content Structure

Before you open up your graphics editor (like Photoshop), define your content’s structure in a treeForm style (easier to manage). You have to define the main categories of your blog, how many will there be? For instance, there is a big difference in having 20 categories or just 5.

2. Make a List of Features

Just like planning your content’s structure, define what kind of features/plugins do you want to have on your website. Define them by sizes, so that you will know how much stuff you have for your header, your sidebar and your main window. Don’t know what to put in the sidebar in order to fill the whitespace? Consider adding the Recent Comments Plugin.

3. Start Drawing

Now that you know the content for which you need the design, start drawing. One small piece of advice: consider SEO (search engine optimization) and Usability during the design stage. Don’t use custom fonts unless you are planning to use images. Don’t use text effects in Photoshop like “Smooth, Crisp, Strong” on your text, unless you are going to use that as an image. More on SEO in future articles.
Tip: After finishing the design, close it and don’t look at it for ~12 hours. Look at it the next day. Still like it? Good. No? Repeat process :)

4. Convert the Design into XHTML/CSS Code

This is important: Don’t implement the design in WordPress right away. First convert it into a standalone .html + .css file(s). Make it work in all major browsers.

5. Implement the HTML and CSS blocks into your wordpress theme files

Now that you have a working sample of your design, it is much easier to implement parts of it into your WordPress Theme files, located in /wp-content/themes/your-theme/.
And don’t forget: besides editting your theme files, you can also edit WordPress default templates, located in the /wp-includes/ directory.
However, if you’re planning to sell / distribute your theme, don’t forget to provide instructions on what default templates you tweaked, otherwise the results could be messy.