What is the Best Way to add Custom External JS into WordPress

As claimed by the leading CMS community, 25% of the internet is using WordPress. Seeing the trends, we have no option but to believe them, almost every 2nd blog and every 4th site seems to be using apparently the most powerful and user friendly CMS. Looking forward to this, people and developers have started shifting their sites to WordPress Platform.

On this endeavor to transform your sweet and simple website to a complex, High-performing CMS site, people are getting stuck on a very basic step and asking the question: For the Love , how do I get this external JavaScript (.js) file working in this WordPress theme? Are you too the one asking the same question? Well amigos, you are finally at the right place: I am here to guide you step by step through the simplest way possible to achieve this task!

Now assuming you have WordPress all installed and fired up with external JS ready, let’s get into the task of including the file!

Note: I am using the following file (testrun.js) for this tutorial and the theme I am working on is WordPress’s Twenty Sixteen.


Let’s Begin!

All scripts and stylesheets are loaded from within the functions.php. This is the correct way to load them within WordPress so as to avoid conflicting with any other scripts that get loaded either by WordPress itself or your plugins being used. If you let WordPress manage all the included files, thenyou need to let it know that you want this file to be included in the header (start) or footer (end) part of the file. Each template/theme has its own functions.php so the exact name of the functions which includes all the files to be included would be hard to generalize. Since I am taking twenty sixteen as a theme, below is the snapshot of how my functions.php (used for including files). Yours should to an extent resemble this:


The wp_enqueue_script function links a script file to the generated page at the right time according to the script dependencies, if the script has not been already included and if all the dependencies have been registered. You could either link a script with a handle previously registered using the wp_register_script() function, or provide this function with all the parameters necessary to link a script.

The wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ) takes in the following params:


(string) (Required) Name of the script.


(string|bool) (Optional) Path to the script from the root directory of WordPress. Example: ‘/js/myscript.js’.

Default value: false


(array) (Optional) An array of registered handles this script depends on.

Default value: array()


(string|bool) (Optional) String specifying the script version number, if it has one. This parameter is used to ensure that the correct version is sent to the client regardless of caching, and so should be included if a version number is available and makes sense for the script.

Default value: false


(bool) (Optional) Whether to enqueue the script before </head> or before </body>. Default ‘false’. Accepts ‘false’ or ‘true’.

Default value: false

You can ignore the wp_register_script() function for this tutorial. Our purpose is to include an external JS only. It should work just fine without it!

Therefore, if I want to name my script as “test” remember that this param ($handle) DOES NOT necessarily be the name of the actual file, and my file has external dependency over jquery and version is 1.0 and loads before the page loads then my function would look like:

wp_enqueue_script(‘tutorial’, get_template_directory_uri() . ‘/js/testrun.js’, array(‘jquery’), ‘1.0’, false);



If you notice, I have used get_template_directory_uri(),  so, the string concatenated after the function, that is “/js/testrun.js” is actually the path of the file w.r.t the index file of the template.

So your $src attribute, which is the source of your js file becomes: get_template_directory_uri().’path_to_js_wrt_index_of_template’.

Therefore, the final functions.php looks like:


Hold in there, we almost done! Just save this now and hit refresh on your website … you should see the JS working! Here is mine:


Since we set the $in_footer option to false, the script loads before the page loads, but after JQuery is loaded as it was added as a dependency!

And.. Voila! Here you go .. You have successfully included an external custom JS file in your WP theme!

Happy Coding!!

Reference: Enqueue Function: WordPress Codex

Leave a Reply

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

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.