How to register and enqueue scripts in WordPress

There are many ways to load a script in WordPress. The recommended and the easiest of all is to use the script registration and enqueue functions that WordPress offers.

In this guide, I’ll teach you everything you need to know about loading scripts in WordPress:

How To Register a Script

WordPress gives you an easy way to load your JavaScript script files. First, you register them, and then you enqueue them. You can, however, skip the registration and enqueue them directly.

Registering scripts allows you to enqueue them on specific pages. If you use a script in 5 different pages and directly enqueue them in those places, then you’d need to update the code that enqueues them in all 5 places to make even the smallest change to the script name or its location.

Registering your scripts also allows you to load them conditionally on pages where it’s needed. This can speed up your website.

To register a script file, you can use the wp_register_script function:

wp_register_script($handle, $**source**, $dependencies, $**version**, $in_footer);

Here’s what the parameters mean:

• $handle — This will be the name of your script. You will use this name to enqueue the script on pages where you want to load it.
• $source — The source can be either a full URL of the script in case you’re loading from a CDN, or it can be a local script file.
• $dependencies — This is an array that lets you declare other registered scripts that this script needs to run. If your script needs jQuery, you’ll declare that here. This allows WordPress to only load scripts that are needed for any given page.
• $version — You can pass a version number for browser-level cache-bursting. Do this when you update the script to a newer version.
• $in_footer — Pass true if you want this script loaded in the footer.

Here’s what a call to wp_register_script looks like:

add_action("wp_enqueue_scripts", "wpturbo_register_scripts");
function wpturbo_register_scripts() { 
    wp_register_script('my-custom-script', 
                        get_template_directory_uri() .'/my-custom-script.js',
                        array ('jquery', 'other-custom-registered-script'),
                        false, false);
}

You can place this code in your theme’s functions.php file.

If you want to load it in a custom plugin, which is recommended if you aren’t using a custom theme, then you’ll need to use the get_plugin_directory_uri function instead:

add_action("wp_enqueue_scripts", "wpturbo_register_scripts");
function wpturbo_register_scripts() { 
    wp_register_script('my-custom-script', 
                        plugins_url('my-custom-plugin/my-custom-script.js'),
                        array ('jquery', 'other-custom-registered-script'),
                        false, false);
}

You can also pass a full URL if you want:

add_action("wp_enqueue_scripts", "wpturbo_register_scripts");
function wpturbo_register_scripts() { 
    wp_register_script('react', 
                        '<https://unpkg.com/react@18/umd/react.production.min.js>',
                        array (),
                        false, false);
}

How To Enqueue/Load a Script

Once you have registered your script, all you have to do is call the wp_enqueue_script function and pass it the name of the script that you registered.

wp_enqueue_script('my-custom-script');

You can call this function on any page, and it will enqueue your registered script.

This is how you can enqueue a register script:

add_action("wp_enqueue_scripts", "wpturbo_register_scripts");
function wpturbo_register_scripts() { 
    wp_enqueue_script('my-custom-script');
}

If you want, you can register and enqueue a script at the same time:

add_action("wp_enqueue_scripts", "wpturbo_register_scripts");
function wpturbo_register_scripts() { 
    wp_register_script('my-custom-script', 
                        get_plugin_directory_uri() .'/my-custom-script.js',
                        array ('jquery', 'other-custom-registered-script'),
                        false, false);
    wp_enqueue_script('my-custom-script');
}

Registering a script is useful in case you want to load it in more than one place conditionally.

If you want to load a script globally such as an analytics script, you can simply call the wp_enqueue_script function with the exact same parameters as the wp_register_script function:

add_action("wp_enqueue_scripts", "wpturbo_register_scripts");
function wpturbo_register_scripts() {
	wp_enqueue_script('my-custom-script', 
                    get_plugin_directory_uri() .'/my-custom-script.js',
                    array ('jquery', 'other-custom-registered-script'),
	                  false, false); 
}

Conclusion

wp_register_script allows you to register your scripts before you load them. This allows you to load scripts only on pages where you need them. It also makes sure that you only need to change your code in one place in case you change the script name or location.