20i
WordPress Block Patterns tutorial image

WordPress Enqueue Script and How To Use It 

WordPress is a favourite website builder for many because of its ease of use and customisability.  

In particular, Cascading Style Sheets (CSS) and JavaScript power the content management system’s large library of themes and plugins that help bring people’s websites to life. 

But did you know there’s a right and wrong way to load these styles and scripts? The correct way is with something called WordPress enqueue script. 

But don’t let the name intimidate you. It’s very easy to implement it correctly.  

In this post, you’ll learn about what enqueue script is, how to use it, and why it’s critical for your WordPress site. 

What is WordPress enqueue script? 

An enqueue script is a command that adds JavaScript files and CSS style sheets to WordPress functions, allowing you to use them whenever you need to without having to rewrite code. 

Instead of adding the custom scripts or style sheets directly to your WordPress header file, you insert a snippet of code that informs WordPress which assets to add. WordPress then automatically links those assets in the header and footer. 

Why is enqueueing important? 

You can think of enqueueing as a way of getting WordPress to add styles and scripts for you instead of doing it manually. But, besides automation, why is enqueueing important? 

  • It prevents errors. WordPress is an open-source project with thousands of developers worldwide creating themes and plugins. By providing a system of loading scripts and style sheets, enqueueing helps prevent conflicts between these themes and plugins. 
  • It improves site performance. A mistake many new WordPress developers make is adding JavaScript or CSS directly into their plugins or themes, which could lead to wasted resources.  

For example, if you manually add jQuery scripts to your WordPress website and install a plugin that loads jQuery, your website ends up loading jQuery twice. All that duplicate code, if left unchecked, could end up reducing page load time

How to enqueue WordPress scripts 

Enqueueing involves two steps: registering the script (or style sheet) and enqueueing it. 

Two steps are required due to the modular nature of scripts. In other words, you want WordPress to store the new asset as you may not want to use it all the time. 

The extra step also allows other WordPress site owners to deregister your script — i.e., only include the shortcode on the required pages — without having to modify your plugin’s core code. 

Let’s walk through the two steps: 

1. Registering the script 

The rationale behind registering your script is to let WordPress know it exists. 

Use the wp_register_script() or wp_register_styles() function, depending on what you want to enqueue. 

The sample code looks like this: 

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

The code has five parameters: 

  • $handle refers to the unique name of your script. (e.g., “my_script”) 
    • Type of parameter: string 
  • $src is the full URL of your script or the path of the script relative to the WordPress root directory. 
    • Type of parameter: string 
    • Default value: ‘ ‘ 
  • $deps refers to dependency. It is an array of registered script handles the script depends on.  For example, if your script uses jQuery, jQuery will be your $deps value and WordPress will automatically load jQuery if your site doesn’t load it already. 
    • Type of parameter: string[ ] 
    • Default value: array( ) 
  • $ver is an optional parameter that specifies the script’s version number. If there is one, it is added to the URL as a query for cache busting. If none exists, the version number is set to the current WordPress version. 
    • Type of parameter: string|bool|null 
    • Default value: false 
  • $in_footer is an optional parameter that lets you choose whether to load the script in the footer or header. Set the value to true if you want to load it in the footer and to false if you want to load it in the header. 
    • Type of parameter: bool 

Note: It’s better to enqueue scripts at the footer since it improves site load time. The more scripts and styles in your website’s header, the longer it takes for the browser to go through them. 

2. Enqueueing the script 

Once you’ve registered the parameters script and styles, it’s time to use WordPress enqueue script. The command tells WordPress to “add on” — enqueue — a new JavaScript file. 

You can use wp_enqueue_script for both scripts and styles, but you can also use these scripts within the hooked function: 

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

Once you’ve input the code, run the action hook (add_action () ) to load the script.  

Then, add the code to the WordPress plugin file or your theme’s functions.php file. 

Sample codes 

Sample 1: Enqueueing the function in two steps 

add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' ); 
function custom_plugin_assets() { 
 
wp_register_style('20i_script', plugins_url( '/css/portfolio.css' , __FILE__ ));
wp_register_script('20i_script', plugins_url( '/js/portfolio.js' , __FILE__ )); 
 
wp_enqueue_style ('20i_script'); 
wp_enqueue_script('20i_script'); 
}

Sample 2: Enqueueing the function in one step 

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

I understand WordPress enqueue script — what next? 

As we’ve seen in this guide, script enqueueing allows you to customise your WordPress page assets in a simple but powerful way.  

In addition, this tool offers your website a number of benefits, like reducing duplicate code and improving page load times.  

But to take full advantage of WordPress enqueue script, you should be using a web hosting service specifically designed for WordPress. 

Contact us today to find a Managed WordPress Hosting solution that’s right for you.

Managed WordPress Hosting

Add comment