Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Properly Add JavaScripts and Styles in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Properly Add JavaScripts and Styles in WordPress

Recently we did a code review for a plugin one of our users wrote. The plugin worked fine, but the developer wasn’t following the best practices on loading external JavaScript. WordPress has an enqueue system to add external scripts and styles which helps prevent plugin conflicts. Since most users run more than one plugin on their site, it is always good for developers to follow the best practice. In this article, we will show you how to properly add JavaScripts and styles in WordPress. This will be particularly useful for those who are just starting to learn WordPress theme and plugin development.

The Mistake

WordPress have a wp_head function that allows you to load anything in the head section of the site. For those who don’t know better, they simply add their scripts by using a code like this:

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';

While the above code is an easy way, it is the wrong way of adding scripts in WordPress. For example, if you load jQuery manually and another plugin that also uses jQuery loads it through the proper way, then you have jQuery being loaded twice. It is also possible that the two are different versions which can also cause conflicts.

Let’s look at the right way of doing this.

Why Enqueue Scripts in WordPress?

WordPress has a strong developer community. Thousands of people around the world design themes and write plugins for WordPress. To make sure that everything works properly and no one is stepping on another’s toe, WordPress has an enqueue script function. This function provides a systematic way of loading JavaScripts and styles. By using wp_enqueue_script function, you tell WordPress when to load a script, where to load it, and what are it’s dependencies.

This allows everyone to utilize the built-in JavaScript libraries that comes bundled with WordPress rather than loading the same third-party script multiple times. It also helps reduce page load time and avoid conflicts with other themes and plugins.

How to Properly Enqueue Scripts in WordPress

Loading the scripts properly in WordPress is very easy. Below is an example code that you would paste in your plugins file or in your theme’s functions.php file to properly load scripts in WordPress.


function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  


We started by registering our script through the wp_register_script() function. This function accepts 5 parameters:

  • $handle – Handle is the unique name of your script. Ours is called “my_amazing_script”
  • $src – src is the location of your script. We are using the plugins_url function to get the proper URL of our plugins folder. Once WordPress finds that, then it will look for our filename amazing_script.js in that folder.
  • $deps – deps is for dependency. Since our script uses jQuery, we have added jQuery in the dependency area. WordPress will automatically load jQuery if it is not being loaded already on the site.
  • $ver – This is the version number of our script. This parameter is not required.
  • $in_footer – We want to load our script in the footer, so we have set the value to be true. If you want to load the script in the header, then you would say false.

After providing all the parameters in wp_register_script, we can just call the script in wp_enqueue_script() which makes everything happen.

Now some might wonder why are we going the extra step to register the script first and then enqueuing it? Well, this allows others the site owner to deregister your script if they want to without modifying the core code of your plugin.

How to Properly Enqueue Styles

Just like scripts, you can also enqueue your stylesheets. Look at the example below:

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  

Notice that we have used wp_enqueue_scripts action hook for both styles and scripts. Despite the name, this function works for both.

In the examples above we have used plugins_url to point to the location of the script or style we wanted to enqueue. However, if you are using the enqueue scripts function in your theme, then simply use get_template_directory_uri() instead. If you are working with a child theme, then use get_stylesheet_directory_uri(). Below is an example code:


function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  

We hope this article helped you learn how to properly add JavaScripts and stylesheets in your WordPress themes and plugins. For questions and comments, leave a comment below.

Additional Resources:

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. Vijay.Rajpal says:

    Hello Sir,
    I am using esteem theme and I wanted to add some javascripts functionality to my website like lightbox. I have created a child theme and the code are as follows. in the functions.php.

    and I am getting an error:-Parse error: syntax error, unexpected '{' in E:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\esteem-child\functions.php on line 18
    Please Help I am using sublime as my text editor.
    Please Help!!!!!

    • WPBeginner Support says:

      There is an unexpected { in the code. Go to the line 18 of your functions file and then carefully study the code. You may have forgotten some tiny code like a missing ;

  2. Pramod says:

    i m adding .js file in js directory of wordpress and gives its reference of it in funcation.php
    but its not working

    wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);

  3. Bobbie says:

    Thanks so much! I’ve been trying to add a custom .js file but this is the first explanation that the register_script was needed.

  4. colkav says:

    Hey, great tutorial. I’m having an issue adding a Google Analytics related javascript, as described here:
    I’ve put the script in my child theme’s ‘js’ folder (having first stripped the html from the code).

    When i load up the page I keep getting the error :

    ReferenceError: Can’t find variable: ga
    (anonymous function)myscript.js:6

    …and it just dawned on me that maybe I need to add ‘analytics.js’ as a dependency!

    Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail :(

  5. Shoaib says:

    Is there any Plugin for the same … i am newbie and can’t play with codes … Plz Help me Sir

  6. xavi says:

    thanks for this amazing post tutorial! But when you say “where to upload the script” you just can define head or footer (in all entire webpages!)? Could you define an especific page to load it? I just need it in one. Thanks for advance and keep working! Cheers.

  7. technofranchise says:

    I want to use JavaScript or JQuery in my WordPress site. Any ideas?

  8. Skye Barcus says:

    I am a total novice at js but do know html. I want to put this on a wordpress page:

    Basically, it’s a widget to join a GoToMeeting. This works if you just throw it into the body of an html page, but in WordPress, it gets supressed.
    Can you give me a “For Dummies” version of how to make this work?

  9. Tyler Longren says:

    On the style loading piece, on line 6, wp_register_script, should be wp_register_style I believe.

  10. Dejan says:

    I really like you site it is full of useful tips, however looks like you are not doing it “Properly” for CSS enqueue even though your title say that way :=) The right way would be :

    wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
    wp_enqueue_style( ‘my-css-style’ );

    Keep up the good work… Cheers!

  11. Adrian Zumbrunnen says:

    Thanks for the effort you put into this. It just feels wrong to have wp_enque_script for loading stylesheets. WordPress could eventually spit out script instead of the stylehseet syntax for it.

    Do you really embed that way?

    • WPBeginner Support says:

      This tutorial shows how to load JavaScript and stylesheet files for your themes or plugins in WordPress. If by Embed you meant how we display code in articles, then we use Syntax Highlighter plugin for that.

  12. oiveros says:

    hi i’m kind of new on the wordpress theming , and reading about these topic, i wanted to ask you about something related to these . If i want to update the jquery library link how do i do it or where do i find the link i been trying to do it but i can’t find it. Thank you in advanced for your help

    • WPBeginner Support says:

      If by updating jquery library link, you mean to add jquery from Google’s library. WordPress comes packed with jquery and to load it in your theme use this line in your theme:

      <?php wp_enqueue_script('jquery'); ?>

      • oiveros says:

        okey so if i want to have the latest jquery, i just use that line?, because somebody told me to use a plugin just for that, but i wanted to learn how to do it without a plugin

        • oliveros says:

          Thank you for your answer, i found the post related to that issue here in your site.

  13. Mark says:

    Thanks so much for this tut.

  14. Elliott Richmond says:

    Useful Syed, thanks.
    I recently had an issue loading a css file using _underscore as a framework, although the stylesheet was called mycustomstyles.css the theme was calling mycustomstyles.css?ver=xx and the theme wasn’t loading the file because of the naming of the file by appending ?ver=xx to the end of the name.
    Is that something to do with $ver default?

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.