How to Include JavaScript Files on Your WordPress Site with wp_enqueue_script()

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

1. 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.)
2. Write the line add_action('wp_enqueue_scripts', 'qg_enqueue');. Don’t save yet, because saving without having written the qg_enqueue() function itself will temporarily “break” your site.
3. Create that function qg_enqueue() with a basic function qg_enqueue() {} expression. It is now safe to save.
4. 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');.
5. 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, using plugin_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 with plugin_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:

1. 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.
2. 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.
3. 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.