WordPress starter themes.

This post forms the basis for a talk I’ll be giving on WordPress starter themes later in the year. Follow us on Facebook and Twitter and we’ll keep you updated on dates and locations.

At TAC, most of our web projects use WordPress. We love the flexibility and extendibility and we’re always up for challenges that use WordPress in new and exciting ways.

Every WordPress project we do is built on our starter theme and that’s what this post is about. I’ll explain what a starter theme is, why they are important and then go into detail about our TAC starter theme.

You can download our starter theme to use on non-commercial projects on GitHub.

What are WordPress starter themes?

The purpose of a WordPress starter theme is to save development time. Think of them as a starting point for any WordPress project. They will contain things that are common to every project and as a result will take a lot of the effort out of setting up a new website.

There’s plenty of starter themes out there. Some favourites include:

For anyone who will be developing WordPress websites on a regular basis, it’s well worth building your own WordPress starter theme.

WordPress starter themes or WordPress frameworks?

There’s a bit of crossover between starter themes and frameworks.

The WordPress Codex defines a framework as:

Frameworks are for theme developers. They offer a set of standards for theme developers to use in creating their own themes. They’re a set of functions/features created to aid development.

Many of the commercial and/or readily available frameworks are designed to be used as a parent theme. You then use a child theme for your bespoke development. The advantage to this approach is that you can update the parent theme without affecting your custom code.

The purpose of a WordPress starter theme is different. Instead, they’re designed to be as lightweight as possible and built directly on top of.

Even though we do regularly update our starter theme, it doesn’t make sense for us to use a child theme to build with it. Frameworks will generally contain lots of options and front-end features but our starter theme exists purely as a completely stripped-back starting point for a WordPress project.

What should and shouldn’t WordPress starter themes contain?

WordPress starter themes should exist as well-structured libraries of code that speed up development. They should be used to set up a project and establish a well-structured theme hierarchy. Frequently used functions and external libraries should be included.

They should not contain any project-specific code and rarely anything presentational.

The TAC starter theme

Now that we’ve established exactly what should and shouldn’t be in WordPress starter themes I’ll explain ours. Remember, you can download it for use on non-commercial projects from GitHub.

Standard template files

We include all standard template files that might be required in our starter theme. We then remove them at the start of development if they’re not required.

Each template file only includes the absolute minimum code required to get and output content. There’s no HTML.

For example, this is our page.php template file:

The other template files follow this pattern so are just as stripped-back.

Structure

The theme directory can quickly become cluttered when working on large projects. We always try to keep the development process efficient and our code maintainable, so it’s worth keeping things clean and tidy.

Most themes and frameworks will contain separate directories for images and Javascript and CSS. Ours does to but we also have a few more. Our theme structure contains directories for:

  • css
  • js
  • img
  • fonts
  • templates (for custom non-standard template files)
  • parts
  • lib

Parts

Parts are reusable blocks of code that are called in multiple locations in the theme and are used to keep code efficient. For example, an Instagram feed that appears on every page template, or a a business’ contact details.

There’s only one file in the parts directory in our starter theme and this is a loop used to display posts. We include it here because, in the majority of cases, the main index and archive templates will follow a very similar pattern.

We include our own custom function that extends WordPress’ get_template_part() function since the built-in function only allows one part to be included at a time.

CSS/Less

Less.js is our CSS preprocessor of choice. We break styles up into very small reusable modules, helping to keep things clean and maintainable. These files are then imported into a main style.less file before being compiled into a minified style.css file at the template’s root.

The Less files in the TAC WordPress starter theme are:

  • reset.less – a modified version of Erir Meyer’s reset.css
  • a 12 and 14 column (for full-screen websites) flexible grid based Materialize
  • a block grid based on Foundation’s block grid and used for repeating blocks of content
  • colours.less, which contains site-wide colour palette variables
  • global.less, which houses site-wide styles for presentational elements
  • forms.less, which extends the global file for form elements
  • visibility.less, which contains a set of classes used to target elements based on screen size
  • skeleton carousel styles (for Owl Carousel)

Javascript

Our JS directory contains only libraries that we use on pretty much every project. There is also a site.js file for any project specific code.

The libraries we include are:

  • Modernizr – a feature detection library that allows greater control in older browsers
  • Owl Carousel – a simple, stripped back carousel
  • Match Height – a tiny but hugely useful tool that lets you easily match the heights of two of more elements

Theme functions

The functions.php file acts like a theme-specific plugin, therefore its purpose is to add features and functionality. We use a separate functions library directory to keep things tidy.

Our main functions file enqueues Javascript and CSS files, provides a generic widget template and sets up WordPress menus.

The lib directory contains WordPress-specific functions to speed up development. It is an extension of functions.php and broken down into four files:

tac.framework.posts

This file contains any code used to define custom post types, taxonomies and meta fields. Custom meta fields require the CMB2 plugin.

tac.framework.queries

Any manipulation of queries goes in this file. We include a simple example to get started. This sets the number of posts per page on post archives to 9.

tac.framework.setup

This file contains code we use to set up the project and optimise the CMS.

There’s quite of a lot of features in the WordPress admin area that we rarely, if ever, use so we tidy it up. We strip the dashboard back by removing some of the less useful widgets, as a result providing a cleaner, more usable admin area.

We do something similar on post/page editor screens too.  There’s a few meta boxes that can sometimes confuse users so we’ve removed these.

tac.framework.utilities

This file contains a few tools that help us during development. These are:

  • A function that pre-formats errors and warnings and as a result makes debugging easier
  • Extending the get_template_part function to accept multiple arguments
  • A function that returns a page ID based on its path
  • A function that returns a category ID based on a category name

How WordPress starter themes help

I’d estimate that the work we’ve put into our WordPress starter theme saves at least a day of development when setting up a new project. As a result this gives us more time to focus on delivering a great website. In addition it helps streamline our workflow, giving further time savings throughout the life of a project.

We don’t include anything that isn’t needed and as a result our code is efficient as it can be. This makes sure the websites we deliver perform well and provide a great experience for end users.

Our starter theme is a constantly evolving thing, so we’re always making refinements to further improve our workflow.

Want to know more?

We’ve delivered bespoke large-scale WordPress projects for some of the world’s biggest brands. Most of all we love using WordPress in new and interesting ways. We have the experience to make any project a success so if you have a WordPress project you’d like to talk to us about why not get in touch?

I’ll be delivering a talk based on this article during the rest of 2016. You can us on Facebook and Twitter to find out dates and locations.

Read more about what we do...

Related case studies...