Over the past few months, a number of people have asked me about my processes and how I build with WordPress. So, I thought a short series on the topic would be a useful idea.
First off, I’m going to talk about my custom WordPress starter theme, which I have named Moss.
Why did I name my WordPress starter theme, Moss?
Moss is a wonder plant. It grows and thrives in all manner of places. It is resilient, robust and very adaptable. It is also great for the planet. Being a fantastic carbon capturing plant.
These are all the traits that I strive for within my theme.
- Resilient in design
- Robust in development
- Adaptable to different client needs
- Enabling businesses to thrive online
- Lightweight and low-carbon
WordPress starter theme structure
It all starts with the framework. Or rather, the lack of one.
My starter theme doesn’t rely on any build framework. I, or anyone else using it, isn’t beholden to use any specific build tool or a myriad of quickly outdated npm packages. It is simple. Straightforward. Therefore it is robust.
All you need to know to work with it is the fundamentals of the web. HTML, CSS and a sprinkle of JavaScript, alongside PHP for WordPress. I do use SCSS, so it does need compiling into production ready CSS. But there many ways to do this without the need for a big framework. It can work with build tools, such as webpack etc, but it doesn’t need them. Personally, I use Prepros to assist in compiling, minifying and managing any cross browser niggles in CSS.
Theme structure
You can see an overview of the theme structure here, with descriptions below.
- Base theme files. Such as header, footer, functions and theme stylesheet (for WordPress admin)
- acf-json
- Generated Advanced Custom Fields data
- css
- Base CSS set up for reset, typography, theme set up etc and production ready minified CSS file
- acf
- Individual ACF block CSS
- parts
- Styles for commonly used global theme parts such as navigation, footer, buttons etc
- templates
- Styles for specific templates
- images
- Globally used images, such as favicons
- js
- Main JS and compiled, minified JS file
- components
- Components by functionality, such as accordions or navigation
- parts
- Global HTML/PHP parts
- components
- Small reusable PHP components such as a button with style attributes
- flexible-content (ACF blocks)
- PHP components for each ACF block
- icons
- Reusable icons, such as social media platforms
- templates
- Individual custom template files (if applicable)
Is the Moss starter theme compatible with Gutenberg?
Yes, it can be. Though by default, the theme removes Gutenberg functionality and related files. Even though the page building editor for WordPress has been around for some years now, I still don’t think it quite lives up to what it is trying to be. I also think it adds additional weight to a website that isn’t really necessary via default CSS and scripts. Some of which is inlined in the HTML, which is no good for caching.
While my starter theme is compatible with Gutenberg, it isn’t compatible with the Full Site Editing features that launched in WordPress version 5.9.
I take the decision to remove Gutenberg by default, and use a different system to control content editing. One that I am fully in control of.
Advanced Custom Fields, flexible content structure
The starter theme makes use of the ACF (pro) plugin to manage content entry fields. At the core of the content entry is the Flexible Content system. Allowing for a simple drag and drop ‘page-builder-like’ experience, using different components and content blocks to create a full page.
Blocks can be designed and built once. They can have adaptable options. The code is then reused across different pages and post types, always allowing the content within them to change.
Extensive and extendable
The theme is designed and built to kickstart projects. To be the boilerplate for both small marketing websites or enterprise level WordPress websites. The theme has been used for live websites with no changes at all to styling or functionality. But where the theme really shines is when it is used as the basis for complex, data and content driven websites, where it looks nothing at all like the starter it derives from.
It is very easy to build upon. Yet it is smart enough ‘out of the box’ for the right small projects.
Low-carbon design and build
The entire starter theme has been designed and built so that it delivers a lightweight frontend. It is also set up to work well within the WordPress ecosystem, only querying the database when it needs to, and in a way that can be cached. It loads only one stylesheet by default and one JavaScript file that is only 494 bytes minified. It uses optimised SVGs for logos and social icons. It is very lightweight for how usable it can be.
System fonts
The theme uses the lovely system fonts available across different devices as the base typography. You can learn more about this stack on the-sustainable.dev resources. When I do need to use custom fonts, I always optimise them. Creating subsets for the languages and character needed. You can view my guide to subsetting fonts here, as well as how to load web fonts for the best page load performance.
Optimised SVG icons
Where possible, I have implemented the super optimised SVG icon set created by Rose Newell. These are predominantly used for social icons in the footer and social sharing from blog posts. You can check out Rose’s Susty icon set on Github.
Responsive images by default
Utilising the built in WordPress responsive image functionality, the theme outputs images that respond to the display, loading responsive sizes based on the size of the image and it’s container. It can easily be extended to automatically output WebP versions, following low-carbon best practices.
Is the Moss starter theme public?
No, currently the starter theme isn’t public. I don’t wish to make it a commercial entity and therefore need to maintain a public repository to handle updates for a wide audience.
If there is a particular interest I may share the code on Github.
So that’s it. My lightweight, flexible starter theme for WordPress explained. What else would you like to know about my process of designing and building for a low-carbon, sustainable web? Connect with me on LinkedIn, send me a message and let me know!