WordPress Coding Standards from the Terminal

This article will show you how to add the tools you need to test your code against the WordPress Coding Standards from the Command Line.

A second article will be published shortly with instructions for adding them to the code editor Atom. It will also include links to the instructions for other editors.

Going by the length of the page, this process may seem like quite a big effort, but starting to follow Coding Standards has many advantages and it will be time well invested!

The WordPress Coding Standards

As explained in the Make WordPress – Core Developer Handbook, the WordPress Coding Standards were developed by the community with the aim to “ensure that files within the project appear as if they were created by a single person.“

The advantage of this is that it is easier to read the code and, therefore, maintain it.

But apart from style guidelines, the Coding Standards also provide best practice recommendations that will help you avoid common coding errors and, therefore, improve the quality of your work.

From the Command Line

There are many ways of testing your code against the WordPress Coding Standards. In this section, we will look at how to install and use the Tools we need to do so from the Command Line.

Some of these will also need to be installed if you were to use them from your code editor, so I’d encourage you to read on and try them out!

PHP

We will use the Squizlabs PHP_CodeSniffer (PHPCS) to test our PHP code. Please refer to the WordPress Coding Standards for PHP_CodeSniffer page for detailed instructions on how to install PHPCS and set it to use the WordPress Coding Standards.

To add your PHPCS directory to your PATH environment variable, type the following command from the Terminal:

export PATH="~/projects/phpcs/bin:$PATH"

Assuming you have installed PHPCS in a folder called projects, as in the example given in the instructions.

After this, you can start checking your PHP code against the WordPress Coding Standards. To do so, go to the directory where the PHP file is and type this command:

phpcs --standard=WordPress filename.php

For example:

Example output of the PHPCS command.

For each error or warning, PHPCS gives us the line number where the error or warning occurs and a brief description.

You will notice that some of them also have a little [X] sign. This indicates that the error can be fixed automatically without opening the file. Run the following command to fix these errors automatically:

phpcbf --standard=WordPress filename.php --suffix=.fixed

Example output of PHPCBF with suffix.

This creates a new file called filename.php.fixed with the errors fixed. If you prefer the fix to override the original file directly, simply leave out the --suffix=.fixed part of the command.

PHPCBF, by the way, stands for PHP Code Beautifier and Fixer and comes with the default PHPCS installation.

JavaScript

We will need to install ESLint and eslint-config-wordpress with NPM for each project with JavaScript code to be checked against the WordPress Coding Standards.

Once npm has been installed, run the following command to install the ESLint package globally:

npm install eslint -g

Please note that, the steps up to here will only need to be done once. The steps that follow, however, will need to be carried out for every project you want to check against the WordPress Coding Standards.

Instead of continuing onto step 2.2, open your new package.json file with your code editor and add a comma at the end of the second last closing curly bracket, and press Enter to add a new line. On this new line, add the following code:

Please note that the first installation step only needs to be done once, but the rest needs to be done for every project you wish to check against the WordPress Coding Standards.

You can now start using Stylelint by typing the following from the Command Line:

stylelint filename.css

Stylelint example output

The output is not as useful as that of ESLint as it doesn’t tell us if any of the errors can be automatically fixed. We can, however, run the command below to fix them:

stylelint filename.css --fix

stylelint example with –fix option

In the example above, all the existing Coding Standard errors have been automatically fixed except one. Not bad, right?

What about HTML and Accessibility?

The WordPress Coding Standards for HTML are so brief that it is hardly worth installing a tool for them. Instead, I would encourage you to try out the online W3C Validator as recommended in the WordPress Core Developer Handbook.

As regards to Accessibility, there isn’t unfortunately a Tool yet that will assist on following the guidelines. So all we can do as things stand is follow, as best we can, the Accessibility Guidelines put together by the Make WordPress Accessibility team.

Further Reading

Here’s some useful links to find out more about some of the concepts and tools we have discussed above: