WordPress is a truly global platform that powers over 40 percent of online content. Developers from around the world can access this popular Content Management System (CMS), and contribute themes and plugins to improve the user experience. However, the open-source nature of WordPress can also lead to some confusion among contributors.
Fortunately, there are certain practices in place that help developers work together seamlessly. This includes the WordPress Coding Standards, which provide guidance to both new and experienced developers.
In this article, we’ll take a closer look at the WordPress Coding Standards and why they are important for developers. We’ll then share some advice for following these standards. Let’s dive right in!
An introduction to WordPress Coding Standards (and why they’re important)
The WordPress Coding Standards is a set of guidelines that shows developers how to organize their code. These standards were designed to facilitate collaboration among developers from different backgrounds:
Whether we’re building an e-commerce site or developing WooCommerce plugins, these standards are there to help us create a high-quality product. Moreover, they also make it easier for developers to build on or adjust existing applications.
The many benefits of following WordPress Coding Standards (and some examples)
Every programming language has its own coding standards, and these are continuously updated to eliminate common errors. For instance, WordPress is currently trying to iron out existing inconsistencies in PHP code structures. This will help ensure that WordPress plugins and themes contain code that is clean and easy to read.
Coding standards also help us avoid common errors. Even experienced developers make occasional mistakes while writing code. By following the stylistic conventions of a particular programming language, we can create products that are error free.
In addition, some projects can require literally hundreds of lines of code. Therefore, it can be difficult to find the precise area that we want to change, whether to add more data or modify it. Having a set of commenting standards can help us navigate our code quickly.
For instance, it’s important to make comments often, both for personal referencing and helping fellow developers use our work. Section comments are preferred to inline comments, but the length should be restricted to approximately 80 characters per line.
In Javascript, a well-optimized comment would look like this:
someStatement();
// Explanation of something complex on the next line
$( 'p' ).doSomething();
// This is a comment that is long enough to warrant being stretched
// over the span of multiple lines.
Inline comments should only be used in exceptional circumstances, such as annotating special arguments in formal parameter lists:
function foo( types, selector, data, fn, /* INTERNAL */ one ) {
// Do stuff
}
Clearly defining your comments will help other developers understand exactly what each section pertains to. However, when your code gets longer you might need to do something to better organise it.
You can also improve readability by declaring arrays in PHP. There are two methods that are commonly used for this: long array syntax and short array syntax. More advanced developers tend to use short array syntax, which looks like this:
[ 1, 2, 3 ]
But for less experienced or beginner developers, the meaning may not be immediately clear. Instead, you can use ‘long array syntax’ for the same data:
array( 1, 2, 3 )
This is much clearer for new developers, and also for developers who have problems with their vision. For those reasons, it’s best to always use ‘long array syntax’.
Having clearly laid-out code is one thing, but being able to identify code specifics is another.
For example, when using id selectors in HTML/CSS, it is easy to use terms that are unique to us but not necessarily to anyone else:
#c1-xr {
margin: 0;
}
The id tag (c1-xr) will be styled accordingly, but to an outside user there is nothing clear about what this represents. Therefore, we should use ids that clearly explain what they are styling:
#contact-form-1 {
margin: 0;
}
Coding standards also help us ensure better site security through the use of nonces. In fact, many known vulnerabilities and security issues in WordPress plugins often hint at a lack of coding standards during the development stage.
As developers, it is advisable that we apply to these standards at all times when creating applications and plugins for WordPress as well as WooCommerce sites. It’s worth noting that WooCommerce has its own handbook for developers, which includes a set of guidelines for developing e-commerce software.
The importance of WordPress Coding Standards to collaboration
Many software development projects follow an agile methodology, but the developers working on them may not see them through from start to finish. When developers join a new company, the likelihood is that we will be joining an existing project. If there is an irregular approach to coding standards, then a new developer’s prior experience may not be sufficient for the specific project.
Adhering to a set of standards from the outset is vital for the project’s life cycle. We all have our own experiences and approaches to solving problems, but new developers are expected to adhere to their companies’ defined set of standards from the start. Therefore, the standards adopted should be clear and straightforward.
As we have seen, the benefits of following coding standards are numerous. It can lead to better maintenance and readability, and helps us avoid making mistakes when writing code. Moreover, it helps us ensure that our products are compatible with WordPress updates, and offer users protection against hacking attempts.
How to get started with WordPress Coding Standards (3 Tips)
Following coding standards is essential when developing plugins and themes for WordPress. Let’s take a closer look at how to ensure that your product is up to these standards.
1. Adhere to WordPress’ style guides
As an open-source platform, WordPress is a goldmine of resources. It contains style guidelines for popular programming languages, so as developers we can cover all our bases.
Let’s briefly look at what each one entails:
- PHP Coding Standards: These cover indentation, brace style, and formatting SQL statements, among other things.
- HTML Coding Standards: These include guidelines for elements, including indentation and self-closing tags.
- CSS Coding Standards: These cover some best practices for using properties, selectors, values, and more.
- JavaScript Coding Standards: These provide guidelines for working with objects, arrays, variables and more.
As developers, we are not expected to have all these standards committed to memory. Therefore, it’s important that we refer to the handbooks if and when necessary.
2. Have code reviews
Collaborative programming is an effective way of ensuring that our code follows specific standards. Having regular code reviews with our peers allows a set of fresh eyes to appraise what we have produced. It can also highlight coding errors and any deviations from standards.
Many companies like to rotate their developers to avoid key dependencies, so having our code checked against coding standards allows the next developer to continue without issue. However, if we are working on a solo project, we don’t have the luxury of a colleague to check our code for us.
As a solution, we can upload our projects to a repository like GitHub:
The GitHub community is very active, and we can always find someone who is willing to help. However, be careful that the data you share does not contain sensitive or classified information as it will be made public.
3. Ensure that your code follows accessibility standards
Lastly, it is important to also follow Accessibility Coding Standards. As developers, it is our responsibility to ensure that the final product is accessible to all users.
For example, one vital accessibility element is the use of image alt tags:
The ‘alt’ tag for this image would be something like:
alt="Storm with black sand"
If the picture fails to load, this text will be displayed instead. Thus, the user will know what the picture contains. Those who rely on a screen reader will hear the content of the ‘alt’ tag.
Fortunately, there are validators that scan your code for accessibility errors. One popular tool is Markup Validation Service, which scans a complete web page and displays every accessibility error in our code.
Conclusion
The WordPress Coding Standards help developers produce high-quality and accessible plugins and themes. When used correctly, these guidelines can prevent common coding errors and improve readability for programmers working together.
Do you have any questions about following WordPress Coding Standards when developing your plugins and themes? Let us know in the comments section below!
Leave a Reply