What You Need to Know About wp_enqueue_scripts in WordPress

Get HubSpot's WordPress Plugin
Eric Vara


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

Over the years, I've developed a deep connection with WordPress, especially with its capability to handle scripts and styles. This function, known as wp_enqueue_scripts, has been a game-changer in my WordPress journey.

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. Let’s dive in!

Grow Your Business With HubSpot's Tools for WordPress Websites

Table of Contents

What is enqueueing in 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 enqueuing 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.

wp_enqueue_script code,wp_enqueue_script( string $handle, string $src = ‘’, string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

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

wp_enqueue_script code, 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'); }

Source Code

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:

wp_enqueue_script code, 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__));}

Source Code

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.

wp_enqueue_script code, 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'));}

Source Code

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.

When I first ventured into the world of WordPress, I remember the challenges I faced. With my Computer Science degree in hand and countless hours spent on WordPress development, I‘ve come to appreciate the importance of properly enqueuing scripts. Not only does it optimize your site’s performance, but it also ensures compatibility and reduces potential conflicts between scripts.

How to Use wp_enqueue_script in the Footer

You can enqueue your scripts in the header or the footer of your website. In my experience, placing scripts in the footer can drastically improve a website‘s loading time. It’s a simple yet effective strategy to enhance user experience.

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:

wp_enqueue_script code, 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);}

Source Code

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.


CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience