Creative Hosting News

WordPress Enqueue Scripts: How to queue your assets in WordPress

Jun 30, 2022
wp_enqueue_scripts

In WordPress rather than just including these in the headers, it is recommended to use the enqueueing feature, which is the most common method of controlling the assets you have. Additionally, it has the advantage in taking care of dependencies. Learn how to accomplish this by using the wp_enqueue_scripts.

How Enqueueing Works

Two main steps are taken in queueing up a script a style. It is first necessary to register the script, notify WordPress that it's registered , after that you actually put it in queue before finally putting the script into the header tag or right before closing the body tag.

The rationale behind having two steps is that it helps with the modularity. There are times when you'll need to inform WordPress inform them about assets. However, you may not wish to use the use of this on each page. As an example, if you're making a unique gallery shortcode that utilizes Javascript the only requirement is for the loading of JS whenever the shortcode is used - probably not in each site.

Enqueueing Basics With wp_enqueue_scripts

For enqueuing scripts and style within the front-end of the site You'll have to make use of the scripts 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 previous example, I registered and queued the resources within the same program, which may be a bit redundant. It is possible to make use of the enqueue function in order to register and then enqueue immediately, by using the same arguments that you use in the register.

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 platform that runs on the web with built-in control of dependency making an use of the third argument both the WordPress register style() and the wp_register_script() functions. Additionally, you can utilize the functions to queue for now, in the event that you do not require segregating these two functions.

The third parameter contains an inventory of registered styles and scripts to be loaded before an asset is queued. The example above would likely rely on jQuery. We'll interpret this 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's not required to register or enqueue JQuery by ourselves since it's already a part of WordPress. It is possible to find a complete list of themes and scripts which are available for WordPress in the Codex.

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

Join the 20,000+ who receive our monthly newsletter that includes insider WordPress advice!

If you have dependencies of your own, you'll need to include them in the registration or your scripts will not run. Here's an illustration

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 has a gallery. it's an extension to that script, which lets images open within a lightbox. Be aware that although our second script relies on jQuery there is no need to mention the dependency because our first script is already loaded with jQuery. That said, it may be beneficial to specify all dependencies just to make certain that there are no problems if you don't add the dependency.

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

Queuing systems can be utilized to add scripts to the footer with the 5th parameter (the fourth is an alternative to insert a code). The example we have provided above would include the scripts within the footer if we modify the footer in a slight.

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 );

If you specify true, the fifth parameter will put scripts inside the footer. with false, or by omitting the parameter , will put things in the header. As I mentioned before, whenever possible you should load scripts in the footer.

The art of Specifying the media for designs

By using the function of style register/enqueue five parameters, you will be able to regulate the media type the script is designed for (print, screen and handheld gadgets.). This feature will allow you to limit the usage of styles only to the particular type of media, which 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' );

For an exhaustive explanation of each type of media which can be utilized to create a website, read the CSS specification.

Summary

Queuing assets is an effective method of managing this type of asset. It gives the user, along with the other plugin developers and themes, better control of the system as it is able to take the management of dependency out of your hands.

As if that wasn't enough this is the way to incorporate your assets, many themes marketplaces as well as WordPress repository will not approve of your work if you don't make use of this method.

Reduce time and expenditures and enhance website performance through:

  • Help is available immediately 24/7 help by WordPress experts on hosting. and is available 24 hours a day.
  • Cloudflare Enterprise integration.
  • Reaching a global audience with 34 data centers around the globe.
  • Optimization with the Application's integrated Performance Monitoring.

This post was posted on here