WordPress starter themes.
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.
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.
- templates (for custom non-standard template files)
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.
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)
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
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.
The lib directory contains WordPress-specific functions to speed up development. It is an extension of functions.php and broken down into four files:
This file contains any code used to define custom post types, taxonomies and meta fields. Custom meta fields require the CMB2 plugin.
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.
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.
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?