FAQ: “How do you build your WordPress themes?”
This is probably the single most frequently asked question that arrives in my inbox, or elsewhere. And for good reason, I suppose. Seeing how I’ve been building sites on top of WordPress exclusively for about 3 years now. There are many different routes you can take when building a theme, and I’ve pretty much streamlined my method over the past couple years. Granted, there are always exceptions and I’ve found that I can’t work from a base template. Instead, I build “themes” from the ground-up, but with a little help. Here’s how…
First, a Little Clarification
I only use the word “theme” because that’s what WordPress calls them. In fact, I’ve only built one theme to date. That being the soon-to-be-released WicketPixie. For the most part, I design and build unique sites for individuals or companies that are used for their sole purposes.
The Starting Point
Once a design has been signed off on, it’s time to move to the cutting board. At this point, WordPress hasn’t even crossed my mind. I build out XHTML/CSS templates for however many unique layouts are going to be needed. For the most part, this includes the homepage and article/post templates. This is where I have a bit of a head start, in that I use my Barebones Stylesheet as a base and build from that. Since its release, my Barebones Stylesheet has evolved into a full directory hierarchy with multiple stylesheets – a re-release is in the cards, so stay tuned for that. Once the templates are complete, I normally upload them to my dev server and have my client give them a once over before proceeding to building out the theme.
Now, The Fun Begins
Honestly, having the static templates turn into a working theme is my favourite part of any project.
At this point, I have a local dev site running where I begin to create the templates that make up the theme. First, I create the new theme’s directory in /wp-content/themes. I then make a copy of my template directory and move everything into the new theme directory. The theme directory looks something like this…
- css
- images
- home.html
- post.html
WordPress requires that index.php and style.css are present for a theme to be activated, so there’s still a bit to do before I open a browser and start testing. First thing’s first, let’s get index.php and style.css in place. I simply create a blank file named style.css and paste the snippet that’s required with the theme details. That’s all that style.css contains, since I keep all of my main styles in /css/screen.css. index.php is another story entirely, though. After duplicating post.html, I rename it index.php and open it for editing. I use TextMate for text editing and have a set of snippets which is essentially an extension off the WordPress Theme Bundle to place the necessary template tags. Prior to using TextMate, I used to open up the various includes from the default template and snatch the common template tags out of it. Things like and , etc.
Once all of the common template tags are in place, I start creating the includes that make up the theme. Pulling out the header portion to make header.php, and likewise for the footer and sidebar. Before I save my index.php again, my theme directory now contains the following files…
- css
- footer.php
- header.php
- images
- index.php
- home.html
- post.html
- sidebar.php
index.php is now in rough shape, with huge chunks of code taken out to make up the includes. All three of the main includes (header, sidebar, and footer) can be included by WP template tags. So where the code once was, I place the include calls – , , . Now index.php is saved and the theme can be activated.
There’s actually one step I skipped there, for the sake of keeping things more straight forward. Before saving index.php, I update any image paths so they are relative to the theme directory instead of the site root. To do this, I use the template tag.
The last step before building out the rest of the templates, is to add The Loop. Since this is based off the post template, I use a pretty standard Loop which calls things like the post title, date posted, content, comments, etc. Again, referring to the default theme is a good starting point.
Building Out the Remaining Templates
Now that index.php with accompanying includes is in place, the theme is functioning. I’m able to see the “Hello World” placeholder post and click-through to the permalink, browse the category index and even search. But everything is laid out exactly the same. This is where I start building additional templates off index.php and customizing their layout accordingly. Sticking to standard templates that WP automatically recognizes, I typically end up with…
- 404.php
- archive.php
- comments.php
- css
- footer.php
- header.php
- images
- index.php
- home.php
- page.php
- search.php
- searchform.php
- sidebar.php
- single.php
You might have noticed that my original XHTML templates are now gone. At this point, I no longer need them as I’ve built the dynamic versions.
The Bulk, Done
From here, each project takes a different path as they all have their own specific requirements. But until now, I follow the same steps to build out the basic theme each and every time.
I’m sure some of you are surprised that I don’t have a base theme that I build from. Honestly, pulling out code is more work than inserting. Especially when using an app that supports tab-triggers, like TextMate. I type “wploop”, hit tab and the entire WP Loop is laid out for me – perfectly indented and everything. I should really do a screencast and show my coding in action, shouldn’t I?