How to Enqueue or Include Scripts, JS, Jquery in WordPress

WordPress Development

If you have just started with WordPress development, then enqueuing Scripts, Javascript, Jquery files and enqueuing CSS, Font-Awesome Icons, and Google Fonts in WordPress are one of the most important parts of WordPress development, that you must know.

However, you can directly include any js file in WordPress by linking them in the header but this is not best practice at all. It can lead to conflicts with other javascript files of WordPress theme and plugins and can break them as well.

To Include any scripts, Javascript or Jquery file, WordPress provides an enqueue wp_enqueue_script() function. This enqueue function accepts few parameters, let’s understand them to make use of this function.

wp_enqueue_script( ‘$handle’, ‘$src’, ‘$dep’, ‘$ver’, ‘$in_footer’ );

  1. $handle – this indicates the name of the script or ID of the script. It should be unique. It could be different from your actual script file name but it should be Unique. Basically, this handle helps to identify the script.
  2. $src – As can be understood by its name, It refers to the source of the script file or complete path to the script or JS file.
  3. $dep – This parameter refers to the dependency of that particular script or JS file to another JS file. This accepts an array of register scripts.
  4. $vers – This parameter adds a version number to your script. If you leave it blank then it will add your installed WordPress version to the script.
  5. $in_footer – This parameter helps you to choose whether you want to add your script files in header or footer. This accepts boolean value True or False. By default, this is set to False but you should make it to True to load all scripts in the footer and make your webpage loads faster.

So as of now, you got an idea about this function and its parameters. Now you are good to enqueue scripts in WordPress with the best practice.

Correct Way to Enqueue Javascript or Jquery Files in WordPress

As you can see in the below code, I am going to enqueue a custom javascript file to my WordPress website or theme. So I will just add this code into the functions.php file of my active WordPress theme.

wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js', array('jquery'), '1.0', true);

The above code will include or add this custom script in the footer of my WordPress theme in the frontend.

However, you can use it without defining dependency and other parameters at all something like this:

wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js');

But in WordPress, especially with javascript and Jquery, if you are creating something like an accordion, toggle, tabs, image cropper or something else within your website then you need a base script file or Javascript library to include, so at that point, you have to define dependency.

Thanks to WordPress Core, It already has some default scripts and javascript libraries included and registered. So you can directly access those scripts and libraries with their handle.

You can find default scripts and javascript libraries included and registered with WordPress here.

You can use the wp_enqueue_script() function to include scripts or JS files in WordPress but let’s make it a level up by using wp_enqueue_scripts hook. Now you must be thinking what is wp_enqueue_scripts hook.

wp_enqueue_scripts – to enqueue scripts and styles, WordPress provides this hook. It’s always a good practice to keep all your scripts and styles that you want to enqueue in a function and then enqueue them all together with this hook.

Difference between wp_enqueue_script and wp_enqueue_scripts

  • wp_eneque_script() – this is the function that we use to enqueue scripts with in WordPress.
  • wp_enqueue_scripts – this is the WordPress hook that we use to enqueue scripts and styles both.

Enqueue Scripts or JS file with wp_enqueue_scripts hook

To enqueue scripts or js files with wp_enqueue_scripts hook, just enqueue your scripts within a function and use that function with this enqueue hook. As shown in the below example.

// Enqueue Scripts and JS files in WordPress
function enqueuing_scripts(){

wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js', array('jquery'), '1.0', true);

}

add_action( 'wp_enqueue_scripts', 'enqueuing_scripts' );

// Ends here

That’s it.

I hope this article helps you to understand the correct way of enqueuing scripts and js files in WordPress.

Bhuvnesh Shrivastava
Owner of diveinwp.com, solely responsible for creating helpful, informative content about WordPress, a fulltime WordPress developer with 8+ years of hands-on experience in WordPress design and development.

Related Articles