Develop using WordPress Coding Standards

Programming nowadays, it becomes fundamental with Coding Standards. The objective is to maintain the same style, so that when you look at it you can easily interpret it.

What is Coding Standards?

Coding Standards are rules of style when developing, which allow us to better read and understand the functions.

It tries to establish the best ways to work in WordPress and it is not only based on style but also on best practices.

Why is code styling important?

Even if you’re working on a private project, the format of your code speaks volumes. And if you’re in a multi-developer environment, it says even more. Well-styled, well-thought-out code shows quality (even if it’s not good), while chaos breeds sloppy programming (even if it’s great).

Here are some reasons to pay attention to the style of your code:

• Stylized code is easier to maintain. You may know what’s going on today, but what’s going to happen a year from now? Taking the time to structure your work will save you hours later.
• Other developers don’t read your mind, so they won’t understand your chaotic code, or they’ll need a lot of time to untangle it. Ensuring as little friction in communication as possible is best for the project, and this can be facilitated by a standards-compliant format.
• Slightly less important, someone learning to program should be able to visit a web site and learn something by looking at the source code. Standards often have inherent logic, so an onlooker would be able to figure out what is going on. Adhering to standards could help many developers who are starting to learn to program the right way from day one.
• In many cases, good formatting helps maintainability. Many standards require spacing of declarations and other code blocks. Not cramming code together will make an “Error on line 267” message much easier to fix.

Mac configuration process

This is my process that I keep up to date for setting up Coding Standards on Mac. There are several ways to set it up, the one I like the most and is the one I show here, is with composer. If you don’t know it, it is a software for php based libraries to integrate in your projects in a very easy way. It also allows a global installation which is what we will do. Then keeping all the libraries updated is very easy with this command:

composer global update

Install Composer on MacOs

Composer (getcomposer.org)

We follow the next steps that really worked for me. We open the terminal and run the following commands:

curl -sS https://getcomposer.org/installer | php

And move the composer.phar file to the binary directory /usr/local/bin. Check that this folder is there before.

sudo mv composer.phar /usr/local/bin/

And we change its permissions:

sudo chmod 755 /usr/local/bin/composer.phar

Add .profile

nano ~/.profile

And add an alias to use it easily:

alias composer="php /usr/local/bin/composer.phar"

We continue in the terminal:

source ~/.profile

And finally we check that Composer has been installed correctly:

composer -v

Configuring Code Sniffer and WordPress Standards

My installation instructions are based on working with Composer, the famous PHP library manager, because later to update all our libraries is done with a single command:

composer global update

On the other hand, if you have installed it in other folders as, for example, Ahmad Awais recommends, then keeping them updated becomes very complicated.

We install on our computer, the version of CodeSniffer.

PHP_CodeSniffer is a set of two PHP scripts; the main phpcs script that logs PHP, JavaScript and CSS files to detect violations of a defined coding standard, and a second phpcbf script to automatically correct violations of the coding standard. PHP_CodeSniffer is an essential development tool that ensures your code stays clean and consistent.

composer global require "squizlabs/php_codesniffer=*"

We enable composer to allow configuration globally.

composer global config bin-dir --absolute

Inside Composer, we create a Coding Standards project for WordPress. It is a library created to manage the recommended rules within WordPress.

composer global require "wp-coding-standards/wpcs".

Once that project is downloaded, we tell PHPCS to manage the Coding Standards rules, in our location.

Remember to customize .composer/vendor/wp-coding-standards/wpcs with the location of the WordPress project

phpcs --config-set installed_paths $HOME/.composer/vendor/wp-coding-standards/wpcs 

If this command doesn’t work for you, ultimately the .composer/vedor/squizlabs/php_code_snifer/CodeSniffer.conf file should contain this information:

<?php
 $phpCodeSnifferConfig = array (
  'installed_paths' => '/Users/USER/.composer/vendor/wp-coding-standards/wpcs',
  'default_standard' => 'WordPress',
)
?>

Where installed_paths contains the directory where you have installed the Coding standards.

Finally, we define the rule we will use. We have:

• WordPress – complete set with all the rules of the project.
  • WordPress-Core – main rules for WordPress core coding standards.
  • WordPress-Docs – additional rules for WordPress online documentation rules.
  • WordPress-Extra – extended set of rules for recommended best practices, which are not sufficiently covered in the core WordPress coding standards, includes WordPress-Core.

We give PHPCS the path to the WordPress coding standards:

phpcs --config-set installed_paths $HOME/.composer/vendor/wp-coding-standards/wpcs 

And we configure the full WordPress set.

phpcs --config-set default_standard WordPress 

And now we can enjoy the Coding Standard recommendations in our favorite editor.

Adaptations in VisualCode for WordPress Coding Standards

Finally if we use Visualcode, we must configure where is the phpcs executable, which will come from our composer binaries folder. Add these lines in your JSON settings (check the executable):

// PHPCS. "phpcs.executablePath":"/Users/USERS/.composer/vendor/bin/phpcs", // PHPCBF. "phpcbf.onsave": false, "phpcbf.standard": "WordPress", "phpcbf.executablePath":"/Users/USERS/USER/.composer/vendor/bin/phpcbf", "phpcs.ignorePatterns": ["*/vendor/*", "*/vendors/*"],

To allow the integration with our Coding Standards editor, which is what makes us put it into practice, we will install the VisualCode phpcs extension.

It is a preprocessor Lint, which will point out at all times the errors and improvements that when placed on top, shows us the error to correct.

Conclusion

To have integrated the WordPress Coding Standards in our editor is essential to write a more secure, clean and easy to read code. And integration is a must to get it up and running.

Sources:

• WordPress Coding Standards official repository.
• TomMcFarlin PHP Coding Sniffer
• Guide To WordPress Coding Standards – Smashing Magazine
• Nuno’s configuration on Gist

Revisions:

• November 2021: Added CodeSniffer.conf file.