Enqueue Scripts and JS files in WordPress 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.

wp_enqueue_scripts – this is the WordPress hook that we use to enqueue scripts and styles both.Įnqueue Scripts or JS file with wp_enqueue_scripts hook.wp_eneque_script() – this is the function that we use to enqueue scripts with in WordPress.Difference between wp_enqueue_script and wp_enqueue_scripts 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. Wp_enqueue_scripts – to enqueue scripts and styles, WordPress provides this hook. Now you must be thinking what is wp_enqueue_scripts hook. 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. You can find default scripts and javascript libraries included and registered with WordPress here. So you can directly access those scripts and libraries with their handle. Thanks to WordPress Core, It already has some default scripts and javascript libraries included and registered. 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') īut 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. The above code will include or add this custom script in the footer of my WordPress theme in the frontend. wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js', array('jquery'), '1.0', true) So I will just add this code into the functions.php file of my active WordPress theme. Correct Way to Enqueue Javascript or Jquery Files in WordPressĪs you can see in the below code, I am going to enqueue a custom javascript file to my WordPress website or theme. Now you are good to enqueue scripts in WordPress with the best practice.

So as of now, you got an idea about this function and its parameters. 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. This accepts boolean value True or False.

$in_footer – This parameter helps you to choose whether you want to add your script files in header or footer.

If you leave it blank then it will add your installed WordPress version to the script.

$vers – This parameter adds a version number to your script.

This accepts an array of register scripts.

$dep – This parameter refers to the dependency of that particular script or JS file to another JS file.$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.Basically, this handle helps to identify the script. It could be different from your actual script file name but it should be Unique. $handle – this indicates the name of the script or ID of the script.This enqueue function accepts few parameters, let’s understand them to make use of this function. To Include any scripts, Javascript or Jquery file, WordPress provides an enqueue wp_enqueue_script() function. It can lead to conflicts with other javascript files of WordPress theme and plugins and can break them as well. However, you can directly include any js file in WordPress by linking them in the header but this is not best practice at all. 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.

Enqueue javascript file wordpress