Understanding the Details of WordPress Theme Development Standards

WordPress theme development is more than just creating an appealing design. It includes writing clean code, testing of all types of content, and using the right template files. However, one of the most important things to take care of is the WordPress theme development standards. Yes, there are certain Theme Development standards set by WordPress which should be followed strictly. Therefore, we have gathered important standards to help you get started with WordPress theme development.

Coding standards

WordPress has set high standards for CSS, HTML, JavaScript and PHP. These coding standards have been introduced to make it easier for other developers to read and alter your code. If you are planning on developing for others and really want to “sell your code”, it’s the only way out. As a matter of fact, not every developer has same style of coding. Probably you are one of them who like writing each line of code in a single sentence. But while you think that your code is quite clean, there are certain common standards that are followed by developers around the globe to help developers code in the same style. All download centers and serious theme marketplaces need their developers to code keeping in with these standards.

HTML coding standards:
There are certain simple yet important policies to write standards-validated code.

W3C compliant code:
Writing W3C compliant code is one of the most important things. If your code is not W3C (World Wide Web Consortium) validated, it would be considered as an error. W3C compliant websites load faster and get higher search engine rankings. Therefore it is extremely important to always keep in mind W3C standards while writing the code.
Self-closing elements: Elements should be enclosed in proper self closing elements.
Example:
Correct: <br /> ending an element with a space, a slash and a “greater than” “>” sign
Incorrect: <br/>
The W3C standards specify that you should precede the self closing elements with a single space.
Wrapping the attributes: It is always suggested that you should wrap your attributes in either single ” or double "" quotes for better readability.
Indentation: Since HTML is used with PHP, proper indentation is required. Use tabs instead of spaces.
Example:

<?php if ( ! have_posts() ) : ?>
    <div id="post-1" class="post">
        <h1 class="entry-title">Unable to Find</h1>
        <div class="entry-content">
            <p>Sorry, we couldn't find anything.</p>
            <?php get_search_form(); ?>
        </div>
    </div>
<?php endif; ?>

CSS coding standards:

Like HTML, CSS coding standards were introduced to set a baseline for collaboration.

Structure: Though there are various different styles of structuring a stylesheet, it is imperative to maintain high degree of legibility. In order to indent different properties, use tabs instead of spaces
Example:

#selector-1,
#selector-2,
#selector-3 {
    padding: 15px;
    color: #000;
}

Selectors: Use hypens and lowercase letters to name “class” and “ID” in your stylesheet.
Example:

#comment-form {
    margin: 1em 0;
}
input[type="text"] {
    line-height: 1.4;
}

Properties: Terminate all the properties with a colon and a space. Use only shorthand for padding values, margin, list-style, font, border, background and hex code for colors #000000.
Property ordering: When it comes to writing properties, there is a particular order which should be followed.
Example:

• Order
• Positioning
• Box model
• Colors and typography
• Other

JavaScript standards:

Spacing: use liberal spaces for better readability. Indent with spaces and do not use any whitespace at the end of the line. Also, any comma “,” and “;” should not have any following space.
Objects: Object declarations should be made in different lines with one property per line only if that declaration is too long.
Example:

var map = {
    ready: 9,
    when: 4,
    'you are': 15
};

Function calls and arrays: There should always be extra spaces around elements and arguments though there can be certain exceptions.
Example:

array = [ a, b ];
foo( arg );
foo( 'string', object );
foo( options, object[ property ] );
foo( node, 'property', 2 );

PHP coding standards

There are numerous coding standards to keep into account when it comes to PHP such as Yoda conditions, Regular expressions, whitespace usage, single and double quotes, naming conventions, and formatting database queries.

Testing your theme:

You should always test your theme before putting it online. It should be able to deal with a variety of user data. There are various plugins available to help you test your theme such as Monster widget, RTL Tester, Theme mentor and much more. You can also make use of WordPress theme unit test.
Aforementioned are some of the major WordPress theme development standards. WP comes with some default themes. You can check these themes to have a better idea about development and coding standards. WordPress standards play a crucial role in theme development and therefore should be strictly followed when building a theme in WordPress.