Skip to content

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.
Yay! 🎉 You made it to the end of the article!
David Hayes

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
siteeman
April 3, 2022 1:37 pm

Hello,

thank you for your good article. If we want to add a jQuery file, what should we do?

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

1
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...