How to Enqueue Scripts Using wp_enqueue_scripts Hook in WordPress
The wp_enqueue_scripts action hook is a vital component of the WordPress development process.
Together with the wp_enqueue_script() and wp_enqueue_style() functions, it helps WordPress output content on the website.
In this tutorial, we’ll cover the wp_enqueue_scripts action hook along with its complementary functions and provide various use cases to help you improve your WordPress projects.
How Enqueueing Works in WordPress
Enqueueing in WordPress refers to registering and adding scripts and stylesheets to your site.
The wp_enqueue_script() and wp_enqueue_style() functions instruct the WordPress server to add these scripts and stylesheets to a queue to load on your website’s front end.
The main aspect of enqueueing is that it can improve website performance by reducing page load times and help avoid script conflicts when different plugins or WordPress themes try to load the same script or stylesheet.
Understanding wp_enqueue_script
The enqueueing process consists of the wp_enqueue_scripts WordPress hook and two additional functions for stylesheets and scripts.
To begin with, wp_enqueue_scripts is an action hook used to enqueue stylesheets and JavaScript files on your WordPress site. This hook is usually used in a WordPress theme’s functions.php or plugin files.
It is the recommended method for adding JavaScript to WordPress since developers can determine when the code loads to avoid conflicts.
Meanwhile, wp_register_style() and wp_enqueue_style() are WordPress functions that work with stylesheets. The register functions to a stylesheet to use in a theme or plugin, while the enqueue function loads a registered stylesheet to a WordPress website.
By default, both of these functions have two main parameters:
- $handle – a unique name for a stylesheet to identify it within the WordPress codebase. It must match the handle you specified when registering the stylesheet.
- $src – a URL or a path to the stylesheet file. This can be a relative file path to a stylesheet in the WordPress theme or plugin directory or an absolute URL to a stylesheet hosted elsewhere. $src is optional and only needs to be specified if you didn’t do so in the wp_register_style() function.
As a result, it’s possible to use the wp_enqueue_style() function without using the wp_register_style() first.
To illustrate, here’s code with both functions:
function register_plugin_styles() {
wp_register_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
wp_enqueue_style( 'plugin-development' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
Now, here is the code with only wp_enqueue_style():
function register_plugin_styles() {
wp_enqueue_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
Equally important, wp_register_script() and wp_enqueue_script() are WordPress functions responsible for managing custom scripts. The register function registers custom JavaScript files, while the wp_enqueue_script() function loads the registered scripts to the website. These functions both take two main parameters:
- $handle – unique name for the script. Remember that the handle must match between wp_register_script() and wp_enqueue_script() functions.
- $src – URL or path to the jQuery script file. This is optional for wp_enqueue_script() if you already specified it on the register function.
Moreover, you can specify three additional parameters:
- $deps – an array of other scripts that the current script depends on. For example, jQuery JavaScript files or json2.
- $ver – the version number of the script. Useful if you have a lot of different scripts and want to track their versions.
- $in_footer – determines whether to load the script in the footer. By default, WordPress loads scripts in the <head> section.
Similarly to wp_enqueue_style(), you can use the wp_enqueue_script() function without registering it first.
Here’s an example with both functions:
function register_plugin_script() {
wp_register_script( 'new-script', plugins_url( '/script.js' ) );
wp_enqueue_script( 'new-script' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' );
Now, let’s see an example with a single wp_enqueue_script() function:
function register_plugin_script() {
wp_enqueue_script( 'new-script', plugins_url( '/script.js' ) );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' );
How to Use wp_enqueue_script in WordPress
As we’ve covered the main aspects of the wp_enqueue_script() function, it’s time to check out a few popular use cases to help you understand it better.
How to Use wp_enqueue_script With jQuery
The wp_enqueue_script() function has an additional array() parameter that lets users specify needed script dependencies.
function my_custom_script() {
wp_enqueue_script( 'registered-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' );
In the above code, we’ve used the wp_enqueue_scripts() function to enqueue a script called my-script.js.
We specified that it depends on the jQuery library and will load in the page’s footer. We also used the get_template_directory_uri() function to get the URL of the current theme directory.
Suggested Reading
Learn more about WordPress Function:
How to Use WordPress get_post_meta Function
How to Load Scripts in the Footer With wp_enqueue_script
You can improve your website’s speed by loading scripts in the footer. By default, WordPress loads scripts in your site’s header section, meaning they load before the other content.
This can result in slower page loading times as the browser waits for these scripts.
If you move scripts to the footer section, the browser can display the content first and then load scripts. Check the following example for more information:
function plugin_assets() {
wp_enqueue_script( 'custom-script', plugins_url( '/js/my-script.js' , __FILE__ ), array( 'jquery' ), true );
}
add_action( 'wp_enqueue_scripts', 'plugin_assets' );
Here, we’ve set the wp_enqueue_script() function’s $in_footer parameter as true, which will enqueue the script in the footer instead of <head>.
How to Use wp_enqueue_scripts to Specify Media for Styles
The wp_register_style() and wp_enqueue_style() functions come with a media parameter. It specifies the intended media type for the stylesheet. By default, this parameter is set as all, meaning the stylesheet applies to all media types.
Here’s how a modified function looks:
function my_custom_styles() {
// Register custom stylesheet
wp_register_style( 'my-styles', get_template_directory_uri() . '/css/my-styles.css', array(), '1.0', 'screen' );
// Enqueue custom stylesheet
wp_enqueue_style( 'my-styles' );
}
// Add the hook to the wp_enqueue_scripts action
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
In this example, we’ve created a function called my_custom_styles that registered and enqueued a custom stylesheet called my-styles.css.
We’ve also set the media parameter to screen, which means the stylesheet applies to screen media such as desktop screens, laptops, or tablets.
You can also use different media types, such as print for print media or handheld for handheld devices.
Conclusion
The wp_enqueue_scripts hook and complementary functions like wp_enqueue_script() wp_enqueue_style() are useful for adding custom scripts and styles to your WordPress site easily and efficiently.
In this tutorial, we’ve covered the WordPress enqueueing process and provided various use case examples for wp_register_script(), wp_register_style(), wp_enqueue_script(), and wp_enqueue_style() functions.
We hope you found this tutorial useful and understand the enqueueing process better now. Should you have any questions, check out our WordPress guide or leave a comment below.
Ignas takes great satisfaction in helping people tackle even the most complex technical issues. His current goal is to write easy-to-follow articles so that these issues will not happen at all. During his free time, Ignas likes to play video games and fix up things around his house.
