JavaScript coding standards in WordPress

The WordPress coding standards also provide guidelines for formatting and styling the JavaScript code of themes and plugins. In addition, these standards help promote code consistency with core PHP, HTML, and CSS code.

WordPress JavaScript coding standardsbuilt onjQuery JavaScript Style GuideBased on the jQuery Guidelines, launched in 2012, this guide is a comprehensive set of coding specifications that enhance code consistency and readability. Initially, the guidelines were specific to the jQuery project, but its success has led to widespread adoption outside of the jQuery framework.

While the jQuery guide informs WordPress standards, there are some significant differences in WordPress development:

• WordPress uses single quotes to declare strings.
• The case statement is indented within the switch block.
• Function contents are indented consistently, including full file closure wrappers.
• In order to be consistent with the PHP WordPress standard, some of the whitespace rules are different, such as the use of tabs or indentation.
• jQuery's hard limit of 100 characters, while encouraged, is not strictly enforced.

The WordPress JavaScript coding standards cover the following areas:

• code refactoringThe
• code spacing, including object declarations, arrays, and function calls:

// Object declarations
// DO
var obj = {
    name: 'John',
    name: 'John', age: 27, height: 179
    name: 'John', age: 27, height: 179
}
// DON'T
var obj = {
    name: 'John', age: 27, height: 179 }
    height: 179
}
// Arrays and function calls
// Include extra spaces around elements and arguments.
array = [ 1, 2 ]; foo( arg1, arg2 );
// Object declarations
// DO
var obj = {
    name: 'John',
    name: 'John', age: 27, height: 179
    name: 'John', age: 27, height: 179
}

// DON'T
var obj = {
    name: 'John', age: 27, height: 179 }
    height: 179
}

// Arrays and function calls
// Include extra spaces around elements and arguments.

array = [ 1, 2 ]; foo( arg1, arg2 );
// Object declarations
// DO
var obj = {
    name: 'John',
    name: 'John', age: 27, height: 179
    name: 'John', age: 27, height: 179
}

// DON'T
var obj = {
    name: 'John', age: 27, height: 179 }
    height: 179
}

// Arrays and function calls
// Include extra spaces around elements and arguments.

array = [ 1, 2 ]; foo( arg1, arg2 );

Use of semicolons:

// Always use semicolons
array = [ 1, 2 ];
// Always use semicolons
array = [ 1, 2 ];
// Always use semicolons
array = [ 1, 2 ];

Indentation and line breaks, including blocks and curly braces, multi-line statements, and chained method calls:

// Use tabs for indentation
( function ( $ ) {
    // Expressions indented
    function doSomething() {
        // Expressions indented
    }
} ) ( jQuery )
// if, else, for, while, and try blocks should span multiple lines
if ( condition ) {
    // Expressions
} else if ( ( ( condition && condition ) || condition ) {
    } else if ( condition && condition ) || condition ) { // Expressions
} else {
    // Expressions
}
// Line breaks must occur after an operator if the statement // is too long to fit on one line.
// is too long to fit on one line.
var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c +
    ' is ' + ( a + b + c ) + '</p>'; /* If a chain of method calls is too long to fit on a single line
/* If a chain of method calls is too long to fit on a single line, use one call per line.
   The first call should be on a separate line from the object on which the methods are called.
   The first call should be on a separate line from the object on which the methods are called. */
elements
    .addClass( 'foo' )
    .children()
        .html( 'hello' )
    .children() .html( 'hello' ) .end()
    .appendTo( 'body' );
// Use tabs for indentation
( function ( $ ) {
    // Expressions indented
    function doSomething() {
        // Expressions indented
    }
} ) ( jQuery )

// if, else, for, while, and try blocks should span multiple lines
if ( condition ) {
    // Expressions
} else if ( ( ( condition &amp;&amp; condition ) || condition ) {
    } else if ( condition &amp;&amp; condition ) || condition ) { // Expressions
} else {
    // Expressions
}

// Line breaks must occur after an operator if the statement // is too long to fit on one line.
// is too long to fit on one line.
var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c +
    ' is ' + ( a + b + c ) + '</p>'; /* If a chain of method calls is too long to fit on a single line
/* If a chain of method calls is too long to fit on a single line, use one call per line.
   The first call should be on a separate line from the object on which the methods are called.
   The first call should be on a separate line from the object on which the methods are called. */
elements
    .addClass( 'foo' )
    .children()
        .html( 'hello' )
    .children() .html( 'hello' ) .end()
    .appendTo( 'body' );
// Use tabs for indentation
( function ( $ ) {
    // Expressions indented
    function doSomething() {
        // Expressions indented
    }
} ) ( jQuery )

// if, else, for, while, and try blocks should span multiple lines
if ( condition ) {
    // Expressions
} else if ( ( ( condition &amp;&amp; condition ) || condition ) {
    } else if ( condition &amp;&amp; condition ) || condition ) { // Expressions
} else {
    // Expressions
}

// Line breaks must occur after an operator if the statement // is too long to fit on one line.
// is too long to fit on one line.
var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c +
    ' is ' + ( a + b + c ) + '</p>'; /* If a chain of method calls is too long to fit on a single line
/* If a chain of method calls is too long to fit on a single line, use one call per line.
   The first call should be on a separate line from the object on which the methods are called.
   The first call should be on a separate line from the object on which the methods are called. */
elements
    .addClass( 'foo' )
    .children()
        .html( 'hello' )
    .children() .html( 'hello' ) .end()
    .appendTo( 'body' );

• Assignment and global variablesThis includes the use and declaration of variablesconst, usage, global variables and public librariesletDeclare variables.var
• naming conventions.such as abbreviations and acronyms, class definitions, and constants:

// Abbreviations must be written in camelCase.
// All letters of acronyms should be capitalized.
const userId = 1; const currentDOMDocument = window.document; // All letters of acronyms should be capitalized.
const currentDOMDocument = window.document; const userId = 1; const currentDOMDocument = window.
const userId = 1; const currentDOMDocument = window.document; // Class definition must use UpperCamelCaseConvention.
class Human {
    ...
}
// Constants should use SCREAMING_SNAKE_CASE convention. const SESSION_DURATION = 60
const SESSION_DURATION = 60
// Abbreviations must be written in camelCase.
// All letters of acronyms should be capitalized.
const userId = 1; const currentDOMDocument = window.document; // All letters of acronyms should be capitalized.
const currentDOMDocument = window.document; const userId = 1; const currentDOMDocument = window.

const userId = 1; const currentDOMDocument = window.document; // Class definition must use UpperCamelCaseConvention.
class Human {
    ...
}

// Constants should use SCREAMING_SNAKE_CASE convention. const SESSION_DURATION = 60
const SESSION_DURATION = 60
// Abbreviations must be written in camelCase.
// All letters of acronyms should be capitalized.
const userId = 1; const currentDOMDocument = window.document; // All letters of acronyms should be capitalized.
const currentDOMDocument = window.document; const userId = 1; const currentDOMDocument = window.

const userId = 1; const currentDOMDocument = window.document; // Class definition must use UpperCamelCaseConvention.
class Human {
    ...
}

// Constants should use SCREAMING_SNAKE_CASE convention. const SESSION_DURATION = 60
const SESSION_DURATION = 60

Equality.

// Use strict equality/inequality checks (=== and ! ==)
// instead of abstract checks (== and ! ==).
if ( name === "John" ) {
    ...
}
if ( result ! == false ) {
    ...
}
// Also, with negation: if !
if ! ( result === false ) {
    ...
}
// Use strict equality/inequality checks (=== and ! ==)
// instead of abstract checks (== and ! ==).
if ( name === "John" ) {
    ...
}
if ( result ! == false ) {
    ...
}

// Also, with negation: if !
if ! ( result === false ) {
    ...
}
// Use strict equality/inequality checks (=== and ! ==)
// instead of abstract checks (== and ! ==).
if ( name === "John" ) {
    ...
}
if ( result ! == false ) {
    ...
}

// Also, with negation: if !
if ! ( result === false ) {
    ...
}

string (computer science)::

// Use single-quotes for string literals.
    var myString = 'Hello world!
// Use single-quotes for string literals.
    var myString = 'Hello world!
// Use single-quotes for string literals.
    var myString = 'Hello world!

switching statement::

// Use a break for each case other than default.
// Indent case statements one tab within the switch.
switch ( event.keyCode ) {
    // ENTER and SPACE both trigger x(). case $.ui.keyCode.
    event.keyCode ) { // ENTER and SPACE both trigger x(). case $.ui.keyCode.ENTER.
    ENTER: case $.ui.keyCode.SPACE: // ENTER and SPACE both trigger x(); case $.ui.keyCode.
        SPACE.
        SPACE: x(); x(); x(); x(); x()
    case $.ui.keyCode.ESCAPE.
        ESCAPE: x(); break; case $.ui.keyCode.
        ESCAPE: y(); break; case $.ui.keyCode.
    default: z(); break; case $.ui.keyCode.
        y(); break; default: z();
}
// Use a break for each case other than default.
// Indent case statements one tab within the switch.
switch ( event.keyCode ) {
    // ENTER and SPACE both trigger x(). case $.ui.keyCode.
    event.keyCode ) { // ENTER and SPACE both trigger x(). case $.ui.keyCode.ENTER.
    ENTER: case $.ui.keyCode.SPACE: // ENTER and SPACE both trigger x(); case $.ui.keyCode.
        SPACE.
        SPACE: x(); x(); x(); x(); x()
    case $.ui.keyCode.ESCAPE.
        ESCAPE: x(); break; case $.ui.keyCode.
        ESCAPE: y(); break; case $.ui.keyCode.
    default: z(); break; case $.ui.keyCode.
        y(); break; default: z();
}
// Use a break for each case other than default.
// Indent case statements one tab within the switch.
switch ( event.keyCode ) {
    // ENTER and SPACE both trigger x(). case $.ui.keyCode.
    event.keyCode ) { // ENTER and SPACE both trigger x(). case $.ui.keyCode.ENTER.
    ENTER: case $.ui.keyCode.SPACE: // ENTER and SPACE both trigger x(); case $.ui.keyCode.
        SPACE.
        SPACE: x(); x(); x(); x(); x()
    case $.ui.keyCode.ESCAPE.
        ESCAPE: x(); break; case $.ui.keyCode.
        ESCAPE: y(); break; case $.ui.keyCode.
    default: z(); break; case $.ui.keyCode.
        y(); break; default: z();
}

In addition, the WordPress coding standards outline several ways to write JavaScript codeBest Practices.

As with PHP, WordPress provides JavaScript code with theInline Documentation Standards. These inline standards are either formatted document blocks or inline comments that follow the inline JavaScript document'sJSDoc 3 Standard.. Inline standards cover functions, class methods, objects, closures, object properties, events, and file headers.

summarize

Coding standards are the backbone of efficient collaborative software development. They ensure code consistency and readability, simplify the coding process, improve maintainability, and promote teamwork. For WordPress developers, adherence to coding standards is critical to creating robust and scalable websites.