Adding JS files in WordPress using wp_register_script & wp_enqueue_script

Most of the times, when you integrate your custom theme in wordpress. You keep the js files in footer.php of the webpage. But that is not the correct way to include the js files in the theme.

wp_enqueue_script and wp_register_script are the 2 functions that we are going to use for including the js files in out custom theme. First, let’s understand these functions one by one.

wp_register_script

The wp_register_script function registers the script with a name assigned by you. You can use/enqueue this script later on using the function wp_enqueue_script.

wp_register_script( string $handle, string $src, array $deps = array(),string|bool|null $ver = false, bool $in_footer = false )

$handle => name of the script. It should be unique
$src => path or url of the script relative to the WordPress root directory
$deps => array of scripts (handle names) on which this script depends
$ver => the version of the script (you can set it to any value of your choice). It is used for terminating cache related issues.
$in_footer => if set to false, the script is included in <head> of webpage. If set to true, the script is added in footer (before </body> of webpage).

$handle & $src are the required parameters.

wp_enqueue_script

wp_enqueue_script adds the registered script to the webpage.

wp_enqueue_script( string $handle, string $src = ”, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

$handle => name of the script. It should be unique
$src => path or url of the script relative to the WordPress root directory
$deps => array of scripts (handle names) on which this script depends
$ver => the version of the script (you can set it to any value of your choice). It is used for terminating cache related issues.
$in_footer => if set to false, the script is included in <head> of webpage. If set to true, the script is added in footer (before </body> of webpage).

$handle is the only required parameter. Other parameters are optional.

Now, you must be confused to see the same parameters in both the functions.
Right?

Here is the answer.
The same parameters are provided in wp_enqueue_script because it can be used without wp_register_script. Following are the 2 examples to demonstrate use of these functions to include the script files in a website.

And, oh yes. Before that I want to tell you that, you have to use these functions inside the action hook ‘wp_enqueue_scripts’.

Example 1 – Enqueue script using both wp_register_script & wp_enqueue_script functions

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

Example 2 – Enqueue script using only wp_enqueue_script function

function webolute_theme_scripts() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

Let me know if you have any query or if i missed anything in comments.