wp_enqueue is a WordPress function that allows developers to enqueue scripts (JavaScript files) and styles (CSS files).
This means that developers can tell WordPress which scripts and styles they wish to use on a particular page, and WordPress will automatically load them.
This helps make sure that your pages load quickly and efficiently, and it can also help prevent conflicts between different scripts and styles.
By properly enqueuing scripts, developers can create plugins, themes, and websites that are efficient, maintainable, and compatible.
When Should You Enqueue JavaScript and CSS in WordPress?
You can use JavaScript and CSS code to customize your WordPress website, and developers use these languages when creating WordPress plugins and themes.
- JavaScript runs on the user’s browser and is used to add interactive elements to your website, such as sliders, alerts, buttons, popups, and more.
- CSS (Cascading Style Sheets) is used to define the visual appearance of your site, such as the size and color of fonts, the background color, and the width of the page.
If you are a website owner and wish to add JavaScript and CSS to specific posts and pages, then you won’t need to use wp_enqueue. Instead, we recommend that you use the WPCode code snippets plugin because it’s the safest way to add code to a WordPress website.
You can learn more in our guides on how to easily add JavaScript and how to easily add custom CSS to your WordPress site.
However, if you are a developer or learning how to create WordPress plugins and themes, then you will need to properly enqueue JavaScript files and CSS stylesheets to your projects.
How Does the WordPress Enqueue System Work?
New developers can make the mistake of directly calling scripts and stylesheets in their plugins and themes. This can lead to conflicts and hurt WordPress performance.
To avoid these problems, WordPress provides an enqueue system. This gives developers a way to load scripts and stylesheets so everything works correctly and without conflicts.
Here is how the enqueue system works:
- First, you need to register the script or stylesheet using the
wp_registerfunction so that WordPress knows that it exists and where to find it. - Then, you enqueue the scripts and stylesheets using the wp_enqueue function, and this lets WordPress know that you wish to load them.
- Then, once the page is loaded, WordPress will load any enqueued scripts in the correct order to make sure everything functions properly.
You can learn more in our guide on how to properly add JavaScript and styles in WordPress.
Code Examples
You can use the wp_enqueue_script and wp_enqueue_style functions to tell WordPress when to load a file, where to find it, and what its dependencies are.
You might like to see some helpful code examples that demonstrate how to use the WordPress enqueue system.
Here is some example code that you can paste into your plugin files or theme’s functions.php file to properly load scripts in WordPress:
?php
function wpb_adding_scripts() {
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', 'wpb_adding_scripts' );
?>
And here is an example of how to enqueue your stylesheets:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
For full explanations of these code examples, please see our guide on how to properly add JavaScript and styles in WordPress.
We hope this article helped you learn more about wp_enqueue in WordPress. You may also want to see our Additional Reading list below for related articles on useful WordPress tips, tricks, and ideas.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
