WordPress is a huge online platform for creating and managing websites and there are certain WordPress Coding Standards. It is an open-source platform so many developers are working on it. WordPress offers a big library of customized themes and plugins to help you get started. It is interesting to note here that almost 30% of the websites in the world are using WordPress right now. It doesn’t matter what type of business you are to work with; WordPress.
BBC America, Tribune Media, Vogue, Mashable, Flickr are some of the names. This list also includes some of the Fortune 500 companies as well. This gives you an idea of its popularity among developers and businesses alike.
Since WordPress is an open-source platform, any developer can contribute to its source code to make it better. With a platform of this magnitude, it is can easily become a huge mess of different coding styles from all the contributions. The result of this mess would create a lot of issues for the platform.
Developers wouldn’t be able to understand each other’s codes. It would become hard to navigate through the coding structure and error resolution would take so much time that the result will be a huge chunk of lags in website operations.
WordPress really put in a lot of thought into this issue. It came up with guidelines for developers and contributors who want to work on its code. These guidelines would become the coding standards which really helped in streamlining the process. Coding standards make it easier to manage and maintain such a diverse collection of code.
Developers can easily understand the code written by others as it would have followed the standard. It also helps individual developers to understand their own code. One look at the code will give you an overview of the whole code. You would easily locate any potential error in the code if it follows the coding standard.
This article is aimed at understanding what the coding standards are for WordPress. It will help sort out all kinds of issues for developers. Every developer should take a look at these standards before contribution to the WordPress platform. You should also go through these standards if you are looking for a WordPress website design company to work on your website project.
First, let’s take a look at what is a good coding standard.
- It should make the code easily understandable.
- It should provide a guide for the naming convention.
- It should explain style for every line of the code.
- It should set a standard for spacing, indentation, quotation, and tags.
When we talk about WordPress, it is a PHP-based CMS platform. It also uses HTML, CSS, and JavaScript. So, it offers different coding standards for each separate language. You should study these standards and other best practices, if you are a developer and you want to be a contributor to WordPress. In the end, you would have gained so much knowledge about WordPress coding standards even if you’re not sure about contributing right now.
Let’s start with the most basic one that is HTML.
HTML Coding Standards
Validation
WordPress coding standard states that every HTML page should be checked through Validator. It should be done so to maintain a well-formed markup in the HTML pages. This rule is of great help in resolving coding errors through automatic testing. It saves a lot of time than manual testing.
Spacing in Self-Closing Tags
There are some tags in HTML code that are self-closing. It is best to follow a proper spacing standard in self-closing elements of a code. The WordPress coding standard states that a forward slash should be preceded by one space as laid out in W3C rules.
Correct one: <area />
Incorrect: <area/>
Brace Style
A Brace or a bracket is used to denote statements or declarations such as block, function or array. Before WordPress coding standards, there used to be a lot of differences between developers on the use of braces. So, WordPress solved a lot of confusion regarding this matter. It states that a brace should be put on the same line instead of on the next line. It also recommends that developers should lookout for a single line and multi-line blocks in the statements.
A brace should be placed if the statement contains even a single multi-line block. But a brace can be avoided if there is no multi-line block in the statement. Other than that, it recommends that a brace should be placed for loops that don’t matter whether it has a single line or a multi-line block.
Tags and Attributes
Tags provide a basic structure to an HTML document. It surrounds all the content and helps the browser in understanding the type of content. For example,
Opening tag: <html>
Closing tag: </html>
This tag denotes an HTML document. Similarly, an attribute is what gives further information on the tag. So WordPress coding standard recommends that lower case letters should be used for writing tags and attributes. Moreover, value for attributes should also follow a lower case style if the machine interpretation of data is needed. But in the case of human readability, it should follow an upper case style only.
Classes and Functions
WordPress coding standards recommend a proper method for naming classes and functions in an HTML code. That is, names of functions should always be in lower case. Similar is the case with variables as well. As per the standard, multiple words, if used, should be separated by an underscore.
The class name should be written in the upper case letter. Developers should write the file names in the lower case letters and a hyphen should be used to separate multiple words.
Quotation and Indentation
In XHTML, all attributes should have a value, and all values should have a quote. But WordPress coding standard for HTML does not think of it to be the case. Although it recommends having the attributes quoted to avoid security vulnerabilities.
On the other hand, proper indentation allows the code to be compatible across all the different platforms. It also helps in maintaining the readability of the entire code. To help maintain compatibility and readability, WordPress states that tab should be used instead of space for indentation.
Coding Standard for CSS
The aim of establishing a standard for CSS coding in WordPress is to maintain a unified look for the overall code. It works as a benchmark for developers and contributors. In this way, WordPress ensures that the code is compatible, legible, and has a consistent outlook from the first line to the last one.
Although WordPress has set a coding standard for CSS, it recognizes the need to eliminate some inconsistencies in the core CSS code. Let’s look into it in more detail.
CSS Structuring
While there are a lot of different methods for structuring in CSS, the main purpose of all of them is to make the code as legible as possible. It helps in maintaining a flow to the document. WordPress coding standard recommends using tabs for indentation. There should be 2 blank lines in between the section and 1 blank line between blocks.
Each selector should have a comma or a curly brace at the end. Use 1-tab indentation before writing a property value and put a semicolon at the end. The closing brace should be aligned left on the same level as the selector.
Standard for Selectors
The coding standard for selectors in CSS is the same as for PHP. Selectors should be written in lower case letters with a hyphen separating the multiple words. Selectors should be human-readable. The values of attribute selectors should be written in double-quotes.
Properties in CSS
Specificity in properties makes the design less flexible. WordPress coding standard recommends that a colon and space should be placed after the properties. Lower case letters should be used while writing properties with an exception for the names of the fonts. Prefer using rgba for color codes while avoiding upper case letters as well. Using shorthand for value is also recommended in the WordPress coding standard for properties.
Coding Standard for JavaScript
The main aim of WordPress coding standards is to give the document a unified look. It is easy to lose consistency while so many different developers are contributing to the code. Following the WordPress JavaScript standards help in maintaining a smooth flow in the code. So let’s look at a few of them.
Source Code Refactoring
The basic purpose of refactoring in JavaScript is to update the source code. It is done so to maintain the code. There are many inconsistencies in the WordPress JavaScript core. They are working on improving it regularly. WordPress recommends best practices for coding JavaScript but offers some relaxation. So, it doesn’t recommend refactoring the old JavaScript files as necessary.
Spacing in JavaScript
Well-placed spacing allows for better optimization for browsers. WordPress coding standards direct developers and contributors to use tabs for indentation. In this segment, we will discuss some of the coding standards for spacing. No space should be left where the line ends. Long lines make readability of code difficult.
Although it is not a strict rule, a line should not exceed 80 characters anywhere. Use braces for blocks like if / for / try and are not placed on single lines. Any comma or semicolon should not have space before them. There should be space on both sides of ? and : in a ternary condition.
A new line should be placed after the end of every file. WordPress coding standard recommends keeping a check on the buildup of white space.
Variables
Variables are the most important part of a JavaScript without which it can’t do much. WordPress coding standards for JavaScript set forward some guidelines for everyone to follow. Some of these guidelines are related to the use of const and let in ES2015. It replaces var with const and let. Const is appropriate to use in the declaration if its value is not going to be reassigned.
In the case of var, it was necessary to declare a variable at the top of a function. In this case, a function should have a var statement at the beginning delimited by a single comma. It can create a lot of issues if a function has not declared a variable by a var.
Acronyms and Abbreviations
WordPress coding standard for JavaScript recommends that acronyms should be written in upper case letters to reflect a word. For abbreviations, it follows the camelcase style. The position of acronyms and abbreviations is also significant. The camelcase rules should be followed if either one of them is at the start of the variable name.
Coding Standard for PHP
WordPress coding standard for PHP is still evolving to improve on some inconsistency issues found in the core code. Here are a few guidelines regarding PHP.
Avoid Shorthand
Use separate lines for opening and closing tags of PHP. Make sure to sure that you never ever use shorthand tags for PHP. For example,
Correct:
<div>
<?php
echo ‘Hi, everyone!’;
?>
</div>
Naming Standard
Developers can avoid a lot of mess if things are named following the coding standards. Variables should be written in a lower case letter. Camelcase should never ever be followed. Use the underscore to separate multiple words. Class names should be written in upper case letters.
Similar is the case with acronyms and constants. File names should be written descriptively and in lower case. Files that have template tags should have -template added in the name to make it self-explanatory.
Quotes and Spaces
As per the WordPress coding standard for PHP, double quotes should be used for evaluating something. Single and double quotes end the attribute value if the text is not run through esc_attr() resulting in security issues in the code. It is recommended to remove the trailing space at the end of a line. Commas should always be followed by a space. Logical, string and comparison operators should also have space after them.
SQL queries
Most SQL queries have no issue if written on a single line. It can also be divided into multiple lines in case of a complex query. In such a case, put an appropriate indent for each line. Coding standards recommend using upper case letters for the SQL statements.
Conclusion
To conclude the discussion, coding standards help organizing the code for others to understand it easily. Some of the guidelines in these coding standards are not strict. A proper understanding of WordPress is necessary to understand what parts can be left out.
You should contribute towards making WordPress a better platform by sharing your insights in such a case. It will also help newbies in navigating through the code easily. As mentioned earlier, WordPress is a huge open-source platform so play your part in keeping it well-organized. Happy coding!