Crealanta Magazine

WordPress Enqueue Scripts: How to Queue Your Assets in WordPress

Jun 27, 2022
wp_enqueue_scripts

In WordPress rather than simply adding these to the headers, it is recommended to make use of enqueueing, that is a standard method for managing your assets. It also has the additional benefit of managing dependencies. Find out how you can do this below with the wp_enqueue_scripts.

How Enqueueing Works

The two main steps taken when enqueueing a script or a style. You first register it, inform WordPress that it's registered - after that you actually queue it up, and eventually outputs it into the header or just before the closing body tag.

The rationale behind having two steps is to do with modularity. There are times when you'll need to inform WordPress inform them about assets, but you may not want to make use of it on every single page. For example: If you're creating an individual gallery shortcode that utilizes Javascript the only requirement is for the load of JS when the shortcode is used - probably not in every site.

Enqueueing Basics With wp_enqueue_scripts

To enqueue scripts and styles within the front-end of the site, you'll need to use the wp_enqueue_scripts hook. Within the hooked function you can use the wp_register_script(), wp_enqueue_script(), wp_register_style() and wp_enqueue_style() functions.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
 function my_plugin_assets() 
 wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
 wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );
 
 wp_enqueue_style( 'custom-gallery' );
 wp_enqueue_script( 'custom-gallery' );

In the above example, I registered and queued the resources within the same program this is slightly redundant. You can actually make use of the enqueue function to register and then enqueue immediately, using similar arguments to those you would in register function:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
 function my_plugin_assets() 
 wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
 wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );
 
add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
 function my_plugin_assets() 
 wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
 wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );
 
 
 
 add_shortcode( 'custom_gallery', 'custom_gallery' );
 
 function custom_gallery( $atts )
 
 wp_enqueue_style( 'custom-gallery' );
 wp_enqueue_script( 'custom-gallery' );
 
 // Gallery code here

Dependency Management

WordPress is a web-based platform that comes with built-in support for control of dependency making use of the third argument in both the wp_register_style() and wp_register_script() functions. Additionally, you can use the functions for enqueuing right now in case you do not need to segregate these functions.

The final parameter includes a list of registered styles and scripts that must be loaded before the asset is enqueued. This example would probably rely on jQuery so we'll define that as follows:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
 function my_plugin_assets() 
 wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );

It is not necessary to register or enqueue JQuery on our own because it's already a part of WordPress. You can find a list of styles and scripts that are available for WordPress within the Codex.

Do you want to know how we increased our traffic over 1000%?

Join 20,000+ others who get our weekly newsletter with insider WordPress advice!

If you've dependencies on your own, you will be required to add them to your registration, otherwise your scripts won't run. Here's an example

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
 function my_plugin_assets() 
 wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
 wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );

Let's assume that the first script is a gallery, it's an extension of that script, which allows images to open up within a lightbox. Note that even though our second script relies on jQuery we do not need to specify the dependency, since our initial script will already load the jQuery. That said, it may be beneficial to specify all dependencies just to make sure no issues arise if you don't add the dependency.

WordPress is now aware of the scripts we require and will determine the order in which they will need to be added to the page.

Enqueuing mechanisms can be used to add scripts to the footer using the fifth parameter (the fourth being an option to add a code number). The example we have provided above will include the scripts within the footer if we modify the footer slightly.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
 function my_plugin_assets() 
 wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
 wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );

Specifying true as the fifth parameter will put scripts in the footer, using false, or omitting the parameter will load things inside the header. As I mentioned before, whenever possible, load scripts into the footer.

The Art of Specifying Media for Designs

By using the function of style register/enqueue five parameters, you are able to control the media type the script has been defined for (print, screen and handheld devices.). This parameter will be able to restrict the use of the styles to the particular media type that is an excellent optimization trick.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
 function my_plugin_assets() 
 wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );

To see a complete description of all media types that may be used, take a look through the CSS specification.

Summary

The ability to queue assets is an effective method of managing these assets. This gives you, as well as other developers of plugins and themes, better control over the system as a whole and takes the management of dependency out of your hands.

As if that wasn't enough it is the method to include your assets, many theme marketplaces , as well as the WordPress repository won't approve your work if you don't use this technique.

Cut down on time, expenses and improve site performance by:

  • Help is available immediately 24/7 support from WordPress experts in hosting, available 24/7.
  • Cloudflare Enterprise integration.
  • Reaching a global audience with 34 data centers across the globe.
  • Optimization using the integrated Application Performance Monitoring.