A Newbie’s Guide to WordPress Coding Standards

The true beauty of WordPress is that it is open-source . Because of that, you can contribute to it and make it even more impressive. Yes. You ..

Although there is a definite commercial side for open-source software the underlying philosophy is simple: do something together . If you’ve worked with any group before, you know how difficult it can be to get people to check their ego at the door and play well.

The Powers That Be wrote the WordPress coding standards, a collection of rules HTML, CSS, JavaScript and PHP written specifically to keep the source code as clean and functional as possible.

Get it … functional? It’s a code joke.

Why do we need WordPress coding standards?

My writing style is casual, quirky and full of wordplay. My wife is collected, professional and concise. Yours is … something quite different and unique too. None of them is bad or bad, just different.

This also applies to code. My HTML code will be different from yours, my JavaScript may make your eyes bleed, and your CSS could be very beautiful.

Despite the prescriptive syntax of the code, what you and I write line by line will be a little different. WordPress coding standards are there to make sure that all those who come after you and contribute to the code can not only read and understand your work, but also add their own elements.

What do you need to know to contribute?

The first time you look at standards, they may seem quite restrictive. And they are somehow. If they were more forgiving, they would not do their job, and the basic WP code would be a mess.

But the documentation is so complete that you do not have to remember all the details. See everything you need, referencing each section as you analyze and debug your code before your final query is accepted and merged.

If the term draw the petition is foreign to you, see our Beginner’s Guide for git and Github beginners . You must be familiar with git because the WordPress code lives on Github.

Examples of WordPress coding standards

Each of the basic languages ​​that make up WordPress has its own standards: PHP JavaScript HTML CSS . If you are really dedicated to the cause, you can eventually contribute something with all four.

If you are not at the point where you may have the impression of being able to contribute, that’s fine too. By watching and learning the basics of coding standards, you will make your life a lot easier when you are ready.

HTML Examples

Have you ever opened a web page, checked the source code, and have you been mistaken about how anyone ever thought writing this code was a good idea?

Me too.

That’s why HTML standards are configured as they are. Just behind the standards W3C themselves, these are the standards that you should apply to the muscle memory of your fingers.

Indentation

Apart from braces, withdrawals are one of the most contested elements of most code. The WordPress Codex says to use the tabs and that you must indent your code so that the open and close flags are aligned. Note: It has taken me a long time to get used to it, as I am highly in the camp you indent with two spaces. If you are too, you have my sympathies.

Although:

Hello world!

Goodbye, world!

Bad:

Hello world!

Goodbye, world!

The same logic applies when you mix PHP and HTML flags.

Citations

Use quotes. Do not use quotes. Double or single is your choice, but use them at all costs. You have been warned.

Although:

Your email address:

or

Your email address:

Bad:

Your email address:

So … quotes = yes. No quotes = bad.

For the rest of the HTML coding standards, you can go here .

CSS Examples

When it comes to CSS, most standards are for readability. There are many classes and identifiers in WP. If we’re not careful, these style sheets can turn into a nightmare.

Structure

The WordPress coding standards say that CSS must have each element on its own line, from class and id selectors to style and braces themselves. In addition, you must use specific names for your items that others can follow.

Although:

# email-div-about,
# email-div-blog {
text-align: center;
viewing block;
margin: auto;
}

Bad:

.awesome-emails, .amazing-something {text-align: center; viewing block; margin: auto; }

or even this:

.awesome-emails, # amazing-stuff {
text-align: center;
viewing block;
margin: auto;
}

You can see that the way of writing WP style sheets makes each element easier to identify and stylize.

Properties

Just like structure and selectors, properties should be as concise and specific as possible. This makes the lives of other users a little easier, and it also reduces the overall size of the code – and when the repo is as expansive as the WP, every bit and every byte counts.

Although:

# form-submit-btn {
viewing block;
background: # 000;
color: #fff;
margin: 20px;
}

Bad:

# bjs-awesome-button {
White background;
color: #FFFFFF;
border: 35PX;
Right margin: 30;
}

The second is just ugly. And not in the awww, this dog is so ugly that he is cute.

And there are many more CSS standards to check, too.

JavaScript Examples

There is a lot of important WordPress coding standards JavaScript . They are not so hard to remember, or really so far from typical JS good practices, but there is enough for you to become familiar with them.

Variables

What would JavaScript be without variables, you know? You can not do much without a good ole var and that’s what I want you to do correctly. By following the official guide, you will avoid the odd problems of reach that affect different parts of the repo than you think.

Although:

var b, j, k, awesome,
// You should also indent with tabs here!
value = “Something”;

Bad:

var b = true;
var j = false; // As this is a bad example, here is a poorly done comment!
var k = b + j;
var awesome = true;

Comments

Okay, so maybe comments are not part of the JavaScript code itself, but I’m a comment addict and I think a well-researched code is an art. The core team has put together some good guidelines to comment that make me smile.

Individual line:

function bjk ();
// Be concise and explain the following line of code
$ (& # 39; Beej & # 39;) .beAwesome ();

Multiple lines:

/ *
* Make sure to keep the asterisks
* aligned when you put comments on
* several lines. Like that!
* /

Integrated:

These will only be used to annotate the parameter lists.

Function bjk (param1, param2, param7 / * explain why I omitted params 3 to 6 * /, param 8) {
// fantastic code is going here
}

You can now annotate with the best of them.

And while you’re there, you should probably read the full list of WordPress coding standards for JavaScript.

Examples PHP

WordPress is a PHP software. Developers and contributors are adding JavaScript packages these days, but it’s still PHP.

PHP Tags

The opening and closing of PHP tags should be on their own lines (again, for readability), and you should never, ever, shorten them . Never.

Although:

or

Wrong PHP code:

Naming conventions:

PHP can do a lot. So much of. But it’s also a mess. It’s because of PHP that I’ve discovered the term spaghetti code and if you follow the WordPress coding standards, you may be able to help clean things up by naming things properly.

the functions are in the case of the snake: function_name
Classes are snake, but with capital letters: Class_name
Unless the class is an acronym, then it is the case of capital letters: WP_JS
Constants are also uppercase, snake case: CONSTANT_NAME
the files are written in lower case with dashes: wp-config.php
the functions are in the case of the snake: function_name

These are the simplest standards you will need to learn how to contribute to the PHP code base of WordPress. The others are, once again, found in the codex .

How can you contribute?

Once you are familiar with reference standards, you may want to learn about how to become part of the community of contributors.

Probably the best is make.wordpress.org because it is there that they expect it (wait for it …) make WordPress.

Everything from documentation, kernel, support, design, to all coding languages, has regular Slack meetings that you can skip freely and immediately.

In addition, there are days and panels of WordCamp contributors. At WordCamp US 2017 after the main part of the conference, people came together for sessions that were specifically designed for people to contribute. Other camps will have similar offers. If you are interested in getting involved, I strongly suggest talking and meeting some people who are already contributing.

Between forums, Slack, contributor days, and the incredible amount of documentation available in the WP Codex, you should not have a hard time making sure your code can win Prettiest WordPress Code Award ].

So get out, codejunkie! And remember, we say that the code is poetry for a reason.

PS: we need a real prize like this to give a trophy or a belt and a tiara or something to give to the national WordCamps for the most beautiful code contribution that year. Let’s do that, people!

Article thumbnail by Maksim M / shutterstock.com