WordPress Coding Standards as part of your CI strategy

It is always a good thing to follow a certain coding style when writing code. WordPress is unfortunately ripe for spaghetti coding, aka doing whatever you want. It doesn’t follow any strict object oriented approach and doesn’t use an MVC pattern. But you can still write good code if you stick to certain rules and conventions.

Why you need to apply WordPress coding standards to your codebase

• Avoid your codebase becoming a big mess. If there are no standards applied to your code, then it can quickly become a big mess. Especially when there is more developers working on the same code. If they’re not kept in check, things escalate fast.

• Best practices. It is beneficial to the community when everyone is adopting the same practices when writing code.

• Security. Code standards should include checks to make sure that the code is securely written. It’s easy to forget a nonce on a form or to output a variable that is not escaped. WordPress coding standards define how to write secure code and should be strictly enforced.

• Documented code is much easier to read and understand. Your code standards should enforce documentation of classes, methods, variables etc. Having documented code is again a win for everyone as the code becomes much clearer when trying to add to it or refactor it.

There are coding standards for PHP, Html, JavaScript and Accessibility. Read all about it in the code handbook.

PHPCS and WPCS

The WordPress Coding Standards project is a whole set of PHPCS (PHP_CodeSniffer) rules to make sure your code written for WordPress follows the outlined conventions.

Install and setup

Since we’re using the excellent Bedrock that uses Composer for dependency management, let’s install phpcs and wpcs like this:

PHPCS

Bedrock already comes with phpcs, so your composer file should look like this.

"require-dev": {
    "squizlabs/php_codesniffer": "^3.0.2"
}

WPCS

Install the Standards using:

composer require wp-coding-standards/wpcs

This will add wpcs to your composer.json file

"require": {
    "wp-coding-standards/wpcs": "^0.14.0",
}

Set paths to the standards using composer scripts:

This will set paths when doing both composer install and composer update

"scripts": {
    "post-install-cmd": "./vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs",
    "post-update-cmd" : "./vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs",
}

Make sure your setup is correct by running phpcs -i from your project root

The installed coding standards are PEAR, PHPCS, Zend, PSR2, MySource, Squiz, PSR1, WordPress-VIP, WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core

If everything went well, the WordPress coding standards should be listed (WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core)

Test

Now that we have the Standards installed, lets setup a test command. Add this to your Composer scripts:

"scripts": {
    "post-install-cmd": "./vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs",
    "post-update-cmd" : "./vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs",
    "test": [
        "phpcs --report=full --colors -p --standard=web/app/themes/mytheme/codesniffer-ruleset.xml --ignore=*/vendor/*,*/node_modules/* web/app/themes/mytheme/ --extensions=php"
    ]
}

• Note 1: You can also just use --standard=WordPress. I’m using a custom ruleset that extends the WordPress standard. Red more here: Annotated ruleset
• Note 2: I’m only testing the theme in this example.
• Note 3: The --colors will display the logs in a nice colorful way, the -p will show progress

Running

composer test

Example output:

FILE: ...rojects/myproject/myfile.php
----------------------------------------------------------------------
FOUND 4 ERRORS AFFECTING 4 LINES
----------------------------------------------------------------------
34 | ERROR | [x] Expected 1 spaces before closing bracket; 0 found
36 | ERROR | All output should be run through an escaping function
    |      | (see the Security sections in the WordPress Developer
    |      | Handbooks), found '$image_src'.
90 | ERROR | [x] String "Create a Configuration File" does not require
    |        double quotes; use single quotes instead
63 | ERROR | [ ] Missing wp_unslash() before sanitization.
----------------------------------------------------------------------

From within your editor

I use VS Code and have the phpcs extension installed. Errors and warning show up in the problems tab. Simple as that. There is packages for most editors and IDs

Example output:

Note: When using a composer based workflow VS Code will pick up settings from the root. If your setup is different you can fine tune some configuration options

As part of your CI strategy

When using Continuous Integration we can automatically check if the code you are writing follows the coding standards for every commit that get pushed to the repo.

Codeship is our main workhorse when it comes to Contious Integration and Deployment, in some projects we also use Bitbucket Pipelines and Travis.

Codeship setup

Switch to the tests tab https://app.codeship.com/projects/XXXXX/tests/edit.

Setup Commands

phpenv local 7.2
composer install --prefer-source --no-interaction

Test commands

composer test

If you code doesn’t meet the standards you will see the full report in the Codeship test log, and well…Codeship tests will fail 😞

Conclusion

Consistency is key. Our Editors of course help us a lot, we have linters, formatters and other tools that help us keeping the code style consistent. I recommend taking this a step further and get this in your CI workflow to make sure of that and let you focus on writing your best code.

Happy Coding!