Roll Your Own

posted in: The Tools | 1

Three words that strike fear into the heart of many a wise system administrator.

And not a few other sorts of smart people, too!
In this case, though, I’m talking about rolling your own WordPress theme.  This is one of those many, many projects that I’ve wanted to get to on that ever-elusive “one day” when I have spare time.  It’s also something I want to ultimately do for FindMyPhotographer.com, which I quietly rolled live a week ago.  I won’t make it in time for the “official” launch date at the end of the month, but maybe I’ll have a custom theme there by year’s end.
In any case, for an open source project, I think WordPress is actually extremely well documented and, relatively recently, the Theme section of that documentation got a make-over, making it more useful and easy to use.  Of course, you can always download a theme, as I’ve mentioned before, but it’s always something that comes close to what you want, and not precisely what you want, developed just for you.  So, toward the end of enabling more people to make their own, personal, custom themes, I’ve got a mess of links for you this week for WordPress theme building.
Now, let’s get started.

First, there’s something I find very helpful, especially for someone who’s new to WordPress themeing; the WordPress Template Hierarchy.  This is a graphical representation of the way the various template files work and work together in WordPress.  If you think of it as a kind of flow chart, it may help you follow how everything fits together.  Also, remember that many of these files are really optional.  In fact, most are, but for a really functional theme, you’ll definitely have quite a few of them, so it’s worth looking at how they all fit together.

Once you get comfortable with that, consider choosing a framework for your theme.
I don’t mean a theme framework, although that is one option, because I feel like that would lock you into all the same traps as just using someone else’s theme, just on a larger scale.  But, do consider using a CSS framework, like Blueprint or Bootstrap.  (If you’re not sure what that means, don’t worry a lot of people don’t.  Just check out 10 Best Free CSS# Frameworks for 2015, which gives you a brief introduction to what they’re about and the front-runners in popularity.)
Bootstrap is one of the more popular ones, in part because it was created by the same folks who created Twitter, but it sure has grown beyond that.  In fact, you can see a lot of the applications for Bootstrap over at 40 Useful Bootstrap Tools and Generators for Web Developers, which even includes a link to a plugin for WordPress to help you integrate the two and starter theme and tools, just so you can see how it’s done!  This can make styling your theme easier, once you get used to how it all works together.  It helps if you’re already familiar with CSS3 or modifying existing WordPress themes, or both.

Another tool you may find useful as a starting point is _s, AKA Underscores.  Underscores is a “starter theme” meant to be the very basic pages needed for a theme, with minimal CSS styling done.  It’s basically a blank canvas for a theme, but that doesn’t really do it justice.  It’s been called the “1000 hour head start” for theme developers and was endorsed by the WordPress theme team at one point, though I don’t know if it still is.  If you want to go that way, which I think is a great idea, you can check out an introduction to it over at WP Tavern and a full-on tutorial for Underscores by it’s creator, Themeshaper.  And, even better, if you want to combine this starter theme with Bootstrap, you can see how with this tutorial; Make a Custom WordPress Theme with Bootstrap 3 and Underscores.me.  (That’s what I’ll probably do when I finally find the time!)

So, there you have it.  Not quite all the tools you need to make a unique WordPress theme, but a very good start!
You’ve got a three-day weekend to use all that with now, so get to it!