WordPress coding standards ensure consistency and maintainability across the platform’s vast codebase. These meticulously crafted guidelines distill WordPress development tips, fostering clarity and efficiency.
By following these WordPress Maintenance guides, developers worldwide harmoniously contribute, understanding each other’s work seamlessly. Get your WordPress development team to diligently follow WordPress coding standards to ensure high-quality, scalable, and maintainable solutions for the long term.
Why stick to WordPress coding standards?
WordPress coding standards aim to ensure code consistency across projects and contributors. It improves readability and maintainability for collaborative development and facilitates code reviews and adherence to best practices across the WordPress ecosystem.
What Are WordPress Coding Standards?
WordPress Coding Standards provide a baseline for collaboration and consistency across the WordPress project and community, from core code to themes and plugins. These standards, developed by the WordPress community, in consultation with WordPress support foums serve as best practices that WordPress developers and contributors should follow.
Learn More: How To Reduce The Impact Of Third-party Code?
Importance of Coding Standards
Coding standards help prevent common errors, improve code readability, and simplify modifications. By adhering to them, code appears as if written by a single person, making it easier for anyone to understand and modify.
Contribution to WordPress Core
If contributing to WordPress core, familiarizing yourself with these standards is crucial, as submitted code must comply.
Struggling to Maintain Coding Standards for Your Unique WordPress Site?
Let our expert WordPress developers handle the headache!
Components of WordPress Coding Standards
The standards cover language-specific guidelines for CSS, HTML, JavaScript, and PHP, as well as accessibility guidelines aligned with WCAG AA.
Also Read: How to Convert HTML to WordPress Theme?
Exception for Third-Party Libraries
However, third-party libraries incorporated into WordPress are exempt from these standards.
Examples of WordPress Coding Standards
Let’s explore WordPress Coding Standards through various examples to understand their application in real-world scenarios. These examples illustrate the best practices recommended for writing clear and maintainable code in WordPress.
PHP IN WORDPRESS
WordPress uses PHP updates as its core programming language. Adhering to PHP coding standards is crucial for maintainable and consistent code in WordPress. Here’s why PHP coding standards matter:
Line Breaks
WordPress doesn’t specify much about line breaks, but it’s common to add one after most statements. Also, it’s recommended to put variable definitions, if blocks, and array items on separate lines.
Indentation
To make your code easier to read, use indentation to show its logical structure. Tabs should be used at the beginning of lines, while spaces are used for mid-line indentation.
Space usage
Make your code easier to read by removing any extra spaces at the end of lines. Also, eliminate empty lines with tabs or non-breaking spaces. Use spaces within parentheses for clarity. Add a line break after an opening brace and before a closing brace, except for typecasting.
Quotes
In WordPress, the main rule is to use single quotes for strings unless you’re evaluating something inside. If you need quotes within a string, alternate between single and double quotes. Escaping quotes is allowed but rarely necessary.
Braces
The simplest way is to always use braces. While standards allow skipping braces for single-line “if” statements with no multi-line blocks in the same structure, this isn’t allowed for single-line loops. I prefer always using braces for clarity. Additionally, standards specify placing the opening brace on the same line as the initial statement, not below it as in PHP documentation.
Formatting SQL Queries
When writing SQL queries, remember to capitalize the keywords. Complex queries should be split into multiple lines. It’s important to understand queries well, especially their security aspects, which we’ll discuss later on. SQL injection attacks occur due to WordPress security mistakes, allowing hackers to directly access and manipulate the database behind a WordPress site.
Naming Conventions
In WordPress code, avoid CamelCase for names. Functions should use lowercase characters, with underscores if needed. Class names should capitalize the first letter of each word, separated by underscores.
File names should be all lowercase, with hyphens between parts. If a file contains a single class, name it after the class, prefixed by “class-“.
Use string values for function arguments instead of booleans for clarity. The most important rule is to make names descriptive. In a collaborative environment, aim to help everyone understand your code.
Comparison Statements
A good practice, not just for WordPress, is to always place the variable on the right side of a comparison. This way, if you forget an equal sign, it will cause an error rather than evaluating to true. If you like using ternary operators, it’s allowed, but it’s recommended to check for truth to make things clearer. An exception is when checking for nonempty variables using ! empty().
FORMATTING HTML
According to the WordPress Codex, it’s important to validate all HTML code using the W3C Validator. However, valid code doesn’t always mean it’s good code, although there’s a clear connection between the two.
Doctype
WordPress follows the XHTML 1.0 specification recommended by the W3C in 2000. Despite this, the Twenty Eleven theme, a default in WordPress, uses HTML5. There’s no real conflict because HTML5 includes XML serialization, allowing the use of “XHTML5.”
Using Quotes
In HTML, quotes are mainly used for attributes and their values. You can choose single or double quotes, but stick to one type consistently. Personally, I use single quotes where possible, as I do in PHP, for consistency. This helps me quickly spot any special cases in a line just by looking at the quotes.
Closing Tags
The XHTML specification mandates closing all tags. Void elements need to be closed with a forward slash just before the last angle bracket. Make sure there’s one space before the forward slash, as specified.
Indentation
Indent your HTML following the same rules as for PHP. Aim for a logical structure with your indentation. When combining PHP and HTML, indent the PHP blocks based on the usual flow of indentation.
FORMATTING CSS
Formatting CSS involves organizing and styling the presentation of web content, ensuring consistency and readability across different devices and browsers. Properly formatted CSS enhances the structure and visual appeal of websites, contributing to a better user experience.
Read More: How to Remove Unused CSS in WordPress?
Indentation and Structure
Your CSS should follow this rough schema: Write each selector on a separate line, even if you are listing multiple selectors for a ruleset. Also, each property-value pair should sit on its own line. Put the opening brace on the selector’s line, and put the closing brace on a separate line with the same indentation as the opening selector’s.
Naming Conventions
Use lowercase characters only. Separate words within a selector with a hyphen. Give your selectors human-readable names.
Properties and Values
There are quite a few rules for writing properties and values. Use shorthand versions of properties wherever possible, except when overwriting a previously defined property. Use lowercase HEX code for colors wherever possible. If appropriate, use the shorter version. Insert a space after the colon following a property. Always use lowercase characters, except when an uppercase character is required, such as with font names and vendor-specific properties. Organize CSS properties alphabetically, with the exception vendor-specific properties, which should always precede their general counterpart, and dimensional properties, which should be grouped together. If width and height are specified, write the width first.
Commenting
CSS supports only one type of commenting — block style; it does not have a separate notation for inline comments. Write short comments on one line, without a line break below. For comments that span multiple lines, insert a line break just after the opening syntax and a line break just before the closing syntax. If you use comments to delineate sections of the code, then use the following notation:
Using CSS Preprocessors
Using CSS preprocessors such as SASS and Less makes our lives as developers a lot easier, but they are not without drawbacks. The code produced by these tools is usually valid but cannot be said to be very clean. A style sheet produced manually (and thoughtfully) will be much more readable than one produced automatically by Less. It depends on what you’re doing. If your product is commercial, then the ultimate goal is a good user experience, with valid and optimized code. In this case, use the output of the preprocessor as the main CSS, but include the original file for developers. While your CSS will not conform to WordPress’ standards, including the original file bridges the gap somewhat until WordPress takes an official position. Sacrificing CSS coding standards in order to simplify the development process (with the goal of a better user experience) is OK. Sacrificing the validity of code is not.
How Can You Contribute to WordPress Coding Standards?
Code is like writing – everyone has their own unique style. Your HTML might look different from mine, my JavaScript could make your eyes bleed, and your CSS could be life-changingly beautiful. But when it comes to collaborating on a project like WordPress, having consistent coding standards is crucial.
The WordPress coding standards exist to ensure that anyone contributing to the codebase can easily read, understand, and build upon the work of others. By adhering to these standards, you’re essentially speaking the same language as other contributors. It’s like agreeing to use consistent grammar and formatting rules so everyone can seamlessly collaborate on the same book.
If you want to contribute to WordPress, familiarizing yourself with and following the coding standards is key. It allows your individual coding style to mesh perfectly with the larger WordPress codebase.
Conclusions
Sticking to WordPress Coding Standards is essential for maintaining a cohesive and collaborative codebase. These guidelines, developed by the WordPress community, serve as a common language for contributors worldwide. By following the standards for PHP, HTML, CSS, JavaScript, and accessibility, developers can ensure their code is consistent, readable, and maintainable.
As WordPress continues to evolve, these coding standards will play a crucial role in fostering a harmonious and efficient development environment for the entire community.
