Our WordPress boilerplate – performance, quality and maximum flexibility
Benno Purin
Director Clients & Operations, Co-Founder @ Digit-One
To guarantee our clients maximum flexibility, quality and performance, we rely on our own WordPress architecture at Digit-One.
How the Digit-One WordPress boilerplate started
Across a wide range of projects — from landing pages, one-pagers and corporate websites through to platforms and service portals with third-party integration — we've developed a standardised base solution that increases our efficiency by saving cost and time when implementing core functionality.
Our boilerplate, as we call it, is built on Vue.js, Tailwind and Browsersync. Our pipelines have different build processes for the respective target environments (development, local and production). Our development environment keeps evolving from project to project. Below we go into more detail on function, modularity and where it's heading.
The general architecture of our boilerplate
The heart of our boilerplate consists of several technologies and tools that make our lives easier and our WordPress projects faster.
Our boilerplate is based on:
- Foundation: Bedrock (link to the official documentation)
- WordPress theme: Vue.js & Laravel
- Build process: laravel-mix
- Frameworks, technologies and other tools: Composer, Webpack, Yarn, Tailwind, ES6, Twig, prettier, stylelint, eslint, markdownlint, php-cs-fixer, Bitbucket Pipelines (CI/CD), documentation guidelines, commit hooks
The advantages of our boilerplate
Flexibility
The components we use in our theme have the particular quality of being completely flexible in how they're deployed. That's how we ensure maximum flexibility in using the modules we build.
Performance
By preparing media in modern formats (WebP, for instance) and using intelligent caching, we make sure the WordPress setup performs excellently in terms of page speed and SEO.
Individuality
Thanks to intelligently designed UI/UX components, we can showcase your brand and your company with the greatest flexibility. We only build the modules you genuinely need for your website.
Operation & maintainability
With state-of-the-art technologies and regular update intervals, we guarantee optimal maintenance of the website and the best possible usability of the backend — even for untrained users.
Data handling and quality assurance
On the server side we use Twig, which acts as the interface between the WordPress backend and the Vue.js frontend. In more complex headless setups we can also make all backend data available via defined REST API endpoints, i.e. client-side.
Quality assurance in our setup
To ensure excellent code quality and consistency, we currently run a range of linters and automation tools. At the moment we use linters for:
- our stylesheets
- our JS code
- our Vue components
- our markdown files
- the general formatting of our code
We also use pre-commit hooks to automate these processes. These are areas where we as developers can't add value to the project. Our setup also helps us live up to our development standards and keep evolving and improving.
Our technical setup
Structure
Our boilerplate structure is based on Bedrock. For dependency management we rely on Composer. We also separate configuration and application folders to add security in hosting.
Theme
In our theme we work with a combination of Twig, Webpack, Vue.js and Tailwind. Beyond that we follow the WordPress guidelines and use an OOP approach.
OOP approach
We follow an OOP approach to guarantee the best possible level of maintainable, sustainable code. That keeps the code as flexible and as simple as possible, which helps us follow best practices.
Tailwind
On the frontend we rely on Tailwind CSS. That gives us access to a large "best practice" module library. It also ensures the greatest consistency and flexibility across the various modules.
Because we're constantly evolving and trying out new technologies and folding them into our workflow, our boilerplate changes at regular intervals too.
Below is a list of topics we're already working on or have planned for the next phase:
- Using a new template engine to replace Twig
- Maximum server-side rendering
- Integrating Docker
- Vite as a replacement for Webpack
- Svelte instead of Vue.js
- Integrating PHP tests
- Higher test coverage
- More complex implementation of accessibility features
We'll keep reporting on our work in the areas mentioned, along with further details about our boilerplate.