How to Enqueue Scripts and Styles in WordPress

Enqueue scripts and styles in WordPress the correct way.

how to enqueue Script and Styles in WordPress

WordPress has an enqueuing system for adding local/remote scripts along with styles to prevent conflicts with plug-ins. Since most users run WordPress with a theme and several plugins, developers are advised to use the correct method of loading scripts into WordPress.

It is high time to get an overview regarding the best way of enqueuing scripts along with styles in WordPress. This article is useful to any WordPress developer who is creating a WordPress plugin or theme to know what the best practise of enqueuing scripts/styles is.

It is important to enqueue scripts and styles correctly in WordPress.

Most Common Mistake

WordPress has a wp_head() function with a wp_head action hook that enables you to load anything into the head section of the website. Guys who are not familiar, simply add their scripts through the following code:

<?php
add_action('wp_head', 'wpb_bad-script');
function wpb_bad_script() {
echo 'JavaScript goes here';
}
?>

(https://gist.github.com/tribulant/a1c43faf49ff7dd18f11201f762ce580)

Though easy, it is a wrong way of adding scripts in WordPress. In case you load jQuery manually along with another plugin that already uses jQuery, it will be loaded twice, resulting in JavaScript errors.

Another common mistake that plugin and theme developers make is that they load their own, custom version of jQuery which is not recommended. WordPress comes packaged with it’s own version of jQuery which should be used. Assuming that other plugins will use this jQuery distributed with WordPress, loading a different, custom version will only result in problems.

Why Enqueue Scripts in WordPress?

WordPress has a large and strong developer community. Thousands of people all around the world design themes and plugins for WordPress. To ensure that everything works properly and that one plugin or theme doesn’t break another, WordPress has an enqueue script function. This particular function provides a systematic way of loading JavaScript along with styles.

With the help of the wp_enqueue_script() function, you can easily inform WordPress the best time to load a script long with dependencies if any. Such a feature allows everybody to utilize the built-in JavaScript libraries that come in a bundled form. It also helps in reducing the load time of page along with avoiding easy conflicts with themes and plug-ins.

Enqueuing scripts in WordPress also ensures that duplicates with the same handle are not loaded twice.

Always use wp_enqueue_script to load JavaScript files in WordPress.

Best Way to Enqueue Scripts in WordPress

It is an easy task to enqueue the scripts in WordPress in a proper manner. You may take into usage the following code for loading of scripts in WordPress (you should add the code into the functions.php file of your current WordPress theme, e.g.: /public_html/wp-content/themes/theme-name-here/functions.php):

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

(https://gist.github.com/tribulant/b32e4836bda22e7f0b3a24aae6ad4f34)

Let’s go through the code quick. The procedure started by simply registering the script with the help of wp_register_script() function. This particular function is well known to accept the following parameters:

  • $handle – It is the unique name provided to script. Here it is “my_amazing_script”.
  • $src – scr refers to the location of script. The plugins_url() function is taken into usage to get the proper URL of plugins folder.
  • $deps – deps refers dependency. Since the script mentioned above uses jQuery, jQuery has been mentioned in the dependency area.
  • $ver – ver stands for version number of the script. This parameter is optional.
  • $in_footer – In order to load script into the footer section, it is good to set the value to be true. In case of header, the value must be set to false.

After providing all parameters in wp_register_script(), call the wp_enqueue_script() to actually enqueue the registered script by it’s handle. Going with this extra step for registering followed by enqueuing the script will allow other plugins/themes to deregister your script without modifying the core code of plug-in.

Proper Enqueuing of Styles

Similar to scripts, one can easily enqueue stylesheets. You may go through the following sample of code (you should add the code into the functions.php file of your current WordPress theme, e.g.: /public_html/wp-content/themes/theme-name-here/functions.php):

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

(https://gist.github.com/tribulant/c4a8bccaa015970239e0e9ba18a4e72c)

You will use the same action hook wp_enqueue_scripts for registering/enqueuing both styles and scripts.

plugins_url() has been included to point to the location of script or style we desire to enqueue. If you want to get the URL to a script/stylesheet in your theme, simply use get_template_directory_url(). Or alternatively, you can use get_stylesheet_directory_url().

I hope that this has been useful and that you can use this in the development of your plugin or theme for WordPress.

Author Bio:

Jason is a web development professional with hobbies of innovative and technical writing. Currently, he works for WordSuccor Ltd., providing PSD to WordPress Service to global clients and have successfully delivered many top-grade projects related to it. He has been actively writing blogs and articles about technical stuffs.

WordPress Plugins

Start selling products, sending newsletters, publishing ads, and more through your own WordPress website using our premium WordPress plugins.

Browse
Comments
  1. Tribulant Software on December 22, 2019

    Thank you, Mark and Dan. I have modified Jason’s article and added the correct __FILE__ code and the location where we should add the above code.

    Reply
  2. mark l chaves on December 21, 2019

    Helpful piece. Thanks, Jason.
    I agree with Dan. I think `_FILE_` should be `__FILE__`.
    https://www.php.net/manual/en/language.constants.predefined.php
    And, good question from Max. I think you should mention where to put the code for completeness and to avoid leaving the readers hanging.
    Other than that, good stuff. And congrats on your high Google ranking. This article came up on Google SERP for me.

    Reply
  3. mayur on June 25, 2019

    Thanks. very helpfully article

    Reply
  4. Amna Sheikh on March 7, 2019

    Oh I didn’t knew that very helpful. Thank you

    Reply
  5. Francisco Bravo on October 27, 2018

    I was looking for a solution for CSS, thanks.

    Reply
  6. Dan on February 19, 2018

    “_FILE_” should be “__FILE__” if it’s to work properly.

    Reply
  7. Hiren Patel on February 3, 2018

    Thnks. very helpfully article

    Reply
  8. Tracey Jones on June 23, 2017

    I was searching that how enqueue scripts works in WordPress than found your article It was great experience thanks for sharing.

    Reply
  9. Max on May 11, 2017

    This might be a stupid function but where am I supposed to put the function “wpb_adding_scripts()”? Into headers.php, functions.php?

    Reply
    • Antonie Potgieter on May 11, 2017

      You can put all the code into the functions.php file of your current WordPress theme.

      Reply
  10. Patrick on January 3, 2017

    In the example of Proper Enqueuing of Styles you are using the wrong quotes (`/’).

    Reply
    • Antonie Potgieter on January 18, 2017

      Thanks for pointing that out, I have fixed the quotes now.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want More Content Like This?

Want More Content Like This?

Join our newsletter to get more content like this via email!

You'll receive a free, monthly email with a summary of very useful articles. No spam, just great content!

You have Successfully Subscribed!

Pin It on Pinterest