WordPress Custom Theme

There are several resources out there for anyone to reference on how to create a WordPress Theme from scratch, including my favorite; How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial. This is the article I first read really to learn the process from the ground up, so kudos to Ian Stewart for doing such a thorough job of explaining the specifics. That said, while the code in this tutorial is the basis of my blog theme, I pretty much poured through every single line and completely changed it to suit my needs.

One thing is worth mentioning here; I did spend a lot of time looking at “theme frameworks”, including the one referenced in the above article.  But in the end, I’m not really comfortable with trusting someone else’s work, or worse, using it and not understanding it.  I’ve really decided to understand from top to bottom how to custom theme WordPress, and again, Ian’s article so far is my favorite.  It takes you through the entire process, and even gives a link to the code to download.  While it may not be written for WordPress 3+ and the new theming features, for what I needed to do here it was perfect.  Perhaps Ian will update it with support for the new features soon.

So this post won’t be about specifically how to code one up, but rather the process that I used, and the process that maybe you should think about using, to create a new theme:

1. Pay attention to the current state of WordPress. At the time that I wrote this, latest version just added lot of features that affects some of the process of theming.  I don’t actually use any of these features on this site, but I did take the time to understand what they were and if I needed them before I went into development.
2. Plan out what you intend your blog to be used for. A photo blog will have different design goals then say, a blog that will mostly be written articles and fewer images.
3. Decide on how you plan to blog. This might seem trivial, but, in the case of my blog, I’m the only one that is going to ever post to it.  This meant that there were certain features that I didn’t need in my theme, such as an author archive or even any kind of author label on the content as every article published is written by me.
4. Decide on how you plan to display articles. My blog is designed around the idea that only one article at a time is displayed on any given page.  That’s not always the best way to display a blog, for example if there are multiple authors, or if you want to display links to more than one article on the front page.
5. Work with a formally trained designer. This is key, and overlooked too often.  You want to work with a designer that is able to listen to the way you want your blog to work, look at some other blog templates to get an idea of what needs to be designed, and then execute on a bespoke design for your blog.  The design should be delivered in PSD format with all of the pages designed in grouped layers. Any fonts used will also need to be purchased, so that you are legally displaying them on your site.  Here is an excellent resource for communicating to a designer the different parts and pieces of a WordPress blog theme.  If your designer understands CSS, all the better, as you can also deliver to them the WordPress CSS that needs to be styled.   Here is a screenshot of my blog theme in Photoshop.
6. Make sure you’ve got all your tools and services identified, licensed, and up-to-date.  Each developer is different, but I use the following tools: Adobe Photoshop, Eclipse Helios, Firebug, Pixel Perfect, XAMPP, Subversion, FileZilla, Dreamhost Web Hosting, and Windows Live Writer.
7. Mockup your design outside of WordPress onto a prototype site using web standards, and test the markup and css for compliance. You do this so that you can test the basic layout across all the major browsers as well as make sure that your site design lays out properly before attempting to get it into a theme.  The markup for a theme is complex, as the layout gets broken up into a series of PHP files, if you don’t have your theme layed out before hand, you can spend a lot of time chasing layout issues that may not have anything to do with WordPress.
8. And finally, build two versions of your theme; a local/test version on a separate install of WordPress, and the actual live site.  The local test version allows you to test changes, test blog posts for accuracy, and in general, experiment with plugins and other changes you wouldn’t want to implement without a sanity check.  Happy Theming!