If you’ve already got some design chops and a WordPress blog, but you find the idea of turning it into a WordPress template a bit daunting, you’re not alone. Creating your own WordPress theme is actually easier than you might imagine, and although some PHP-fu is certainly helpful, you don’t need to be a PHP rockstar to pull off an amazing template design.
Creating your own WordPress theme will allow you to break out of free (or commercial) templates that mean your blog invariably looks just like hundreds (if not thousands) of other blogs out there using the same theme. Plus, once you’ve created a few and feel pretty comfortable, you can potentially take on paid work customizing WordPress templates, create commercial templates to sell to people less brave than you, or offer free templates on your website as a way to draw traffic to your blog.
Getting Started
First things first, if you have something designed already, I strongly urge you to code it out into (X)HTML before even looking at a WordPress theme tutorial. Trying to wrangle style sheets while trying to grok the theme structure might be a bit much, so you’ll be ahead of the game if you’ve already got your design and (X)HTML coding done. (If you’re unsure about how to code a table-free layout, using only CSS, check out our article, Making the Leap to All-CSS Layout.)
One thing to keep in mind as you’re slicing and dicing your design and beginning your layout coding, there are some commonly used CSS element names in most WordPress themes that you may want to use in your code. Chance are, you’re not going to be creating every single template file from scratch, but rather, reusing a sample or tutorial template. Keeping the element names consistent will make this much easier in the long run. The template classes often used are:
- #wrapper (holds the entire layout except the footer)
- #header (header part, including top page navigation)
- #content (container that holds your main page content and sidebar)
- #left-col (for the posting area, comment section and respond section)
- #right-col (your sidebar)
- #footer (footer)
Quick Note on CSS
Notice that we’re using element ids instead of classes in the list above. This is because classes (such as li.foo or .foo) are meant to be reusable. CSS id elements (such as #foo) are only used once in a page, and since these primary elements are never re-used on the page, we use ids instead of classes. Using ids instead of classes will make inheritance much easier and will speed up your development time.
Just as a reminder to CSS-newbies, if you have an element defined with an id (as opposed to a class), its very easy to control large groups of child class elements. For example, something like this:
[source lang=’html’] [/source]To apply a style to all of the list item elements inside of the div with the id of “nav”, you simply use this:
[source lang=’css’]#nav li {
color: white;
}[/source]
This would turn all of the text in your list items elements white. You can further define specifics by combining ids and classes, like:
[source lang=’css’]#nav li.widget {color: green;
}[/source]
That will cause the text in all of your list items with the class of “widget” within the “nav” div to turn green. Easy, right? I bring this up here (and my apologizes to anyone reading this who already understands the relationship between id and class) is because your WordPress HTML/CSS will be much cleaner and easier to work with if you take this approach.
Moving On…
While I could spend the time writing my own tutorial from scratch here, a few other people have already written ones that kick the crap out of anything I could come up with, so I’ll leave the actual nuts and bolts to them. A few tutorials really stand out from the rest. Some of these tutorials are pretty complicated and involved, while others work with only the basics to avoid confusing the reader with too much information.
How to Create a WordPress Theme from Scratch, brought to you by NetTuts, does exactly this, taking a very simple approach that may be particularly helpful with people still perfecting their CSS-fu. At the end of the tutorial, you end up with a plain, but functional, place to start that includes all of the basic functionality your blog will need, without overloading it with design elements that might be confusing.
How to Create a WordPress Theme from Scratch, brought to you by ThemeTation, is an incredibly comprehensive tutorial that starts with actually designing, slicing and coding the PSD file. It might be a little much for someone who already knows how to slice and dice their PSDs into submission, but part 3a starts at actual implementation into WordPress. While this tutorial is a bit long, it gives you a start-to-finish walkthrough that may be very helpful to some.
So You Want to Create WordPress Themes, Huh?, brought to you by WPDesigner, is a bit of a middle ground of the first two tutorials listed. It’s very comprehensive, but it assumes that you’ve already got the layout slicing mostly covered, so the real focus is on WordPress theme structure and functionality.
There is even a three-part video screencast tutorial available on the CSS-Tricks website. Pack a lunch, as the complete series is over two hours long, but Chris does a great job addressing theme creation from start to finish. They also provide the demo theme created in the video as a download, so you can play along.
A Word on Widgets
Plugins are arguably the best part of WordPress. Chances are, if you want your blog to have some special feature or function, someone has already created a plugin that does it. Not all plugins are widget-ready, but the ones that are usually use the same CSS containers, so that they will fit seamessly into your page design. (Not all widgets do this, which can be a pain in the ass, but you should plan for the standard and fix the ones that don’t comply.
The standard WordPress sidebar widget CSS looks something like this:
[source lang=’html’] [/source]Because this is a semi-standard format, you might want to consider coding your HTML in this way, so you have a better chance of widgets fitting into your site’s style right out of the box. It won’t work every time, but it often does, and I wish I had realized that when I first got started.
Next Steps
As usual, I tend to recommend that you actually follow the steps in these tutorials, one by one as you go. I’m a hands-on learner, so nothing makes information stick in my brain better than actually getting into the muck of it.
Personally, when I learned to make WordPress themes, I started with the simplest tutorials listed above, and then opened the default theme that comes with WordPress, copied it, installed my new copy under a new name, and used that as the place to start. Once I felt pretty confident there, I poked around in some of the more complicated themes, to see how they did what they do. Start simple – don’t try to conquer the world of WordPress your first time. The more comfortable you get with the structure and functions, the more great ideas you’ll have on what you can do with your blog.
When you’re ready to get more advanced, check out the WordPress Codex, that explains what each function within WordPress does, usually with detailed examples and documentation. If you start to get fancy with your WordPress queries, specifically with regard to specifying posts from only one (or more) categories, or all posts from one (or more) categories except the one you specify, the Template Tags – Query page in the codex will be your new best friend. The forums are also a great place to get answers to a specific question.
