I’m writing this article in a calm moment, reflecting on the automation workflows we have in our agency. As an agency owner and developer myself, I spend countless hours tinkering with automation to save time and increase productivity.
Leveraging development automation workflows is one of the best ways to increase productivity in your WordPress agency while also ensuring code quality.
In our agency, we particularly leverage automation in our coding processes. That is exactly what this article will explain. While I cannot walk you through the exact steps to set up the automation processes, you’ll certainly have a good understanding of how these automation workflows operate and how you can set up your own workflows.
For starters, we use automated deployment based on GitHub. By having files pushed to our live or staging servers based on GitHub commits, we effectively avoid transferring files via SFTP or SCP, and thus all the pitfalls that come with manual transfers. Particularly if you’re working with multiple developers or agencies on the same project, you’ll benefit from automated deployments using your favorite version control system. We use the open-source software Jenkins for automated deployment.
Secondly, we use an automated WPGulp powered workflow in our theme and plugin development processes. With this process, we can be sure that our code gets properly formatted, minified, concatenated, prefixed, and much more.
Before developing your theme, I would recommend you to check the best WordPress themes to get an idea of what an interactive theme looks like and then get started.
I’ll walk you through setting up WPGulp and creating your first plugin using this workflow.
Also Checkout The Best WordPress Automation Plugins
Finally, I’ll explain how to set up the open-source editor VS Code to automatically employ WordPress Coding Standards upon saving a PHP file. Proper code formatting ensures readability and helps avoid bugs.
Creating Automated Deployment Workflows with Jenkins
Think about the following scenario.
You have multiple developers in various cities (or even countries) working on the same website, each deploying code via SFTP to the server. Even if you manage the code in a repository, the transmission via SFTP makes it easy to overwrite code changes without any warning.
Automated deployment workflows are a great way of avoiding the issues caused by code overwrites.
I will now show you how to set up your own Jenkins server and configure a GitHub repository to automatically deploy code to your server upon receiving a Git PUSH command.
Now, while you can use Github for deployment natively with Cloudways, having a Jenkins server that handles the deployment gives your agency much more flexibility when writing and deploying code.
Common use cases for Jenkins are:
- Generating PHP documentation on the fly with phpDox
- Integration of tools like NodeJS, Grunt, Gulp or Bower into your workflow
- Overall handling of Continuous Integration & Continuous Delivery processes
Start With Jenkins Setup
To get started with Jenkins in your agency, you’ll need to install it on a server with root shell access. It’s important that you can run scripts and install software packages as needed on the server.
A word of caution: Getting Jenkins up and running isn’t done in five minutes – but it’ll be worth it.
The first step is to install Jenkins on your server. Digital Ocean has a nice article on installing Jenkins on their Ubuntu servers, but you could use any other server with matching requirements.
Secondly, you’ll have to configure your project for Jenkins. When talking about automated deployment, you’ll likely just want the theme or plugin you’re currently working on to be deployed. Basically, you would not add the entire website to a Git repository and deploy it using Jenkins. In many cases, it is just the theme or plugin you are actually working on that gets deployed.
Hence, you’ll want to configure your working directories and GitHub repositories to be handled by your new Jenkins server. I’m not going to fully dive into this process though, as that would be way out of the scope of this article. Instead, I’ll give you a brief overview of what’s necessary and then point you to this fantastic tutorial on WebDevStudios, which you can easily follow along.
- You’ll want to ensure Jenkins is set up and running.
- Set up the Git repository as needed (e.g. configure .gitignore properly).
- Install PHPLoy on your system as that will handle the deployment.
- Set up a jenkinsfile, which contains the instructions for Jenkins.
- Add the pipeline to your Jenkins server and give it a test run.
With this brief outline, you have all the resources you need in order to get started with Jenkins. Believe me when I say that it saves my agency hours each week. We do not worry about code deployments anymore and can easily monitor the deployments for each project.
If this process sounds like too much work for you, you’re in good luck. We have extensive articles for alternative deployment processes on the Cloudways blog.
Quick List to Help You Ensure You Don’t Miss Out Anything
This extensive list covers everything you need to know before hitting the publish website button.
Thank You
Your Downloadable Website Checklist is on it’s Way to Your Inbox.
Setting up WPGulp for Dev Automation
Another powerful workflow we like is to use the WPGulp framework for developing themes and plugins. WP core contributor Ahmad Awais has created a nice tool that helps speed up development while maintaining high code quality.
The reason for using WPGulp are plenty:
- Improved dev environment
- Optimized CSS development
- JS concatenation, uglification, and minification
- Image optimization
- Generating .pot files for I18N and I10N
You’ll see what I mean when you read through the readme.txt of the Github repo for WPGulp (linked above). Let me give you an example of how we use WPGulp when developing a custom WordPress plugin.
First, we use the WPPB generator to create the base plugin boilerplate. By using the same plugin boilerplate over and over again, we ensure that all plugins we develop look familiar and that every developer can easily find the functions he’s looking for.
Next, we add WPGulp to the plugin folder. We do that by running the shell command “npx wpgulp” in the plugin folder. Make sure that the prerequisites NodeJS and NPM are installed.
After installing WPGulp in your plugin folder, you’re presented with this command line output:
Thirdly, we configure wpgulp.config.js as needed for the project. This config file handles all settings WPGulp needs, including project URL, and the paths to assets (CSS, JS, images). Thankfully, Ahmad has done a fantastic job of commenting the config file, so that every setting is crystal clear.
Lastly, we trigger WPGulp and start developing. By simply running “npm start”, we can start developing while leveraging the full power of WPGulp.
If you are interested in integrating the WPGulp with the Jenkins workflow outlined above, all you need to is modify your .gitignore file so that only the optimized versions of your CSS files, JS scripts, and images get versioned (the path to these files are specified in the wpgulp.config.js file).
Applying WP Coding Standards with VS Code
Lastly, let’s talk about a topic every developer has a special relationship with: code formatting. If you have ever read code written by somebody else, you’ve likely found yourself getting mad at incorrectly indented if/else clauses, missing spaces, or condition checks that didn’t follow the Yoda style.
In our agency, we use the open-source tool VS Code for writing our code. We previously used PHPStorm but found that the VS Code offers much more flexibility and ease of use.
WordPress has implemented coding standards and best practices, and for a good reason. With hundreds of thousands of developers in the ecosystem, it’s mandatory to structure code at least somewhat similarly by following certain standards.
As humans, however, we have limited memory capacity. And remembering coding standards is certainly not the best use of that capacity (I believe it should be reserved for things that cannot be automated). To help you free up space in your memory and save time while formatting code, you can have VS Code auto-format your code as per the WordPress coding standards.
The setup is dependent on your operating system but is quite straightforward. For Mac, you can follow Jason’s excellent tutorial. For Windows users, there’s a good explanation here. And for Linux users, there’s this guide by Tom McFarlin.
Basically, implementing the WP Coding Standards into VS Code relies on two things:
- PHP Codesniffer
- The WP Coding Standards ruleset (often referred to as “wpcs”)
PHP Codesniffer is a tool to modify PHP code (as you might have guessed already), which you can link with the ruleset for the WP Coding Standards and add as an extension into VS Code.
Then, you only need to tell VS Code which ruleset to apply to your PHP code and whether to apply it on typing or on saving a file. Our preference is to have PHP Codesniffer run on save, as it can get quite overwhelming when you run it while you are typing the code. The screenshot below shows an example of the PHP settings we use in our VS Code configuration.
Are you already using any of these workflows in your day-to-day agency life? Or do you have different routines implemented? Let me know in the comments below! If you have any questions about implementing the processes outlined, don’t hesitate to leave a comment – I’m happy to jump in and provide additional help.
