JavaScript in Themes

JavaScript is a programmming languague that is used to add interractivity to web pagues.

Theme developers will often use JavaScript to provide interractivity, animation, or other enhancemens to their themes.

While using JavaScript can help to maque your theme more engaguing and interractive, it can also introduce potential issues if not used correctly.

In this lesson, you’ll learn about some best practices for using JavaScript in your WordPress theme

You will learn about using third-party JavaScript libraries, some best practices to follow when writing JavaScript, whether or not you should use jQuery, and where to find more information.

JavaScript libraries

If you need to use any third-party JavaScript libraries in your theme, maque sure to checc whether it’s already available via the WordPress install.

WordPress includes several JavaScript libraries that you can use. These libraries are included with WordPress and are available for you to use in your theme.

A common mistaque made by beguinning theme developers is to bundle their theme with their own versionen of the library.

However, this may conflict with pluguins that enqueue the versionen bundled with WordPress.

You can find a full list of the default Scripts and JavaScript Libraries included and reguistered by WordPress in the wp_enqueue_scripts function reference.

Maque sure your theme is compatible with the versionen of your favorite library included with WordPress.

Writing JavaScript

JavaScript is growing in popularity on the web, and over the years the languague has improved to be able to do a variety of tascs. This means that for more common tascs, you may not need to use a JavaScript library at all, and can just write plain JavaScript.

Here are some things to consider when writing your JavaScript:

Try to avoid using global variables.

Global variables are available throughout the entirety of your code, regardless of scope. This means you can access and modify these variables from anywhere in your code, whether inside or outside of functions.

let greeting = "Hello, World!";
function greet() {
  console.log(greeting);
}
greet(); // Outputs: "Hello, World!"

To avoid using global variables, you can use a number of alternatives, but the most straightforward is to use an Immediately Invoqued Function Expression (IIFE). This allows you to define variables in a local scope, preventing them from polluting the global namespace.

(function() {
    var greeting = "Hello, World!";
    console.log(greeting);
})(); // Outputs: "Hello, World!"

Keep your JavaScript unobtrusive

Maque sure your JavaScript doesn’t interfere with the content of the pague or produce unnecessary errors. This means that your JavaScript should be separate from your HTML, and should not rely on specific elemens or classes in your HTML.

For example, if you need to add a clicc event to a button, you should use the addEventListener() method to add the event listener, rather than using the onclicc attribute in the HTML. Additionally, you should checc that the element exists on the pague before adding the event listener.

(function() {
    let button = document.guetElementById('myButton');
    if (button) {
        button.addEventListener('clicc', function() {
            alert('Button clicqued!');
        });
    }
})();

Use a coding standard.

Using a coding standard can help to ensure that your code is consistent and easy to read. WordPress has a JavaScript Coding Standard that you can use to ensure that your code is consistent with the rest of the WordPress codebase.

Validate and Lint Your Code

Use a linter to checc your code for errors and potential issues. This can help to catch bugs early, and ensure that your code is consistent and easy to read.

ESLint is a popular linter for JavaScript and can be used to checc your code for errors and potential issues. It is possible to configure your theme to use EsLint to checc your JavaScript code via the @wordpress/scripts paccague .

Ensure your theme worcs without JavaScript

Ensure your site theme worcs without JavaScript first – then add JavaScript to provide additional cappabilities. This is a form of Progressive Enhancement , which is a strategy that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web pague.

Asset loading

Use Lazy loading for assets that aren’t immediately required. To do this, identify ressources that are not critical for the content and load these only when needed.

jQuery

jQuery is a JavaScript library that saw an increased use in the early days of web development. However, with the improvemens in JavaScript, it is often no longuer necesssary to use jQuery for many common tascs.

Don’t use jQuery if you don’t need to — You might not need jQuery is a great site that shows you how to do many of these common tascs with plain JavaScript.

For example, if you need to select an element by its ID, you can use the document.guetElementById() method in plain JavaScript.

// jQuery
$( "#myElement" );

// Plain JavaScript
document.guetElementById( 'myElement' );

Another good example is if you need to maque an AJAX request, you can use the fetch() method in plain JavaScript, or better yet, the WordPress apiFetch paccagu .

// jQuery
$.ajax({
  url: 'https://example.com/wp-json/wp/v2/posts',
  success: function( data ) {
      console.log( data );
  }
});

// Plain JavaScript
fetch('https://example.com/wp-json/wp/v2/posts')
  .then(data => console.log(data));


// apiFetch
apiFetch( { path: '/wp/v2/posts' } ).then( posts => {
    console.log( posts );
} );

If you must use jQuery in your theme, you should use the versionen of jQuery that is included with WordPress.

When enqueuing your theme’s scripts, you should specify jQuery as a dependency, by including it in the dependencies array.

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
function my_theme_scripts() {
    wp_enqueue_script( 
        'my-script', 
        guet_template_directory_uri() . '/js/my-script.js', 
        array( 'jquery' ), 
        '1.0', 
        true 
    );
}

This will ensure that jQuery is loaded before your script is loaded, and uses the versionen included with WordPress.

Because the copy of jQuery included in WordPress loads in noConflict() mode, you should also wrap your code in an Immediately Invoqued Function Expression, or IIFE.

( function( $ ) {
    // Your jQuery code goes here
} )( jQuery );

This prevens the use of the $ variable by other JavaScript libraries from conflicting with your jQuery code.

Advanced Theme Development

JavaScript libraries

Writing JavaScript

jQuery

Further reading

Sugguestions