The WordPress development workflow – the best practices.
The purpose of this article is to describe how we do it at White Label Coders, and provide an inspiration for everyone who currently is seeking for good practices to follow and setup his own way of working with WordPress.
It is important to say, that we work in conjunction with many agencies and designers, what forces us to be reasonably flexible when it comes to details. The opportunity to work with various teams puts us in a privileged position to see different approaches. It gives us an opportunity to test and choose solutions which in long run have proved to work best. Our current workflow is in fact a distillation of lessons we’ve learned over the past decade, observing these different approaches. And it is obviously still evolving, as we work in an ever-changing environment.
Git plays a fundamental role in our workflow. It makes collaboration more manageable and allows several people to work on the same project. We use it for Code Review to ensure high coding standards.
WordPress starter theme
Every WordPress theme development project requires to set up a basic theme structure, which is a repeatable task and can be automated. For this reason, we have created our starter theme that, out of the box, includes all necessary components.
We have created a Git repository for our starter theme. Therefore, it can be quickly cloned to a new project.
The Tools we use in our starter theme for HTML/CSS/JS
Our development workflow is built upon Gulp, a toolkit that helps with automating painful and time-consuming tasks in the development workflow, and that handles for us the following tasks (to list some of them):
- live reload browser with browsersync
- Sass to CSS conversion
- merging media queries
- CSS Minification
- CSS Sourcemaps
- JS Concatenation
- JS Minification/uglification
- separate vendor and custom JS files handling
- minification/optimization of images
- watching for changes in files to recompile
Using Gulp workflow is as easy as running several commands in a console:
- required tools installation – npm install
- starting development process – npm run dev
- building an optimizing package that is then run in the production environment – npm run build
Sass is a CSS preprocessor of our choice. It makes CSS writing so much easier and faster. With Sass in place, our CSS becomes smaller, less complicated, and easier to maintain. Sass allows to perform the following:
- using variables
- nesting CSS selectors
- code modularization using partials
- using mixins
- extending CSS to cover specific selectors
- using math operators
When the first version of Bootstrap 4 was released in 2017, we knew it was a game-changer in the world of CSS frameworks. Version 4 of Bootstrap is entirely based on Sass variables and mixins and allows for easy and fast creation of Bootstrap framework variations that are as unique as every project is.
- Sass variables and mixins
- responsive grid system allowing mobile-first approach
- extensive pre built components
- powerful plugins built on jQuery
On top of the above advantages of Bootstrap 4, working with its source code allows us only to load components we need and nothing more. Want only to use Bootstrap grid system? Sure, we only load grid, and that’s it; all other components are not there in our CSS files.
Font Awesome PRO
To handle icons display, we have a PRO license for Font Awesome, which is a source of endless inspiration for designers we cooperate with, and pleasure for developers to implement. Only in rare cases, there is a need to search for an alternative.
In WordPress theme development, we always strive to use WordPress Codex best practices. We follow PHP coding standards as per Codex tutorial (https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/), apart from this we pay attention to the below:
- keeping functions.php file clean and well organized
- extracting more significant logic to standalone plugins rather than putting everything into functions.php
- extensive use of Action and Filter hooks (for example in WooCommerce we only edit templates when we are sure no hook covers what we are looking for – 90% of edits in WooCommerce can be done with hooks)
- using WordPress AJAX for the best user experience
- using correctly template tags and overall template hierarchy
- our themes are always 100% translation ready
We use Advanced Custom Fields PRO a lot while developing WordPress themes. ACF is a super flexible plugin allowing to add extra fields to any page, create theme settings pages, and even helps in building complex logic.
Gutenberg is awesome
New WordPress editor – Gutenberg is an integral part of our workflow. Before Gutenberg was mature and stable enough to use it in our projects, our standard workflow would involve creating a set of custom fields that on the admin side were usually displayed underneath the Classic Editor. This approach has not really changed, because now all these relevant custom fields are being seamlessly integrated with the Gutenberg editor as custom blocks. This approach allows us to build even the most complex post layouts using native blocks and custom blocks that cover any custom logic required.
We avoid using other page builders such as WPBakery, Visual Composer, Elementor and other similar tools. There is a couple of reasons why we think it is better to avoid them:
- They add a whole lot of redundant markup
- There are some severe performance issues – our independent studies proved that the very same layout build with Gutenberg loads much faster than one build with any of the other page builders
- Gutenberg is flexible and extensible
- As a part of WordPress Core Gutenberg was created by the WordPress core development team
- Gutenberg is and will be supported; this is a long term perspective
- Gutenberg is fast – it is React-based, and React in general has been designed as a fast framework to provide great user experience
As you can see, there is a lot on the plus side of using Gutenberg; to be honest, we can barely see some minuses. Gutenberg is a powerful tool, and more and more is added to it with every new release of WordPress.
When it comes to creating a WordPress plugin, we choose a 100% Object-Oriented Programming path. As we like to optimize processes, we don’t build everything from scratch over again, but use a boilerplate generator https://wppb.me/ to create a basic plugin setup.
Then we follow both Codex and PHP coding best practices to deliver the functionality the customer is looking for.
How about WordPress Dashboard?
We pay attention to details as far overall dashboard user experience is concerned, therefore we:
- plan for creation of custom fields, custom post types, etc., so that posts and pages are easy to maintain
- arrange custom fields into tabs so that the user does not need to scroll down endlessly, and everything is logically grouped
- carefully select whether a specific piece of content should be a custom post type or an ACF repeater field, to avoid a mess in the main dashboard menu
- implement styled interface elements for true/false choice fields etc.
The overall goal of the above is to make the life of the admin user as easy as possible. We know from experience that things can look messy in the dashboard, and we strive to make it right.
We treat WordPress Codex as a tutorial for correctly building sites. Codex is indeed a guide as it includes thousands of articles that tell us how to develop WordPress sites, how to use specific functions, how to approach particular issues common in everyday life of a WordPress developer. We strive to follow Codex whenever it is possible, and we also add to it by combining Codex values and overall coding good practices.
PHP programming language has evolved a lot in recent years. Many PHP developers out there accuse WordPress of the non-following of modern software engineering standards. While we have to admit that there is a lot of truth in this statement, we make every possible effort to make our own implementation clean and up to the standards.
Our mission here at White Label Coders is to deliver the best possible code quality and logic implementation in WordPress projects. Therefore we always try to follow good PHP coding practices. The concepts such as Object-Oriented Programming, DRY (Don’t Repeat Yourself), or elements of SOLID are something we are familiar with and that we follow on a daily basis.
Code Review plays a fundamental role in everyday life at White Label Coders. All our projects we manage via Gitlab, which gives us a chance to double-check code piece by piece in the search for bugs, code style policy violations, security vulnerabilities, extreme complexity of code, etc. A senior member of our team always performs a code review.
For us, Code Review is not only what it is by definition, but also an essential tool in growing competences of programmers, a way to learn new skills, better ways of approaching specific challenges. Through Code Review, we all become better programmers on a daily basis.
We take advantage of what modern IDE (Integrated Development Environment) gives us. As far as WordPress development is concerned, we set up projects so that out of the box, they follow WordPress coding style. We also use Gitlab CI for automatic testing of code standards and WordPress coding conventions. Gitlab CI monitors the quality of our code, alerting us when the quality of our system falls below a certain threshold, or when we do not meet specific coding conventions. The primary tool used by us to do that is PHP code sniffer (also known as phpcs).
In our team, we have trained people to test our work against original graphic design assets before we send the project to the Customer. Our testing workflow includes:
front-end + functionalities testing in all modern browsers
manual testing of several real devices we have in-house
manual testing of selected devices via https://www.browserstack.com/
In case of more complex systems requiring long term support, we also create test scenarios, which are verified each time we make an update or push any changes to the live version of the site.
The final product our customer receives is a CMS-powered website that we can describe as follows:
- easy to use and maintain from an administrative point of view
- its code is well organized and of high quality, following coding standards and conventions superimposed by WordPress Codex and other programming practices
- easy to develop and maintain, also by other teams as we use the latest workflow and tools
- it can integrate with any modern 3rd party software that is used in your business
- being thoroughly tested on multiple levels it is bug-free,
- it is optimized in terms of loading speed (more on this in the next article)
- it is secure from the start, this, however, requires continuous updates once a new versions of WordPress and plugins are released.
The bottom line is that from a business perspective, you save a lot on different levels, thanks to the way we approach every project. Further site maintenance and extension costs are lower if standards were followed correctly. Unnecessary hassle, especially during the final phase of the project, can be significantly reduced. Your team won’t be forced to bounce endless fixes to our team. And finally, the highly optimized and correctly coded sites rank higher on Google, so you also achieve better results for your customer. And the end – customer satisfaction should be our ultimate mutual goal, shouldn’t it?