But did you know there\u2019s a right and wrong way to load these styles and scripts? The correct way is with something called WordPress enqueue script. <\/p>\n\n\n\n
But don\u2019t let the name intimidate you. It\u2019s very easy to implement it correctly.\u202f <\/p>\n\n\n\n
In this post, you\u2019ll learn about what enqueue script is, how to use it, and why it\u2019s critical for your WordPress site. <\/p>\n\n\n\n
What is WordPress enqueue script? <\/h3>\n\n\n\n
An enqueue script is a command that adds JavaScript files and CSS style sheets to WordPress functions, allowing you to use them whenever you need to without having to rewrite code. <\/p>\n\n\n\n
Instead of adding the custom scripts or style sheets directly to your WordPress header file, you insert a snippet of code that informs WordPress which assets to add. WordPress then automatically links those assets in the header and footer. <\/p>\n\n\n\n
Why is enqueueing important? <\/h3>\n\n\n\n
You can think of enqueueing as a way of getting WordPress to add styles and scripts for you instead of doing it manually. But, besides automation, why is enqueueing important? <\/p>\n\n\n\n
- \n
- It prevents errors. <\/strong>WordPress is an open-source project with thousands of developers worldwide creating themes and plugins. By providing a system of loading scripts and style sheets, enqueueing helps prevent conflicts between these themes and plugins. <\/li>\n\n\n\n
- It improves site performance. <\/strong>A mistake many new WordPress developers make is adding JavaScript or CSS directly into their plugins or themes, which could lead to wasted resources.\u202f <\/li>\n<\/ul>\n\n\n\n
For example, if you manually add jQuery scripts<\/a> to your WordPress website and install a plugin that loads jQuery, your website ends up loading jQuery twice. All that duplicate code, if left unchecked, could end up reducing page load time<\/a>. <\/p>\n\n\n\n
How to enqueue WordPress scripts <\/h3>\n\n\n\n
Enqueueing involves two steps: registering the script (or style sheet) and enqueueing it. <\/p>\n\n\n\n
Two steps are required due to the modular nature of scripts. In other words, you want WordPress to store the new asset as you may not want to use it all the time. <\/p>\n\n\n\n
The extra step also allows other WordPress site owners to deregister your script \u2014 i.e., only <\/em>include the shortcode on the required pages \u2014 without having to modify your plugin’s core code. <\/p>\n\n\n\n
Let\u2019s walk through the two steps: <\/p>\n\n\n\n
1. Registering the script <\/strong><\/h4>\n\n\n\n
The rationale behind registering your script is to let WordPress know it exists. <\/p>\n\n\n\n
Use the wp_register_script() or wp_register_styles() function, depending on what you want to enqueue. <\/p>\n\n\n\n
The sample code looks like this: <\/p>\n\n\n\n
wp_enqueue_script( string $handle, string $src = '', \nstring[] $deps = array(), string|bool|null $ver = false, \nbool $in_footer = false ) <\/code><\/pre>\n\n\n\nThe code has five parameters: <\/p>\n\n\n\n
- \n
- $handle<\/strong> refers to the unique name of your script. (e.g., \u201cmy_script\u201d) \n
- \n
- Type of parameter: string <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
- \n
- $src<\/strong> is the full URL of your script or the path of the script relative to the WordPress root directory. \n
- \n
- Type of parameter: string <\/li>\n\n\n\n
- Default value: \u2018 \u2018 <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
- \n
- $deps <\/strong>refers to dependency. It is an array of registered script handles the script depends on. For example, if your script uses jQuery, jQuery will be your $deps value and WordPress will automatically load jQuery if your site doesn\u2019t load it already. \n
- \n
- Type of parameter: string[ ] <\/li>\n\n\n\n
- Default value: array( ) <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
- \n
- $ver<\/strong> is an optional parameter that specifies the script\u2019s version number. If there is one, it is added to the URL as a query for cache busting. If none exists, the version number is set to the current WordPress version.\u00a0\n
- \n
- Type of parameter: string|bool|null <\/li>\n\n\n\n
- Default value: false <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
- \n
- $in_footer<\/strong> is an optional parameter that lets you choose whether to load the script in the footer or header. Set the value to true <\/strong>if you want to load it in the footer and to false <\/strong>if you want to load it in the header. \n
- \n
- Type of parameter: bool <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
Note: <\/strong>It\u2019s better to enqueue scripts at the footer since it improves site load time. The more scripts and styles in your website\u2019s header, the longer it takes for the browser to go through them. <\/p>\n\n\n\n
2. Enqueueing the script <\/h4>\n\n\n\n
Once you\u2019ve registered the parameters script and styles, it\u2019s time to use WordPress enqueue script. The command tells WordPress to \u201cadd on\u201d \u2014 enqueue \u2014 a new JavaScript file. <\/p>\n\n\n\n
You can use wp_enqueue_script for both scripts and styles, but you can also use these scripts within the hooked function: <\/p>\n\n\n\n
- \n
- wp_register_script() <\/li>\n\n\n\n
- wp_enqueue_script() <\/li>\n\n\n\n
- wp_register_style() <\/li>\n\n\n\n
- wp_enqueue_style()\u202f <\/li>\n<\/ul>\n\n\n\n
Once you\u2019ve input the code, run the action hook<\/a> (add_action () ) to load the script.\u202f <\/p>\n\n\n\n
Then, add the code to the WordPress plugin file or your theme\u2019s functions.php file. <\/p>\n\n\n\n
Sample codes <\/h3>\n\n\n\n
Sample 1: Enqueueing the function in two steps <\/p>\n\n\n\n
add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' ); \nfunction custom_plugin_assets() { \n \nwp_register_style('20i_script', plugins_url( '\/css\/portfolio.css' , __FILE__ ));\nwp_register_script('20i_script', plugins_url( '\/js\/portfolio.js' , __FILE__ )); \n \nwp_enqueue_style ('20i_script'); \nwp_enqueue_script('20i_script'); \n}<\/code><\/pre>\n\n\n\nSample 2: Enqueueing the function in one step <\/p>\n\n\n\n
add_action( 'wp_enqueue_scripts', 'custom_plugin_assets' ); \nfunction custom_plugin_assets() { \nwp_enqueue_style( '20i_script', plugins_url( '\/css\/portfolio.css' , __FILE__ ) ); \nwp_enqueue_script( '20i_script', plugins_url( '\/js\/portfolio.js' , __FILE__ ) ); \n} <\/code><\/pre>\n\n\n\nI understand WordPress enqueue script \u2014 what next? <\/h3>\n\n\n\n
As we\u2019ve seen in this guide, script enqueueing allows you to customise your WordPress page assets in a simple but powerful way.\u202f <\/p>\n\n\n\n
In addition, this tool offers your website a number of benefits, like reducing duplicate code and improving page load times.\u202f <\/p>\n\n\n\n
But to take full advantage of WordPress enqueue script, you should be using a web hosting<\/a> service specifically designed for WordPress. <\/p>\n\n\n\n
Contact us today to find a Managed WordPress Hosting<\/a> solution that\u2019s right for you.<\/p>\n\n\n
- Type of parameter: bool <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
- $in_footer<\/strong> is an optional parameter that lets you choose whether to load the script in the footer or header. Set the value to true <\/strong>if you want to load it in the footer and to false <\/strong>if you want to load it in the header. \n
- $ver<\/strong> is an optional parameter that specifies the script\u2019s version number. If there is one, it is added to the URL as a query for cache busting. If none exists, the version number is set to the current WordPress version.\u00a0\n
- $deps <\/strong>refers to dependency. It is an array of registered script handles the script depends on. For example, if your script uses jQuery, jQuery will be your $deps value and WordPress will automatically load jQuery if your site doesn\u2019t load it already. \n
- $src<\/strong> is the full URL of your script or the path of the script relative to the WordPress root directory. \n
- Type of parameter: string <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
- It improves site performance. <\/strong>A mistake many new WordPress developers make is adding JavaScript or CSS directly into their plugins or themes, which could lead to wasted resources.\u202f <\/li>\n<\/ul>\n\n\n\n
![\"Managed](\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2026\/03\/Blog-Ad-WordPress-1200x625-1.png\")
<\/a><\/div>\n\n\n\n\n