How to Properly Enqueue CSS and JavaScript in WordPress

Adding custom styles and scripts to your WordPress site is common, but doing it the right way is crucial. Instead of placing <link> or <script> tags directly in your theme files, WordPress offers a built-in and much safer method: enqueueing.

In this guide, you’ll learn how to properly enqueue CSS and JavaScript files, avoid common mistakes, and take advantage of the latest improvements like the strategy parameter introduced in recent versions of WordPress.

Enqueueing is the WordPress-recommended way to load styles and scripts. It ensures compatibility, avoids duplicate loading, and improves performance.

What Is Enqueueing?

Enqueueing is the process of registering and loading assets (like stylesheets and JavaScript files) using WordPress functions. This method ensures that dependencies are respected, assets aren’t loaded more than once, and everything is included in the correct order.

It also helps plugin and theme developers share resources without conflicts. For example, if multiple plugins use jQuery, WordPress makes sure it’s loaded just once, no matter how many times it’s requested.

Loading jQuery from multiple sources or manually adding scripts can lead to serious JavaScript errors. WordPress solves that by handling asset loading systematically.

How to Enqueue CSS in WordPress

To load a CSS file in your theme or plugin, use the wp_enqueue_style() function. Here’s a simple example:

function my_enqueue_styles() {
    wp_enqueue_style( 'reset-css', get_template_directory_uri() . '/reset.css' );
    wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array( 'reset-css' ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

In this example:

• 'reset-css' is the handle (unique name for the asset)
• get_template_directory_uri() returns the URL of your theme
• get_stylesheet_uri() points to your style.css file
• array( 'reset-css' ) ensures that reset.css loads before style.css

Parameters of wp_enqueue_style()

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

• $handle: Unique name
• $src: URL to the CSS file
• $deps: Array of dependencies
• $ver: Version number for cache busting
• $media: CSS media type (like all, screen, print)

How to Enqueue JavaScript in WordPress

JavaScript is enqueued using the wp_enqueue_script() function. Below is a typical example with dependencies and the new strategy option:

function my_enqueue_scripts() {
    wp_enqueue_script( 'owl-carousel', get_template_directory_uri() . '/owl.carousel.js', array( 'jquery' ) );

    wp_enqueue_script( 'theme-scripts', get_template_directory_uri() . '/website-scripts.js', array( 'owl-carousel', 'jquery' ), '1.0', array(
        'in_footer' => true,
        'strategy'  => 'defer',
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

This ensures:

• jQuery is loaded before Owl Carousel
• Owl Carousel is loaded before your custom script
• The final script is placed in the footer and uses the defer strategy

The parameters of wp_enqueue_script() are very similar to those of wp_enqueue_style(), with one important addition – the ability to pass an advanced array as the final argument.

wp_enqueue_script( $handle, $src, $deps, $ver, $args );

• $handle: A unique name for the script. Must be different from any other asset handle in your site.
• $src: The path or URL to the JavaScript file.
• $deps: An array of script handles this script depends on (e.g., ‘jquery’).
• $ver: The version number of the file – useful for cache control.
• $args: Can be one of the following:
  • true or false – whether to load the script in the footer (legacy method).
  • array – an advanced array which may include:
    • 'in_footer': Boolean indicating whether to load in the footer (true) or in the header (false).
    • 'strategy': Can be 'defer' or 'async', controlling how the script is loaded by the browser.

Using an array of arguments instead of a simple true/false gives you more control over script placement and loading behavior, which is especially useful for performance optimization.

Registering Assets for Specific Template Files

Sometimes, you only want to load a script or stylesheet on a specific template file, like page-about.php or a custom template for a post type. Instead of loading all assets site-wide, you can conditionally enqueue them by checking the current template inside a hook.

First, register the asset globally so WordPress is aware of it:

function my_register_assets() {
    wp_register_script( 'popup-script', get_template_directory_uri() . '/popup.js', array(), '1.0', array(
        'in_footer' => true,
        'strategy'  => 'defer',
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_register_assets' );

Then, enqueue the script only if the current page is using a specific template. For example, to target page-about.php:

function my_enqueue_template_assets() {
    if ( is_page_template( 'page-about.php' ) ) {
        wp_enqueue_script( 'popup-script' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_template_assets' );

This ensures the script is only loaded when the matching template is active, reducing unnecessary asset loading across your site.

Want a deeper look at how 'in_footer' and 'strategy' work? Check out our full post on how to enqueue scripts using in_footer and strategy.

Removing Unnecessary Styles and Scripts

If a theme or plugin loads assets you don’t need, you can remove them using the following functions:

• wp_dequeue_script()
• wp_dequeue_style()
• wp_deregister_script()
• wp_deregister_style()

function remove_extra_assets() {
    wp_dequeue_style( 'plugin-css' );
    wp_deregister_script( 'plugin-js' );
}
add_action( 'wp_enqueue_scripts', 'remove_extra_assets', 100 );

Notice the value 100 in the third parameter of add_action(). This is the priority of the hook. It ensures that this function runs after all other themes and plugins have already enqueued their assets.

If you use a lower number, the styles or scripts you want to remove might not have been enqueued yet, and therefore cannot be dequeued or deregistered properly.

For a full explanation and more examples, check out our complete post on how to remove CSS & JS files added by themes and plugins.

Conclusion

By using wp_enqueue_style() and wp_enqueue_script() properly, you ensure that your site remains modular, fast, and conflict-free. These functions allow WordPress to manage dependencies, prevent duplicate scripts, and maintain better compatibility across themes and plugins.

Never hardcode <script> or <link> tags in your theme files. Always enqueue your assets the WordPress way.

Want to boost performance even more? Check out our full guide on how to defer JavaScript and improve loading times in WordPress.