How To Include A JavaScript File In WordPress Theme Properly?
November 30th, 2016 | by Ravi Chahar || 4 Comments |
You may have known that JavaScript is a client-side language which loads when the users open the website.
In every WordPress theme, the JavaScript files are present. But the thing is how to include a JavaScript file in WordPress theme?
Do you have any idea? In this tutorial, you will get the guide to accomplish this task.
Just like you add CSS file in WordPress theme, you can add a JavaScript file too. There is a little bit of difference in the WordPress codex.
Add The JavaScript File In Your WordPress Theme With A Small Code.
Before you see the full code, let me tell you about the main function which would complete everything for you. In the WordPress developer’s directory, there is a special function for JavaScripts.
As you can see, there a few options inside the function.
$handle :- It’s the name of the script.
$src :- It’s the full address/path of the script. The place where it is located.
$deps :- It is an array, you can use to set the value to any type of script. Suppose you want to add the jQuery then you can use this array.
$ver :- It’s the version number of the script.
$in_footer :- It’s the place of the script. Most of the people add the script in the header of the theme for which the default value is “false”.
NOTE:- $deps, $ver and $in_footer are options. If you don’t want to use them then it’s fine. The code will still work.
Now, I am going to provide you an example of the code to include a JavaScript file in WordPress theme.
function my_script_file() {
wp_enqueue_script( ‘script’, get_template_directory_uri() );
}
add_filter ( ‘wp_enqueue_scripts’, ‘my_script_file’ );
Add this code in the functions.php file of your theme and save. You have successfully added the JavaScript file in the theme with the name “script“.
This file is present in the theme folder so there is no path specified.
If you have stored your JavaScript files in any folder then just use the path of that folder to the file. For example:-
Here the folder name is “JS” and the file named “script.js” is stored in it.
Just remember to use the proper path of the file.
I hope Now, You Can Include A JavaScript File In WordPress Theme.
Just create a new function and use the proper path of the file. There is a special hook which is used to call the JavaScript function.
As you can see in the code, “wp_enqueue_scripts” is used to call the function I have created. You can use the code like as it is shown above.
Just replace the name and path of the file and you are done.
Hey bro,
Your tutorials are very well written. I would like to ask one question here. Why would a blogger need to include javascript in the theme?
Thanks
Nikhil
Hi Nikhil,
In a WordPress theme, the procedure would be like above. I haven’t checked the codes of the blogger’s template yet.
Thanks for stopping by.
Have a great day.
~Ravi
Hi Ravi,
It is really a great idea to use JavaScript. I am not aware much about JavaScript so learning from here is really helpful.
I was thinking that JavaScript was really tough, but it seems that I can learn few things. Thanks for sharing.
Hey Kristen,
JavaScript is an essential language if you want to enter in the web development. Just use the above code to add a JS file in your WordPress theme.
Thanks for taking the time to comment.
Enjoy your stay.
~Ravi