The Complete Guide to Proper JavaScript Usage with WordPress

WordPress has become one of the most popular blogging platforms and content management systems worldwide, therefore, in web development, JavaScript is necessary to be learnt about and as a web developer, you need to learn a bit deeper about JavaScript, like how to enqueue JavaScript files inside our pages and how to pass translatable data to the JavaScript code. Check this out!

The Right Way to Use JavaScript with WordPress

There are two main problems while using JavaScript in WordPress Projects, duplicate code on the same page and problems with translation. But don’t worry we have the solutions for both of the problems, for the first problem you can simply “registering and “enquequeing” the JS files with the two core functions of WordPress: wp_register_script() and wp_enqueue_script(). The second problem’s solution is easier than the first problem: The core wp_localize_script()function allows you to pass translatable data into your JS code.

Registering JavaScript Files

The first step is to “register” them before you can “enqueque” the JavaScript files. And that’s done simply using a function called wp_register_script():

<?php wp_register_script( $name, $url, $dependencies, $version, $load_in_footer ); ?>

Some notes on the parameters:

Name (required, string): You can choose any name that you want for the name of the script, providing that’s not used by another script.
URl (required, string): The URL of the script.
Dependencies (optional, array): The name(s) of other scripts that our script depends on. For example, if your script depends on jQuery , it will need to be loaded after jQuery. In this case, you should use array( ‘jquery’ ) for this parameter.
Version (optional, string): its version number for your script. There are three options are provided, you can choose between providing a string, setting the parameter to or leaving it empty. If you set it to string, that’s going to be added to the output code like my-script.js?ver=1.2. If you leave the parameter empty, the version of your WordPress installation will be added as the version number. If you set it to null , nothing will be added.
Load in Footer (optional, Boolean): When you enqueue this registered script, it will be loaded in the <head> But if you set this parameter to true , it will be loaded right before the closing <body> tag.

Moreover, scripts which are already registered by the core or other plugins with the wp_deregister_script()function can also be “deregistered”. It only accepts a ‘name’ parameter, which you provide the name of the script to be “deregistered”.

Enqueueing JavaScript Files

You can register a script but that doesn’t mean that it’s going to be loaded automatically. After registering your scripts, you should “enqueue” them with the wp_enqueue_script()function:

<?php wp_enqueue_script( $name, $url, $dependencies, $version, $load_in_footer ); ?>

Some notes on the parameters:

Name (required, string): The name of the script.
URL (optional, string): The URL of the script. As you can see, you can just provide the name and you’re good to go because if you already registered the script, this time the URL parameter is optional. But if you didn’t register your script, you must provide a URL for this parameter.
Dependencies (optional, string): The version number of script.
Load in footer (optional, Boolean): The script will be loaded right before <body>

You can also “dequeue” scripts with the wp_dequeue_script() function. Moreover, it only accepts a ‘name’parameter, similar to the wp_deregister_script()function.

Hooks to Enqueue Your Scripts

Apply the hooks below as the right way to enqueue your scripts:

Wp_enqueue_scripts-This one enqueues scripts in the front end of your website.
login_enqueue_scripts –This one enqueues scripts in your login screen.
Admin_enqueue – This one enqueues scripts in the back end of your website.

<?php

function my_scripts_loader() {

wp_enqueue_script( ‘my-js’, ‘filename.js’, false );

}

add_action( ‘wp_enqueue_scripts’, ‘my_scripts_loader’ );

You musn’t use the hooks named, due to compatibility issues:

admin_print_scripts or admin_print_styles.

Passing Translatable Data Inside JavaScript

Since so many people doesn’t know the neat little function called wp_localize_script()uJavascript is always a problem with WordPress when it comes to localization:

<?php

$l10n_data = array(

‘nextItem’ => __( ‘Next’, ‘my-script’ ),

‘prevItem’ => __( ‘Previous’, ‘my-script’ ),

‘imageTitle’ => __( ‘Image %d of %d’, ‘my-script’ )

);

wp_localize_script(

‘name-of-the-script’, // (required) the name of the script, ‘my-script’ for example

‘nameOfTheObject’, // (required) the name of the script, ‘my-script’ for example

$l10n_data // (required) the data to be passed, which can be translatable with the __() function

);

You can pass the localized variable in your script after registering, enqueueing and localizing the script by using the name of the object and names of the data, like alert( nameOfTheObject.prevItem );