How Enqueueing In WordPress Works
Enqueuing in WordPress instructs WordPress to register that a file exists and its physical location and then output it into the WordPress template’s header, body, or footer.
A reason for having multiple steps has to do with modularity. For instance, sometimes, you want to let WordPress know about an asset, but you may not want to load that asset on every page. An example of this could be a search page, where you would like to load some custom Javascript functions for searching – but you don’t need that extra JavaScript code on any other pages. Then you would register the file and its location, but only enqueue that file on the specific search page. Enqueuing assets is a great way to structure assets and prevent unnecessary overhead in the network or the runtime/DOM i.e.
Enqueueing With wp_enqueue_scripts
To enqueue assets (scripts and styles) in the WordPress front-end you can use the wp_enqueue_scripts hook. Within the hooked function you can use wp_register_script(), wp_enqueue_script(), wp_register_style() and wp_enqueue_style() functions.
add_action('wp_enqueue_scripts', 'custom_search_assets');
function custom_search_assets() {
wp_register_style('custom-searchpage', plugins_url('/css/search.css' , __FILE__ ));
wp_register_script('custom-searchpage', plugins_url('/js/search.js' , __FILE__ ));
wp_enqueue_style('custom-searchpage');
wp_enqueue_script('custom-searchpage');
}In the above example, We registered and enqueued assets within the same function, which is redundant. You can use the enqueue functions to register and enqueue right away by using the same arguments as in the register functions:
add_action( 'wp_enqueue_scripts', 'custom_search_assets' );
function custom_search_assets() {
wp_enqueue_style( 'custom-searchpage', plugins_url( '/css/search.css' , __FILE__ ) );
wp_enqueue_script( 'custom-searchpage', plugins_url( '/js/search.js' , __FILE__ ) );
}You can separate the two functions by using them in different “hooks.” For example, you can use the wp_enqueue_scripts hook to register the assets and then a shortcode function to enqueue the assets.
add_action('wp_enqueue_scripts', 'custom_search_assets');
function custom_search_assets() {
wp_register_style('custom-searchpage', plugins_url( '/css/search.css' , __FILE__ ));
wp_register_script('custom-searchpage', plugins_url( '/js/search.js' , __FILE__ ));
}
add_shortcode('custom_search_assets', 'custom_search_assets');
// The following code goes where you want to output the assets.
function custom_search_assets($atts){
wp_enqueue_style('custom-searchpage');
wp_enqueue_script('custom-searchpage');
}Dependency Management
WordPress’ enqueueing mechanism has built-in support for managing decencies, by using a third argument of both wp_register_style() and wp_register_script() functions.
The third parameter is an array of registered scripts/styles that must finish loading before enqueuing the asset. An example of this could be assets depending on jQuery. Adding jQuery as a parameter to the enqueue can solve that. Example:
add_action( 'wp_enqueue_scripts', 'custom_search_assets' );
function custom_search_assets() {
wp_enqueue_script( 'custom-searchpage', plugins_url( '/js/search.js' , __FILE__ ), array('jquery'));
}If you have dependencies, you have to register them; otherwise, your scripts won’t load. Example:
add_action( 'wp_enqueue_scripts', 'custom_search_assets' );
function custom_search_assets() {
wp_enqueue_script( 'custom-search', plugins_url( '/js/search.js' , __FILE__ ), array( 'jquery' ) );
wp_enqueue_script( 'custom-search-spinner', plugins_url( '/js/search-spinner.js' , __FILE__ ), array( 'custom-search' ) );
}Assume that the first script is a search function and the second is an extension to the search function, making a spinner spin while searching the database. Even though the second script relies on jQuery, you do not need to specify this, as our first script will already load jQuery. That said, it may be a good idea to state all dependencies to make sure nothing can break if you forget to include a dependency.
WordPress knows what scripts you need and can determine what order to add them to the page.
Loading Scripts In The Footer
It would be best if you always tried to load your scripts in the footer. By loading your scripts in the footer, you can prevent your page load from “hanging” while loading scripts and style – especially if they contain AJAX calls. Hence increasing the end-user experienced page load- ad render time.
By using the WordPress enqueuing mechanism, you can add scripts to the footer using a fifth parameter (the fourth one being an optional version number). Specifying true as a parameter outputs the assets in the footer. Using false or entirely omitting the parameter will output the assets in the header. But as mentioned earlier, try to load assets in the footer whenever possible. Example:
add_action('wp_enqueue_scripts', 'custom_search_assets');
function custom_search_assets() {
wp_enqueue_script( 'custom-search', plugins_url( '/js/search.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'custom-search-spinner', plugins_url( '/js/search-spinner.js' , __FILE__ ), array( 'custom-search', 'jquery' ), '1.0', true );
}Specifying media types for assets
You can control what media type assets have is defined for, such as print, screen, handheld ii. e. by using the fifth parameter of the WordPress style register/enqueue function. Using his parameter can restrict the loading of assets for a specific media type which can be helpful from an optimization perspective.
add_action( 'wp_enqueue_scripts', 'custom_search_assets');
function custom_search_assets() {
wp_register_style( 'custom-search', plugins_url( '/css/search.css' , __FILE__ ), array(), '1.0', 'print' );
}See what media types that can be used.
Summary
Enqueueing is an intelligent way to handle assets in WordPress. It provides greater asset control for plugin- and theme makers and solves the challenge of managing dependencies. It is also worth mentioning that most WordPress marketplaces and the WordPress repository itself will not approve work not using these practices.
Comments