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? You’re in the right place: welcome to an awesome WordPress function called wp_enqueue_script() that is the correct way to include JavaScript files in WordPress.

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 to wp_enqueue_script():

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.