As a WordPress developer, staying up to date with the recent techniques and trends can be intimidating. Take automation, for example – are you on top of what can be done in terms of automating your workflow? Not quite? Okay, this article can help you with that. It is a bit different from your usual WordPress development tutorial, though. It focuses on automating whatever can be automated when working on your next WordPress project.
The following WordPress development tutorial goes through the steps involved in a typical development cycle. Along the way, we’ll propose solutions and tools you can use to automate certain processes to decrease your release times.Benefits of automation
Before we move on to discuss automation, let us discuss why you should automate certain processes anyway.
- ⏲️ Automation saves time, and therefore money. Imagine the time saved if you synchronize your local development version of WordPress with the server on a single click.
- ? Next, the automation of redundant steps helps in avoiding errors. In the process of syncing your changes with the servers, you may inadvertently upload a wrong version. This leads to rework.
- ?️ Further, automating various steps in your development cycle helps in traceability. Doing so helps you in debugging your code. For instance, you get to have a proper log of what changes were uploaded to a server on which date.
- ? Finally, automation helps you focus on more important things like innovation! If you are not burdened by redundant, repetitive tasks, you have more time for important tasks that require your attention.
This WordPress development tutorial helps you achieve higher efficiency by first finding out redundant steps, and then helping you automate them.
Automate your development environment
Imagine the need to manually create a development environment every single time in the following scenarios:
- Start a project
- Move to a new development machine
- Have a new team member
Creating a list of software and commands is the first step in automation. However, manually going through each step takes significant time, and is prone to errors. So, such a list is still insufficient to set up your environment.
Docker is a service that helps you set up a development environment on a new machine based on your requirements. Docker introduces the concept of containers. A container is a virtually closed system created with your development environment. With Docker, you will never find yourself in a situation where someone updated some piece of software on the server, and nothing works!
First, you define a development environment, which specifies what exactly you require in a new machine. Then, just run a command on a new machine to initiate the process – it’s that simple!
Here’s a guide on setting up Docker for WordPress. Plus, here’s a quick Docker configuration file for WordPress.
There is one drawback of Docker – if you use a Windows-based development environment (like SQL Server, .NET or VisualBasic), you cannot implement it using Docker.
Version control with Continuous Integration
The next step in this WordPress development tutorial on automation is to focus on code management. When multiple developers work on the same code at the same time, they generally use some form of version control like Git or Mercurial. Here is a WordPress development tutorial on version control.
When using code management software, a developer can make a copy of the central repository. They can make improvements in the repository and submit the changes to be merged with the original code. Popular repositories may have hundreds to even thousands of changes in a day. There might be various conflicts that may arise when the developer wants to merge the code. In the most extreme case, it might so happen that the time taken to solve the issues during the merge is more than the time taken to make the initial improvement itself.
Continuous Integration is about avoiding this scenario by merging the work of developers frequently. However, a merge is not as simple as it sounds. It involves compiling and testing by a developer before committing any code. Typically, a build server runs these checks on the code once the code is pushed to the central repository. This process reduces rework, one of the sources of wastage, thus saving cost and time. The frequency of testing and building varies, but nowadays, this process is carried out after every commit.
Continuous Integration with Travis CI
Travis CI provides a free version for open source repositories. You only need to pay for your private projects. I will demonstrate a project on GitHub in this example. Once you have registered with Travis (I suggest registering through GitHub), you need to perform the following steps to start building:
- Activate your GitHub repositories
- Add
.travis.ymlfile to the root directory in your repository - Push to the repository to build with Travis
On your Travis Profile, activate the repository you want to test with Travis.
Here’s an example of me activating a sample repository web-scraping:
After activating your repository, you need to add the .travis.yml file to your repository. The contents of the file are the following:
language: python python: - "2.6" - "2.7" # command to install dependencies # install: "pip install -r requirements.txt" # command to run tests script: python tests.py
You need to specify the language (Python) and its versions to test against. In case you have dependencies to install, you need to list them in the requirements.txt file. Since only dummy tests are run in this repository, the requirements line is skipped. If not commented out, these requirements are installed in the build environment by Travis before running your tests. Finally, the command that runs the tests is specified. Open source repositories like e-cidadania have more detailed .travis.yml files.
When you are done with the code, commit it and push the code to GitHub. You can view the test results on your repository page. An email is also sent with the test results. You can also trigger another build through your profile page to check the build happening in real time:
Automate theme development
The next thing to cover in this unusual WordPress development tutorial is theme development. Although using a code management system suffices for any code that you change in your WordPress directory, intermediate steps during the development of a theme can be, and should be automated!
Let us pause for a moment to list down a few tasks that are typical to the theme development process after you have finalized changes to your theme:
- Compile CSS preprocessor code to CSS
- Minify CSS files
- Add new images to the theme
- Optimize images
- Generate child themes
- Watch for changes and update repositories
All of these tasks are redundant, which shows the scope for automation. Here’s how we can do that:
Automate theme development with Gulp
Let’s focus on a popular tool, Gulp, to automate theme development and deployment. Gulp is a toolkit that helps in automating all of the processes listed above. Gulp is a JavaScript-based tool that runs on a Node.js server.
To install Gulp, you need Node.js and NPM installed. You can then install Gulp by running the following commands in the terminal.
npm install gulp -g
To work on a theme with Gulp, you need to navigate to the theme directory, typically located in /wp-content/themes/, and initialize NPM with the command npm init in the terminal.
Next, you should add Gulp to the package.json file.
{
"name": "my-theme",
"version": "1.0.0",
"description": "WordPress Development Tutorial Automation with Gulp",
"author": "My Name",
"devDependencies":
{
"gulp": "^3.9.1"
}
}
Once Gulp has been initialized in your directory, you need to define Gulp tasks using the functiontask() – each task is an automation step that Gulp performs. Here’s a detailed guide on writing tasks with Gulp.
Are you interested in how we automate theme development – here’s a tutorial that takes you inside the journey of the engineering team.
Testing of the final product with continuous deployment
The last step in this WordPress development tutorial is to automate the testing of your final product. In short, you will try to assess if your website renders correctly across devices.
As recent DevOps trends suggest, the best practice is to go beyond Continuous Integration. Once you successfully implement Continuous Integration, you may wonder, isn’t the code present at your central repository always in a working condition? The logical answer is yes, and hence, it makes sense to release the latest version of your software as the build has taken place!
Does it make sense in all situations? No, especially if your client does not want continuous updates. However, it’s a philosophy of keeping your code ready to ship. In situations where you are developing your own product, continuous deployment is the most efficient. At Google, it takes about 8 minutes for the code to go live after you commit!
If you are building a web application, compilation may not mean that it works across devices. In such a case, a tool like BrowserStack comes in handy. It runs your web application on real devices of different manufacturers running various operating systems to ensure they work for the end consumer.
Continuous deployment with BrowserStack
In BrowserStack, you can run tests in Python through Selenium, which needs to be installed through PIP.
pip install selenium
Let us run a simple test using a Galaxy Note 8 running Android v7.1. The link that I have provided in the code below can be obtained after registering on BrowserStack (there’s a free trial). BrowserStack sets you up with sample code once you select the options.
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
desired_cap = {
'browserName': 'android',
'device': 'Samsung Galaxy Note 8',
'realMobile': 'true',
'os_version': '7.1'
}
driver = webdriver.Remote(
command_executor='http://shaumikdaityari1:pnZpugbbuzZusdRaiKcx@hub.browserstack.com:80/wd/hub',
desired_capabilities=desired_cap)
driver.get("https://www.codeinwp.com/")
elem = driver.find_element_by_name("q")
elem.send_keys("BrowserStack")
elem.submit()
print (driver.title)
driver.quit()
To run simply execute the file, or run the commands in the terminal.
python browser_test.py
You can confirm if the test is successful from your terminal. Further, you can also go back to your BrowserStack account to check the video of how it actually ran.
You can automate tests on mobile browsers. BrowserStack enables you to run tests on your own server too, as described in the documentation.
If you are making a mobile application, you would want it tested on various devices through a specific tool. That is possible with TestGrid, which lets you run your app on a variety of devices.
Final thoughts on this unusual (automated) WordPress development tutorial
With this, we come to the end of this tutorial on automating tasks during WordPress development. We covered the benefits of automation and various tasks that can be automated in your dev cycle.
Do you use other techniques or tools to automate your development workflow for WordPress? Share your tricks in the comments below.
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:
