WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Properly Add JavaScripts and Styles in WordPress

How to Properly Add JavaScripts and Styles in WordPress

Last updated on November 8th, 2017 by Editorial Staff
348 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Properly Add JavaScripts and Styles in WordPress

Do you want to learn how to properly add JavaScripts and CSS stylesheets in WordPress? Many DIY users often make the mistake of directly calling their scripts and stylesheets in plugins and themes. In this article, we will show you how to properly add JavaScripts and stylesheet in WordPress. This will be particularly useful for those who are just starting to learn WordPress theme and plugin development.

Properly adding JavaScripts and styles in WordPress

Common Mistake When Adding Scripts and Stylesheets in WordPress

Many new WordPress plugins and theme developers make the mistake of directly adding their scripts or inline CSS into their plugins and themes.

Some mistakenly use the wp_head function to load their scripts and stylesheets.

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

While the above code may seem easier, it is the wrong way of adding scripts in WordPress, and it leads to more conflicts in the future.

For example, if you load jQuery manually and another plugin loads jQuery through the proper method, then you have jQuery being loaded twice. If it is loaded on every page, then this will negatively affect WordPress speed and performance.

It is also possible that the two are different versions which can also cause conflicts.

That being said, let’s take a look at the right way of adding scripts and stylesheets.

Why Enqueue Scripts and Styles in WordPress?

WordPress has a strong developer community. Thousands of people from around the world develop themes and plugins for WordPress.

To make sure that everything works properly, and no one is stepping on another’s toes, WordPress has an enqueuing system. This system provides a programmable way of loading JavaScripts and CSS stylesheets.

By using wp_enqueue_script and wp_enqueue_style functions, you tell WordPress when to load a file, where to load it, and what are its dependencies.

This system also allow developers to utilize the built-in JavaScript libraries that come bundled with WordPress rather than loading the same third-party script multiple times. This reduces page load time and helps avoid conflicts with other themes and plugins.

How to Properly Enqueue Scripts in WordPress?

Loading 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.

?php
function wpb_adding_scripts() {

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

wp_enqueue_script('my_amazing_script');
}
 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Explanation:

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 make it false.

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

The last step is to use wp_enqueue_scripts action hook to actually load the script. Since this is an example code, we have added that right below everything else.

If you were adding this to your theme or plugin, then you can place this action hook where the script is actually required. This allows you to reduce the memory footprint of your plugin.

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

Properly Enqueue Styles in WordPress

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

<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

Instead of using wp_enqueue_script, we are now using wp_enqueue_style to add our stylesheet.

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 function 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:

<?php
 
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

We hope this article helped you learn how to properly add jacvascript and styles in WordPress. You may also want to study the source code of the top WordPress plugins for some real life code examples.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

348 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

35 Comments

Leave a Reply
  1. Schroedingers Katze says:
    Feb 24, 2019 at 1:55 pm

    Cheers, thanks for sharing! Great explanation.

    Reply
    • WPBeginner Support says:
      Feb 25, 2019 at 4:24 pm

      You’re welcome :)

      Reply
  2. Jean-Michel says:
    Dec 29, 2018 at 11:30 am

    Hi there,
    I followed what is said here but now I get an empty white page on my web site. Could someone give me a hint ?
    Thanks

    Reply
    • WPBeginner Support says:
      Dec 31, 2018 at 3:13 pm

      It sounds like you either copied the code incorrectly or it had an issue with something on your site. You can remove the code using: https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
      If you added it manually, otherwise you could use:
      https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/

      Reply
  3. Orhan says:
    Jul 13, 2018 at 9:43 pm

    This article was very useful to me. Thank you.

    Reply
  4. Mark says:
    May 29, 2018 at 12:25 pm

    Typical article that makes you even more confused after than before…

    Reply
  5. Zaved Hossain says:
    Apr 10, 2018 at 4:02 am

    This is nice, though my usual practice is to add wp_enqueue_script/style in a single line without registering. Coders need to be careful about the parameters, perhaps a little explanation of that would be helpful. For example, the different versions of jquery (your jquery script may require different version than the wordpress’) and where to add it (header or footer which is determined by the true/false parameter). The jquery script needs to be added in the header, (hence a ‘false’ needs to be passed as the param value), otherwise it may not work.

    Reply
  6. Hansjörg Leichsenring says:
    Nov 9, 2017 at 7:03 am

    There are often a lot of style.css.
    How can I ensure the correct load-order with enque and make sure, that the child css is loaded last?

    Cheers from Germany
    Hansjörg

    Reply
  7. Carlos Araya says:
    May 31, 2017 at 8:51 pm

    How do I pass empty parameter to register_script? I want to make sure that they script is loaded at the bottom of the page but can’t find information whether this is the default behavior or not

    Reply
    • Kerry Beeher says:
      Sep 4, 2017 at 10:07 am

      Bonjour,

      Thank you for your excellente resource. Merci !!!

      I am little novice and just begin my journey to learn PHP and how WordPress use wp_enqueue_script and wp_register_script to add JavaScript and CSS.

      I use this free plugin called Easy Code Manager to help run through your exemples:
      however I am not sure if this is right plugin to use.

      I read before that it is not the best idea to modifier code in functions.php so I wonder if this is ok to do?

      Will it not get change on a theme update?
      Sorry for question, I still learn WordPress.

      Merci,
      Kerry

      Reply
  8. Vaibhav Bansal says:
    Mar 12, 2017 at 1:58 am

    I want to add an Amazon Ad
    I tried to add it in text widget, but it shows blank.
    Below is the code-

    This is my site-
    Help me. How do I add js on my site?

    Reply
    • WPBeginner Support says:
      Mar 12, 2017 at 4:03 pm

      Hi Vaibhav,

      Please check out our list of ad management plugins for WordPress. You can use these plugins to display ads on your WordPress site without editing your theme files.

      Reply
  9. pradyumna says:
    Dec 30, 2016 at 12:20 pm

    i have inserted a javascript using this plugin but now i have to remove it, i have tried uninstalling and deactivating the plugin but the javascript still executes

    Reply
  10. Vijay.Rajpal says:
    Jul 27, 2016 at 10:55 am

    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!!!!!

    Reply
    • WPBeginner Support says:
      Jul 28, 2016 at 10:07 pm

      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 ;

      Reply
  11. Pramod says:
    Feb 4, 2016 at 4:12 am

    hello…..
    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’);

    Reply
  12. Bobbie says:
    Jan 21, 2016 at 9:21 am

    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.

    Reply
  13. colkav says:
    Jan 5, 2016 at 9:18 am

    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 :(

    Reply
  14. Shoaib says:
    Dec 2, 2015 at 10:11 am

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

    Reply
  15. xavi says:
    Sep 17, 2015 at 8:27 am

    Hi.
    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.

    Reply
  16. technofranchise says:
    May 27, 2014 at 6:33 am

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

    Reply
  17. Skye Barcus says:
    Apr 1, 2014 at 8:35 pm

    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?

    Reply
  18. Tyler Longren says:
    Feb 28, 2014 at 12:11 am

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

    Reply
    • WPBeginner Support says:
      Feb 28, 2014 at 9:48 am

      Tyler, no this will work too. :)

      Reply
      • Pedro de Carvalho says:
        May 13, 2014 at 1:51 pm

        why you chose to use _script instead?

        Reply
        • Pali Madra says:
          Aug 5, 2015 at 4:33 am

          I would also like to know why use _script and not _style? Are there any benefits or will both work therefore either can be used?

  19. Dejan says:
    Nov 22, 2013 at 1:04 pm

    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!

    Reply
  20. Adrian Zumbrunnen says:
    Oct 22, 2013 at 5:17 pm

    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?

    Reply
    • WPBeginner Support says:
      Oct 22, 2013 at 6:18 pm

      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.

      Reply
  21. oiveros says:
    Oct 11, 2013 at 3:03 am

    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

    Reply
    • WPBeginner Support says:
      Oct 11, 2013 at 3:21 pm

      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'); ?>

      Reply
      • oiveros says:
        Oct 13, 2013 at 2:18 am

        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

        Reply
        • oliveros says:
          Oct 13, 2013 at 1:26 pm

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

  22. Mark says:
    Jul 3, 2013 at 2:44 am

    Thanks so much for this tut.

    Reply
  23. Elliott Richmond says:
    Jul 2, 2013 at 8:58 am

    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?

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
Pretty Links
Pretty Links Pro Coupon
Get up to 35% OFF on Pretty Links Pro WordPress URL shortener and affiliate links cloaking plugin.
MainWP
MainWP Coupon
Get 15% OFF on MainWP WordPress multisite manager plugin.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.