How to add a JavaScript file to WordPress

Add a JavaScript file to WordPress

Add a JavaScript file to WordPress is not much difficult. You can achieve it by following this guide. Most of the newbies adding styles and scripts directly via header or footer. But that is not a good practice to adding styles to the WordPress directly. However it is working. You can simply add scripts to WordPress via functions.php file. Lets see how to do that.

First you need to create function in functions.php file.

I am defining my function as function nero_resources() {}

Then you need to enqueue the function as add_action( 'wp_enqueue_scripts', 'nero_resources' );

wp_enqueue_scripts is the enqueuing function name and nero_resources is our function name. Hope you clear both of these.

To register a script, there are five parameters we can use. Out of five two parameters are required and other three are optional. Will discuss the required parameters one by one.

$handle

This is the name of the stylesheet and has no default value. We must define this value as it hasn’t any default value. As well it is better to add a prefix for the handle. Assume you are going to add Bootstrap style and you can name the handle as ‘bootstrap’. This is fine but I suggest you use a prefix. For example ‘nero_bootstrap’. This will make you a unique stylesheet.

$src

Path to the Stylesheet referring $src. This is also required and you can use either remote assets or assets from the development. Either Plugin or a Theme. For themes use get_template_directory_uri() for theme directory reference and use plugins_url() for plugin.

These two are used when you are registering a script. Lets register bootstrap style for our theme.

wp_register_script( 'nero_bootstrap', get_template_directory_uri() . '/path/to/bootstrap.js' );

This will register bootstrap script. Once we have registered our bootstrap script then we need to enqueue it to the WordPress. For that you need to use one simple line of code as follow.

wp_enqueue_scripts( 'nero_bootstrap' );


Parameters usage in detail

$handle
(string) (Required) Name of the script. Should be unique.

$src
(string) (Optional) Full URL of the script, or path of the script relative to the WordPress root directory.

Default value: ”

$deps
(string[]) (Optional) An array of registered script handles this script depends on.

Default value: array()

$ver
(string|bool|null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.

Default value: false

$in_footer
(bool) (Optional) Whether to enqueue the script before </body> instead of in the <head>. Default ‘false’.

Default value: false


Now your whole function should look like this.

function nero_resources() {
	wp_register_script( 'nero_bootstrap', get_template_directory_uri() . '/path/to/bootstrap.js' );
	wp_enqueue_scripts( 'nero_bootstrap' );
}
add_action( 'wp_enqueue_scripts', 'nero_resources' );

Instead of two processes you can use this in same line. such as

wp_enqueue_script( 'nero_bootstrap', get_template_directory_uri() . '/path/to/bootstrap.js' );

This is also fine and working great. But I am highly recommending the first register then enqueue. That is the best way recommending.

That is all from this tutorial regarding add script in WordPress. Hope you enjoyed the tutorial. Happy learning ahead. Thanks for reading.

Recommended: Please follow our step by step guide how to create a WordPress Theme from scratch. You’ll be able to create your own theme at the end of these lessons.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *