What You Need to Know About wp_enqueue_scripts in WordPress

Maddy Osman
Maddy Osman

Published:

Every WordPress website needs a theme to function properly. One of the best things about WordPress is that you have thousands of themes available to enhance your website’s front end.

wordpress developer using wp_enqueue_scripts on his website

And, no matter what type of WordPress theme you have, you’ll use styles and scripts to enhance the look and functionality of your website.

While it helps you style a theme and add extra features, there is a wrong and a right way of adding styles and scripts to WordPress. The wrong way is to add them to the WordPress header file or wp_head. The proper way is to use a method called enqueueing.

In this post, we’ll explain what enqueueing is, how it works, and how to properly use this process to add the necessary scripts and styles to your WordPress theme.Grow Your Business With HubSpot's Tools for WordPress Websites

Enqueueing on WordPress

Enqueueing is the process of loading Javascript files or JS files -— including scripts and styles — to WordPress in a way that lets you use them whenever you need them without requiring the rewriting of code.

By enqueueing scripts, you tell WordPress which assets you want to add. WordPress will then automatically link those assets in the header and footer.

How Enqueueing Works on WordPress

Here’s how enqueueing works.

First, you register your script or style: tell WordPress your asset is present.

After telling WordPress your asset is there, the second step is to enqueue it. WordPress then automatically outputs the asset in the appropriate location: the header or the footer.

Why is it a two-step process?

You might need to include an asset on only specific pages. For example, you might be building a shortcode that outputs a simple portfolio of popular products.

Not all WordPress pages benefit from that. You need a product portfolio on only your services page or shop page.

To achieve the desired result, you can register the script first, then enqueue it to include the shortcode on only the required pages. This lets WordPress save on resources and speeds up your website.

Basics of wp_enqueue_script

We now know what enqueueing is and how it works. Let’s go through the basics of the wp_enqueue_script hook that you’ll use to load your assets.

A sample of the wp_enqueue_script in WordPress code.

Within the action hook, you can use several functions and embed them in the functions.php file:

  • wp_register_script()
  • wp_enqueue_script()
  • wp_register_style()
  • wp_enqueue_style()

wp_enqueue_script Example

Here’s a practical wp_enqueue_script example of how this would look in the style.css file:

 
add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' );
function custom_plugin_assets() {
wp_register_style( 'my-portfolio', plugins_url( '/css/portfolio.css' , __FILE__ ) );
wp_register_script( 'my-portfolio', plugins_url( '/js/portfolio.js' , __FILE__ ) );

wp_enqueue_style( 'my-portfolio' );
wp_enqueue_script( 'my-portfolio' );
}

The example above shows how to register and enqueue the assets within the same function in two steps.

You can also use the enqueue function to register and enqueue the scripts at once. You can do this by:

 
add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' );
function custom_plugin_assets() {
wp_enqueue_style( 'my-portfolio', plugins_url( '/css/portfolio.css' , __FILE__ ) );
wp_enqueue_script( 'my-portfolio', plugins_url( '/js/portfolio.js' , __FILE__ ) );
}

WordPress has a built-in way of managing dependencies through the third argument of both the wp_register_style() and wp_register_script() function.

wp_enqueue_script jquery

The third parameter is an array of registered scripts and styles that load first before enqueueing our desired asset. In the example above, we’d need to load wp_enqueue_script jQuery first.

We can do so by adding “array (‘jquery’)” to the enqueue script function.

 
add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' );
function custom_plugin_assets() {
wp_enqueue_script( 'my-portfolio', plugins_url( '/js/portfolio.js' , __FILE__ ), array( 'jquery' ) );
}

jQuery is already included in WordPress, so we don’t need to load it separately.

The same rule applies to any other dependency that your asset has. For example, if you want to open all your portfolio items in a lightbox, you’ll also need to add an array for the lightbox. Otherwise, your assets won’t load.

How to Use wp_enqueue_script in the Footer

You can enqueue your scripts in the header or the footer of your website. It’s better to enqueue your scripts in the wp_footer of your website whenever you can because it improves your website’s loading time.

Here’s why.

The browser loads all the scripts and styles in the header area as your website loads. While those scripts load, your visitors see a blank page.

The more scripts and styles in your website’s header, the longer it takes for the browser to go through them before it can continue loading your page.

You can avoid higher load times by adding a ‘true’ parameter to your function. Here’s what that custom script would look like in JavaScript:

 
add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' );
function custom_plugin_assets() {
wp_enqueue_script( 'my-portfolio', plugins_url( '/js/portfolio.js' , __FILE__ ), array( 'jquery' ), true );
wp_enqueue_script( 'my-portfolio-lightbox', plugins_url( '/js/portfolio-lightbox.js' , __FILE__ ), array( 'my-portfolio', 'jquery' ), true );
}

Omitting the ‘true’ parameter will tell WordPress to load your scripts and styles in the header, negatively impacting your website speed.

Using wp_enqueue_scripts in WordPress

Enqueuing scripts is important as you can customize things like the nav, widgets, plugins, themes, and more outside of traditional HTML methods.

With the steps outlined here, you can properly enqueue your scripts without affecting your load times. You can effectively work on your WordPress development, including themes and plugins.

This will make it easier for you to get your WordPress themes, child themes, and plugin files included in the official repository and other premium marketplaces offering WordPress-related products.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Related Articles

Capture, organize, and engage web visitors with free forms, live chat, CRM, analytics, and more.

DOWNLOAD THE FREE PLUGIN