Enqueue function in WordPress is used to add styles and scripts on the WordPress website. The wp_enqueue function provides a systematic way of loading the styles and scripts. For a WordPress developer, loading a script or styles really matters.
wp_enqueue_style and wp_enqueue_script functions will determine the order of styles and scripts based upon the dependencies and it will only give the result when styles or scripts are needed. In simple term it is like killing a few birds with one stone: It helps to load everything in the correct order, making sure that it is not loaded twice, and not wasting bytes on the scripts or styles.
When you are building a widget or a shortcode, you would not know where it is used on the website. By using this function, WordPress will take care of scripts and styles files in at proper places. You can even tell WordPress when to load and where to load a file.
There are many plugins and themes that use the same scripts, but by enabling enqueue it shares the files rather than attempting multiple times to load the same file. It might reduce your performance and create a version conflict. Enqueuing scripts gives you a greater compatibility across major themes and plugins.
Why use the wp_enqueue function?
The basic reason to use wp_enqueue function is to make your website run quickly and smoothly. Page speed is important for Search engine ranking, and it is not good to use the same scripts and styles again and again over all the places.
This might slow down your website and even affect the performance of your WordPress website. But by using wp enqueue you can write a single file of scripts and styles and just call the wp_enqueue function. Now WordPress will automatically add the scripts and styles at the right place.
How do wp_enqueue Works?
wp_enqueue is basically a hook which then hooks itself in wp_head or wp_footer whenever it is required. Below is a workflow of how wp enqueue works
- Initially write a function which registers your script using wp_enqueue_script
- Then you have to hook your function to wp_enqueue_scripts or wp_enqueue_style hook
- All these hooks work together, and when wp_head or wp_footer is called your script will be found and that will be loaded at the exact place.
Initially you need to know the difference between wp_register_script/style versus wp_enqueue_script/style. In WordPress to serve up your styles and scripts, it should know its existence. For a WordPress to know your styles and scripts exists, it should be registered. So this can be done with wp_register_script/style to get your style or script in the system.
wp_register_script→ It is a function that tells the WordPress that your script exists but that doesn’t do anything. It should be called by wp_enqueue_script.
wp_register_style→ It is a function that tells the WordPress that your stylesheet exists but that doesn’t do anything. It should be called by wp_enqueue_script.
wp_enqueue_script→ It is a function, that does the work of enqueuing the script.
wp_enqueue_style→ It is a function, that does the work of enqueuing the stylesheet.
Enqueue scripts in WordPress
It is always important to use wp_enqueue_script to load the JavaScript files in WordPress.
The syntax for wp_enque_script is
wp_enqueue_script($handle, $source, $dependencies, $version, $in_footer);
handle→ (string)(required) It is the name of the script. This name should be a unique
source→(string)(optional) The URL of your script or the path of the script which is relative to the WordPress root directory.
dependencies→ (array)(optional) It provides an array of dependencies and it allows you to list handles of different scripts.
version→ (string|bool|null)(optional) It allows you to keep track of script versions. This ensures that the user receives the correct version regardless of caching.
in_footer→ (bool)(optional) This parameter is available only for scripts. It the value is set to true, the script is loaded through wp_footer at the bottom of your page.
The following code is an example for loading of scripts in WordPress:
<?php
Function wp_function_name(){
wp_register_script(‘my_amazing_script’, plugins_url(‘amazing_script.js’, _FILE_), array(‘jquery’), ‘1.1’, true);
wp_enqueue_script(‘my_amazing_script’);
}
add_action(‘wp_enqueue_scripts’, ‘wp_function_name’); // This line is actually to load the scripts
?>In the above code, the wp_register_script is for registering the script. There are certain parameters like $handle, $scr, $deps, $ver, and $in_footer
- $handle→ Here the unique name is my_amazing_script.
- $scr→ Here the plugins_url() function is taken as the URL of plugins folder
- $deps–> The above query used jquery so that jquery is mentioned in the dependency area
- $ver- This parameter is not compulsory. Here the version number for the above example is 1.1
- $in_footer→ In the above code the value is set to true, that states that the script to loaded in the wp_footer
Once all the parameters are given in the wp_register_script(), you have to call the wp_enqueue_script() function to enqueue the registered script to handle.
Enqueue styles in WordPress
Similar to the queues, one can also enqueue the styles in WordPress. The syntax for wp_enqueue_style is
wp_enqueue_style($handle, $source, $dependencies, $version, $media);
handle→ (string)(required) It is the name of the style. This name should be a unique
source→(string)(optional) The URL of your style or the path of the style which is relative to the WordPress root directory.
dependencies→ (array)(optional) It provides an array of dependencies and it allows you to list handles of different scripts.
version→ (string|bool|null)(optional) It allows you to keep track of styles versions. This ensures that the user receives the correct version regardless of caching.
media→ This parameter is only for styles. It allows you to specify the type of media the style should be displayed. It can be all, print, screen, handheld etc.
The following code is an example of loading styles:
<?php
Function wp_function_name() {
wp_register_style(‘my_stylesheet’, plugins_url(‘my-stylesheet.css’, _FILE_));
wp_enqueue_style(‘my_stylesheet’); }
add_action(‘wp_enqueue_scripts’, ‘wp_function_name’);
?>Wp_register_style is for registering the style in WordPress. There are certain parameters like $handle, $scr, $deps, $ver, and $media.
Importance of enqueue function
The most important functions of enqueue are functionality, user experience, and SEO.
Functionality
Functionality is very important for any website. Everyone wants a website that is user-friendly and works effectively with all the plugins and themes. The enqueue function helps to achieve this.
User experience
User experience also relies on the functionality of the website. Everyone wants a website that should be effective and loads faster without conflicting. By enabling the enqueue method, the website will load effectively without conflicting with any plugins and themes.
SEO
Apart from functionality and user experience, there is one more important factor for enqueuing. A misplaced script or style or a site that is trying to load the several versions of jquery may slow down your website loading, and it might result in lower ranking. Both the page error and high bounce rate may result in a negative effect on SEO. So it is important to have enqueued function in WordPress.
Examples:
1.(i) In case of back-end WordPress environment
<?php
function admin_environment()
//Any function name can be specified
{
wp_register_style(‘adm-theme-stylename’,get_template_directory_uri().‘/css/adm-styles.css’, array({dependencies list}), ‘version#’, all);
wp_enqueue_style(‘adm-theme-stylename’);
wp_register_script(‘adm-theme-scriptname’,get_template_directory_uri().‘/js/adm-scripts.js’, array({dependencies list}), ‘version#’, true);
wp_enqueue_script(‘adm-theme-scriptname’);
}
add_action(‘admin_enqueue_scripts’, ‘admin_environment’, 10, 0);
?>
(ii) In case of front-end WordPress environment
<?php
Function public_environment(){
wp_register_style(‘theme-stylename’,get_template_directory_uri().‘/css/styles.css’, array({dependencies list}), ‘version#, all’);
wp_enqueue_style(‘theme-stylename’);
wp_register_script(‘theme-scriptname’,get_template_directory_uri().‘/js/scripts.js’, array({dependencies list}), ‘version#’, true);
wp_enqueue_script(‘theme-scriptname’);
}
add_action(‘wp_enqueue_scripts’, ‘public_environment’, 10, 0);
?>This code should be placed in a function.php file of our themes, child theme or in a plugin file. Here in these two functions, we have loaded four different files, two files for the WordPress back-end and two files for the WordPress front-end.
Here you don’t require any other checking control like _admin() or whatever because the loading is completely done by two actions admin_enqueue_scripts and wp_enqueue_scripts that are executed in their adequate environments.
2.Adding Scripts only to home page
Properly add this CSS and JS files using functions.php file. Below is an example of adding scripts only to the home page:
<?php
Function your_function_name {
//Load JS and CSS files here
Wp_register_script(‘placeholder’,get_stylesheet_directory_uri().‘js/placeholder.js’, array(‘jquery’), ‘1’, true);
wp_register_style(‘googlefonts’,‘https://fonts.googleapis.com/css?family=dave+one’, array(), ‘2’, ‘all’);
wp_register_scripts(‘smoothscroll’,get_stylesheet_directory_uri().‘js/smooth-scroll.js’, array(‘jquery’), ‘1’, true);
wp_enqueue_scripts(‘placeholder’);
wp_enqueue_style(‘googlefonts’);
if(is_front_page()) {
wp_enqueue_script(‘smoothscroll’);
}
}
add_action(‘wp_enqueue_scripts’, ‘your_function_name’);
?>Note: We have used wp_enqueue_scripts action hook for both scripts and styles. Despite the name, the function works for both scripts and styles.
Here in the above example, the smooth-scroll.js file is required with wp_regiter_script, but in the wp_enqueue_script it will conditionally load only to the home page. Because of the if statement is wrapped with the wp_enqueue_script() function within the curly braces.
Conclusion
Hopefully, now you would understand why it is important to use enqueue function in WordPress. It takes away your complete burden of maintaining the plugins and themes and managing them in a peculiar way.
The wp_enqueue_scripts is for loading the javascript file necessary for your plugins or themes and wp_enqueue_style id for registering the CSS files necessary to the front-end design.
The advantage of this function is that it just requires a few lines of code and has an incredible deployment time. Whereas the disadvantage of this function is that it produces a code that quickly becomes obsolete, it has a difficulty for future maintenance of code, it interfaces with the functions designed for another WordPress context, and it hinders the interaction with modules designed by third-party developers. Overall, it is important using an enqueuing function in WordPress.
Hope you got an idea about what is enqueue in WordPress. If you have any queries or comments, please feel free to share with us. Your comments are most awaited. You can subscribe to us at Facebook and Twitter.