Want to know how to include a JavaScript file onto your WordPress site? In this Quick Quide we use an awesome WordPress function called wp_enqueue_script()
that is the correct way to include JavaScript files in WordPress. Whether your JavaScript files are for Vue, React, JQuery, or something else, this is how you include JavaScript files in WordPress pages.
In short, wp_enqueue_script()
is the function that tells WordPress to “add on”—enqueue—a new JavaScript file for addition into WordPress. It works in tandem with a very similarly named bit of code, wp_enqueue_scripts
, which is the WordPress action hook to which our individual calls to wp_enqueue_script()
will “stick.” Don’t worry, we’ll explain all in the video guide and code demo below. 🙂
The video guide covers adding JavaScript files into a custom WordPress plugin. However, adding JavaScript files to a WordPress theme is a very similar process, so the video can help you understand how to do both. Here it is:
And here’s the text version of that same guide for how to use wp_enqueue_script()
in WordPress…
How To Use wp_enqueue_script()
to Add JavaScript to Each Page on Your WordPress Site
- You’re going to be writing PHP, and we’re going to assume you’ve got a custom plugin set up to do this in. If not, check out our primer on making a WordPress plugin. (If you’re trying to do this for a theme, you’d put the following code in your
functions.php
file.) - Write the line
add_action('wp_enqueue_scripts', 'qg_enqueue');
. Don’t save yet, because saving without having written theqg_enqueue()
function itself will temporarily “break” your site. - Create that function
qg_enqueue()
with a basicfunction qg_enqueue() {}
expression. It is now safe to save. - Add a body to the function which actually registers and enqueues your script, using
wp_enqueue_script()
. Our example looks like:
wp_enqueue_script('qgjs', plugin_dir_url(__FILE__).'quick-guide.js');
. - Your
wp_enqueue_script()
call will be specific to your JavaScript file’s “shorthand name,” file location, and filename. If you’re working in a plugin, as in our example, usingplugin_dir_url()
with the magic__FILE__
constant is the easiest and most common way to get to the plugin’s root folder. (If you’re working in a theme,get_stylesheet_directory_uri()
is a similarly helpful function for getting to the root of the running theme.) Then the last piece,quick-guide.js
, is where you need to go (folder and filename) relative to the root directory you established withplugin_dir_url()
.
How To Use wp_enqueue_script()
to Add JavaScript to Each Page on Your WordPress Site: Full Code Example
Since it can be helpful to see all the code at once, here’s the final version of our custom plugin’s code:
add_action('wp_enqueue_scripts', 'qg_enqueue');
function qg_enqueue() {
wp_enqueue_script(
'qgjs',
plugin_dir_url(__FILE__).'quick-guide.js'
);
}
And that’s how to add a JavaScript file in WordPress!
Further resources:
- If you want to know more detail about enqueueing both JavaScript files and CSS stylesheets in WordPress, read our full-length article on the topic.
- If you want to understand better how
plugin_dir_url()
works and what function works equivalently for WordPress themes, check out at our article on linking to theme and plugin resources. - And if you want to include a JavaScript file on only some pages on your WordPress site, read our guide to conditionally enqueueing JavaScript files.
Hello,
thank you for your good article. If we want to add a jQuery file, what should we do?