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.
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!
Table of Contents
- What is enqueueing in WordPress?
- How Enqueueing Works on WordPress
- Basics of wp_enqueue_script
- How to Use wp_enqueue_script in the Footer
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 )](https://lh7-us.googleusercontent.com/_WSYlidV7X5Mih6o5z0mdHlZfZ8RVklLfZ6eTKfFErE8YA8ToN5Ae1u88oWYlpkynlR3tVff5vcfHAWnAZD3KIV3nn7ByzmUXQnO2RqUGEP-SsXrxRjUGZlaZiwfKu_Zt33pJr1Tj-2-J2ezJB2OBAc)
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:
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:
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.
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:
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.
