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:

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:

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 will use the same action hook wp_enqueue_scripts for registering/enqueueing 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.

Beautiful Newsletter Templates

Professional newsletter templates that are fully responsive for desktop, tablet and mobile. They are 100% cross-client compatible.

See Them
Comments
  1. Patrick on January 3, 2017

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

    Reply
  2. 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
  3. 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

Leave a Reply

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

Save 30% On All Purchases

Use this amazing, limited offer and SAVE BIG! Buy any of our WordPress plugins, extension plugins or newsletter templates.

Save 30% On All Purchases

Please check your email inbox for your coupon code to purchase now.

Pin It on Pinterest

%d bloggers like this: