WordPress Coding Standards

Overview

The purpose of the WordPress Coding Standards is to create a baseline for collaboration and review within various aspects of the WordPress open source project and community, from core code to themes to plugins.

What is PHP CodeSniffer(PHPCS)?

PHP Code Sniffer (PHPCS) is a package for syntax checking. It can check code against defined rules covering anything from whitespace through doc comments to variable naming conventions and beyond.

Prerequisite

Composer

For adding WPCS the Composer is required ( One time Installation )

First check if composer is installed in your system by using this command: composer
For Installing default composer version use this command: sudo apt install composer
Or check the Composer installation ref link OR refer this Doc.

WPCS Repository Details

WPCS clone command git clone -b master https://github.com/WordPress/WordPress-Coding-Standards.git wpcs
WPCS GIT Link

PHP CodeSniffer Details

To globally install PHP_CodeSniffer use this below command:
- composer global require "squizlabs/php_codesniffer=*"
Other ways to install code sniffer can be found here.

Configure PHPCS for WPCS

Getting Composer bin directory
- To get composer bin directory use this command composer global config bin-dir --absolute
Updating Environment variable.
- Open Terminal and add echo $PATH
- Use this command nano ~/.bashrc ( To Edit Environment variable in Ubuntu ).
- On the 2nd last line of the file add the composer bin directory as mentioned below eg: export PATH=“/home/prdxn122/.composer/vendor/bin:$PATH”
  - Add your composer bin directory instead of yellow marked directory
Saving the file
- Ctrl + X ( For exiting editor )
- Now it will ask for saving the changes press y and then enter
For check if your composer bin path is added successfully run this command echo $PATH
Now go to your WPCS cloned folder directory
- Open the terminal and run this command pwd. This command will show the path of your directory
- After getting the directory path, run this command phpcs --config-set installed_paths {Your-WPCS-Path}
- After configuring phpcs for WP run this command: phpcs -i and check if you are getting the output as mentioned below:
  - The installed coding standards are MySource, PEAR, PSR1, PSR2, PSR12, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs and WordPress-Extra

Check if PHPCS is working as excepted use this command on your theme directory phpcs --standard="WordPress" header.php

FILE: /var/www/html/folder/project-name/wp-content/themes/themeName/header.php

-------------------------------------------------------

FOUND 35 ERRORS AND 157 WARNINGS AFFECTING 1997 LINES

-------------------------------------------------------
4 | WARNING | Found precision alignment of 1 spaces.

9 | ERROR   | Missing file doc comment

9 | ERROR   | All output should be run through an escaping function

To check all phpcs flags use this Command: phpcs –help

Dynamically Run Phpcs and Phpcbf command on saving the php file

Install Run on Save extension by emeraldwalk on Vscode

As Vscode setting is displayed in UI format we have to change it to JSON format

Go To - Vscode -> setting -> Workbench - setting Editor -> And change the Editor option to JSON

  "emeraldwalk.runonsave": {
  "autoClearConsole": true,
  "commands": [
    {
      "match": "\\.php$",
      "isAsync": true,
      "cmd": "phpcbf --standard='WordPress' ${file}",
    },
    {
      "match": "\\.php$",
      "isAsync": true,
      "cmd": "rm ${workspaceFolder}/errors/${fileBasenameNoExt}.txt",
    },
    {
      "match": "\\.php$",
      "cmd": "phpcs --standard='WordPress,WordPress-Core,WordPress-Docs' ${file}",
      "isAsync": true,
    },
    {
      "match": "\\.php$",
      "cmd": "phpcs --standard='WordPress' -n-l ${file} > ${workspaceFolder}/errors/${fileBasenameNoExt}.txt",
      "isAsync": true,
    }
  ],
},

Validating WP Functions

Add PHP Intelephense Vscode extension by Ben Mewburn
For enabling this extension for WordPress go to Vscode -> setting -> Extension -> Intelephense -> Intelephense Stubs and click on add item and add WordPress.
As this function are not WordPress specific. It will give error for acf methods like get_field, have_rows.
For removing the above error clone this acf-pro-stubs in your document directory

Go to Vscode setting in JSON format add the acf-pro-stubs directory for PHP Intelephense

 "intelephense.stubs": [
   “WordPress”,
   ”/var/www/html/stubs/acf-pro-stubs”,
 ]

Now the ACF methods error will be gone.

Important Extension for Development

Using acf-snippets vscode extension by Anthony Hubble

Use below emmet/snippets for generating the acf code

Eg: type field:ifelse snippet and press enter

field:ifelse

<?php if ( get_field('field_name') ) : ?>
<?php else: ?>
<?php endif; ?>

field:if

<?php if ( get_field('field_name') ) : ?>
<?php endif; ?>

field:sub

  <?php if ( get_sub_field('field_name') ) : ?>
    <?php echo get_sub_field('field_name'); ?>
  <?php endif; ?>

field:image

  <?php if ( get_field('field_name') ) : ?>
    <img src="<?php the_field('field_name'); ?>" alt="<?php the_field(''); ?>">
  <?php endif; ?>

field:flex (Flexible Content Field)

  <?php if ( have_rows( 'field_name' ) ) : ?>
    <?php while ( have_rows('field_name' ) ) : the_row();
      if ( get_row_layout() == 'layout_field' ) : ?>
        <div class="class">
          <?php the_sub_field( 'field_name' ); ?>
        </div>
      <?php endif; ?>
    <?php endwhile; ?>
  <?php endif; ?>

field:relationship (Relationship Field)

  <?php $posts = get_field('field_name'); ?>
  <?php if ( $posts ): ?>
    <ul>
      <?php foreach ( $posts as $post ) : setup_postdata( $post ); ?>
        <li>
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
      <?php endforeach; wp_reset_postdata(); ?>
    </ul>
  <?php endif; ?>

For more snippets checkout this link.

Use WordPress & ClassicPress snippets plus autocompletions by Laurence Bahiirwa: For WordPress Method autocompletions

Fixing Minor formatting issues

For fixing Some issues in a file use this command phpcbf --standard="WordPress" header.php ( This command will format your WP php file )
To Fix some minor issue in all php file in a project use this command: phpcbf -p -s -v -n . --standard=WordPress --extensions=php