Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
25th February 2013

WordPress starter themes: an essential guide

Build and create custom WordPress installs and themes in double quick time with the assistance of starter themes

WordPress starter themes: an essential guide

Starter themes are themes that are great to begin a project with – as the name ever so subtly implies. It really doesn’t matter if you intend to fork the theme and use it as a foundation for your project, and what’s more, it doesn’t even matter if you choose to use the starter theme as a parent theme and build a child theme on top of it. What all starter themes have in common is that they are great starting points, no matter what.

There are obviously things to consider when choosing a starter theme. First of all, you shouldn’t just go with any starter theme for your project. Pick one that has as much in common with your planned end result as possible. Second, make sure you actually have an end result, all too often projects are started without a clear goal in mind. Third, you need to decide wether to fork the starter theme into your own creation, or build upon it with a child theme of your own. The latter is obviously handy since it means that all updates to the parent theme, which is your starter theme, can be applied with minimal risk of issues on your site. It all depends on your goal, and how close the starter theme of your choice is to it to begin with.
Finally, there’s one more thing to remember: anything can be a starter theme. As long as the theme is free for the taking, you could use it as a basis for your project. Don’t get too hung up on how the themes are branded, as starter themes, frameworks, or whatever. Instead, look to the possibilities and how you can save time and effort by taking the head start that is the starter theme of your choice.

WordPress starter themes: an essential guide

_s

underscores.me
_s, or Underscores, is a great starting point for your theme projects. Underscores (which is a lot easier on the eyes than _s in text so we’ll stick with that) is an interesting project. This starter theme is not even meant to be used as a parent theme for your child themes. Instead, you’re supposed to take the code and build something completely different from it. Does that mean that Underscores is a more complicated starting point that the other starter themes in this article? No, not at all. In fact, it is quite the opposite, because while a lot of the other options have a tonne of bells and whistles with their own templating systems and theme options, Underscores keep things simple fairly simple. In fact, it only has one widget area, or sidebar if you will, defined to start with – and just the one menu as well. This means you have less to alter and/or remove when you get started on your project, but it also means that you have more to add should you need more than this.
As Underscores isn’t meant to be used in its original form – you are expected to alter it, including its name – the feature to build your own fork of the theme on the website is welcomed. Sure, you could do a search and replace for all the references to Underscores functions and textdomains, but why bother when the site will do that for you? It’s a nice feature that adds to the general feeling that Underscores is a project worth supporting. Speaking of which, Automattic is the official publisher, which means you can support it in the future as well.
Code-wise, Underscores is pretty straight forward. It puts HTML5 to good use, with nice semantics and proper CSS markup. As the theme is bare as it is, you’ll have to supply your own CSS, but if you need help getting started, there are some simple stylesheets available in the /layouts folder.
The template files are easy enough to understand, with layout separated from output code in a logical manner. Underscores puts the get_template_part() function to good use here, making sure that you can reuse as much of your output as possible. When you’ve acquainted yourself with the code, you’ll see that it is properly commented, making it easy to understand what does what. If anything, there’s too much commenting here, but you can easily clean that out when you’re working, or leave it in if you want to be nice to, say, your successor at work where you’re building the company website, or something like that.
Underscores is the natural starting point for anyone on the lookout for a starter theme to fork to their own projects. It is well made, well documented, and a solid base. The only downside is that it is less prepared for you to use it to build child themes upon, but that can easily be changed by forking it and taking the necessary steps yourself, with your own version. Give it a whirl, it might suit your needs.

WordPress starter themes: an essential guide

BONES

themble.com/bones
Sometimes you want to start with something that’s a little more designed. If so, Bones might be for you. Sometimes it can help to have a little more style when starting a new project. Not everyone enjoys looking at a CSS naked site and then start defining everything from scratch. Bones is visually simple out of the box – not overly designed in any way, but at least it does not look like the stylesheet failed to load. If this helps, then Bones is a nice starting point.
Bones uses LESS or Sass, your choice. You could obviously use traditional CSS as well, but you’d have to fork it should that be the case. It makes little sense to pick Bones if you intend to use traditional CSS, this is a choice for the LESS/Sass lovers out there. You’ve got all the files you need to get started, as well as some tips on helpful reading if you want to get started with LESS or Sass. That’s always nice.
The Bones markup is good and appears well thought through – there’s not much to complain about there. The theme comes with one default widget area, and supports both menus and custom backgrounds, but not a custom header. When you want to add something that usually goes in functions.php you’ll notice that the file requires functions from additional files. And yes, there are quite a few additional files in Bones, which you will either like or dislike. It sure makes the theme a bit harder to understand to those of us who are less-experienced theme developers.
On the other hand, Bones helps you as well. You’ll find placeholder template files for Custom Post Types, a nice touch. There are also placeholders for adding Custom Post Types to your theme, by enabling a function in functions.php and then defining the Custom Post Types you need. This is a less than stellar idea I’m afraid, because Custom Post Types is definitely something that does not belong in a theme, but in a plug-in (a compatibility plug-in, ideally).
The reason for this is that your Custom Post Type content will most likely be something you want to stick around when you switch themes, and if the code for it resides in the theme, that means you’ll have to remember to copy-paste this to your new theme. The same goes with any added taxonomies you might have. You want that to traverse across themes, not suddenly be disabled. The Custom Post Type thing notwithstanding, Bones is a nice alternative that you should consider for your projects.

WordPress starter themes: an essential guide

TOOLBOX

wordpress.org/extend/themes/toolbox
The Toolbox theme might indeed be the perfect tool for child theming, if you’ll pardon the pun.Toolbox is a classic bare bones theme, if you’d believe there was such a thing. There are, in fact, a lot of these themes, consisting almost solely of HTML markup, with just about no CSS at all. The idea with this sort of theme is to make it easy to style it to your liking, which fits the whole starter theme concept perfectly well – customisation is key.
Toolbox can be both forked into a completely new theme, or used as a parent theme for a child theme. While both make perfect sense, the latter use is where the theme stands out from the other alternatives presented in this feature.
The thing with Toolbox is that it doesn’t try to reinvent the wheel in any way – it is just a basic WordPress theme without a ton of CSS for you to overwrite. Just about everything it does is straight up regular WordPress – something a lot of developers will appreciate, since it means they won’t have to spend any of their time learning a new template file structure.
The HTML5 markup is simple and straightforward, in a good way. The only question mark you might find is in the side column, which is a widget area. In Toolbox every widget is an aside tag, not a list item within an unordered list. This is a step away from the traditional setup for WordPress themes, as some of you will no doubt have noticed, and it could be hassle for amateurs. That said, it is not a bad idea semantically, so it might not be so bad after all. It is worth noting though.
Other than Toolbox features two widget areas and support for a menu out of the box. It also has support for some Post Formats, which you may or may not want to use in your projects. There are also some nice functions in functions.php that you could put to good use. The template file structure is reasonable as well, with all the template files you’re likely to need, all split up using get_template_part(), but without going nuts with template inclusions all over the place.
Toolbox is a great starting point if you’re going to build something blog-like, that’s for sure. The theme is also easy to style, which makes an ideal candidate to use as a parent theme.

WordPress starter themes: an essential guide

ROOTS

www.rootstheme.com
A different starting point – Roots might just be what you were looking for. The first thing that will strike you when you’re installing and activating the Roots theme is that you’ll get a few theme options directly after activation. Here you’ll get alternatives for creating a static front page, changing the uploads folder, permalinks, creating a navigational menu, and adding your pages to said menu. Pretty handy if you want to follow the basic setup, and nicely done. The Uploads folder change is a nice trick by the way; rewriting permalinks to files so your image and asset URLs won’t have wp-content/themes/roots/, and substituting this for ‘assets’ to make prettier links. It’s the little things. Other than this, you’ll also get two widget areas, but no custom background nor custom header for that matter.
Roots features decent markup, but while it is indeed HTML5, the lack of the article tag, for example, is a bit of a mystery. Some developers will disagree on the semantics in Roots, so make up your own mind.
The Roots file structure is a story of its own. Templates are broken out and stored in a /templates folder, and you’ll find that functions.php is only used to include a number of files from the /lib folder. The stylesheets are in their own folder within the /assets folder, much like images and JavaScript files. Roots uses LESS, which given the organisation of the theme, should come as no surprise to developers. Everything has its place in Roots, which can be both a good and a bad thing, since it does indeed make it a bit harder to get started. Luckily there’s a lot of documentation to ease the transition to this theme structure.
Another nice thing about Roots is that it is localised to quite a few languages, and they ship with the theme as well. This is always appreciated when working with international clients and/or sites.
Roots is not for everyone. It demands that you learn how it works if you want to do something slightly more advanced than a minor tweak or build a child theme. That is not necessarily a bad thing, so if you like your themes structured then take a look at this one.

WordPress starter themes: an essential guide

STARKERS

viewportindustries.com/products/starkers
Starkers is something of a blank slate or tabula rasa – a naked (see what they did there?) WordPress theme with semantic HTML5 markup. If there’s a definition of a bare bones WordPress theme, it is Starkers. Even the theme’s background story is about bare bones. You see, the theme used to be a stripped down version of the current default theme, with all the bells and whistles, all the styles, everything not completely necessary, stripped away. As of version 4.0, this is not the case – the theme is rewritten with its own structure, making it even more lightweight and stripped of what might be perceived as nonsense for a developer when starting a new project. This means no widget areas, no menus, no custom backgrounds – you will not find anything that is not totally essential when starting a new project.
Starkers features a nice semantic HTML5 markup, but it might not be for everyone. Some might have a hard time swallowing the use of ordered lists when listing posts in an archive, for example, not quite what we’re used to in WordPress themes (but fairly common in Tumblr themes, incidentally) – although it does makes sense from a semantic point of view. Not everyone will approve of the markup for article headers either, where the h2 tag is used rather than h1 – even on single posts – but that’s a matter of taste and your SEO philosophy. All in all, the markup is really clean and really simple. You should have no trouble styling Starkers.
Where you might run into trouble is the way in which the theme is built. As with so many other themes in this article, Starkers has its own templating structure, with the template files including various parts of the code from the /parts folder. This, just like with other themes that stray from the WordPress standard, might take some time getting used to, but it does offer a better overview of the template files within the theme. Since Starkers is aiming to be lightweight, some functions and features that the theme ships with aren’t even used per default, but you can easily add them by reading the code.
The lack of documentation, other than notes within the files, is a pretty big barrier when it comes to getting started with Starkers – but it really is a good starting point, and easy enough to learn. Do take a closer look if you’re after a bare bones theme. It might be right up your alley.

Pros And Cons Of Theme Options

Dedicated theme option pages might sound like a good idea, but its not always the case
n Theme options are fairly common today. Sometimes it is something as simple as adding a bit of additional text that the theme wants to show some place, and other times you can control the layout, fonts, colours, and whatnot. This might sound like a good idea, but most of the time it is not, and when it comes to starter themes you should definitely be wary of theme options as they might mean that the end user will ruin the look and feel, or even the functionality, of your theme.
It is often a good idea to stick with the WordPress default features, as they will rarely lead you astray. A custom header, custom background, and some clever use of widget areas and menus, and you’re probably where you want and need to be.
If you do intend to use theme options, keep in mind that they should only be for things that are theme specific. Adding a box for storing the Google Analytics ID number in the theme is a bad idea for example, since chances are the site statistics should work even when switching themes. Keep the theme options as simple as possible, and use with caution.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.konetserv.com Ludwig Königsberger

      Great overview for WordPress-Webdesign-Beginners which tools are out there!!

    • daniel

      your article helped me a lot, thanks!