How to Prevent Browser Caching of a CSS Stylesheet in WordPress

This video and text Quick Guide explains how to prevent browser caching of CSS files in WordPress. The CSS cache busting tricks here will work outside WordPress, too: you’ll just need your own method of adding query strings.

Why Browsers Cache CSS Stylesheets

When a browser caches a CSS stylesheet, what it’s doing is getting that stylesheet from the server once, saving it, and then serving its own saved version of that stylesheet to the user anytime the page being loaded requests it.

Browsers do this to improve site performance: they no longer have to ask the website’s server for the stylesheet on every page load, and this means fewer requests, smaller page loads, and faster load times.

Why You’d Want to Prevent Browser Caching of CSS Files

However, CSS caching can also cause problems for both users and developers. If you change a stylesheet, any given user of your site may be unable to see the changes until their browser cache clears—that is, until it deletes the saved version and fetches the stylesheet from scratch again. That can be hours or days, during which time your users are seeing an outdated and possibly broken version of the site’s CSS rules.

To disable CSS cache behavior for a given stylesheet means that every user’s browser must load that file from scratch, on every page load. This removes the speed benefits of browser caching, but it makes sure that every user is seeing the most updated version of the stylesheet on each and every page load.

The video below explains (with a bit of help from my dog, who wanted attention) how to disable browser caching of any CSS stylesheet in WordPress:

Below is a text guide to that same information.

How to Disable CSS Caching in WordPress: Add a Query String

The main point of the video above is that adding a query string to a CSS stylesheet will clear browser caching of it, because your browser will treat the following two files differently:

mysite.com/style.css

mysite.com/style.css?anything=goeshere

However, it’s still the same file! Nothing about its contents has to change, and the query string ?anything=goeshere doesn’t have to do anything. Simply putting the query string there forces the browser to respect the “new” stylesheet, and to load it from scratch.

Forcing One-Time Updates with WordPress CSS Versioning

So if you want to clear a WordPress site’s CSS stylesheet for every visitor—but just once—then you can change your wp_enqueue_style() call from this:

wp_enqueue_style( 'wpshout-style', get_stylesheet_uri() );

To this:

wp_enqueue_style( 'wpshout-style', get_stylesheet_uri(), '', '1.0.0' );

Note that this only disables CSS caching if the browser hasn’t seen that query string before. So adding this query string will refresh all users’ browser caches once, but once their browsers have loaded mysite.com/style.css?anything=goeshere once, they’re free to cache that stylesheet just as it would the original.

Then, down the line, if you want to force another one-time clear of every visitor’s CSS cache, you can simply change the code to this:

wp_enqueue_style( 'wpshout-style', get_stylesheet_uri(), '', '1.0.1' );

And so on.

So this is a good solution for versioning your stylesheets: when you make changes, you can change the query string, and the new stylesheet will push out live to all your users. The cleanest version of this is to use a normally-formatted versioning system, meaning that your query string will look something like v=1.1.2, rather than a random number you choose every time.

We’ve covered forcing one-time CSS refreshes in WordPress. However, you may simply want to never have to worry about browser caching—that is, to ensure that the stylesheet loads from scratch on every single page load, no matter what. What do we do in that case?

WordPress CSS Cache Busting on Every Page Load: Add a Random Query String

By default, WordPress adds query strings, but they don’t change often. However, the video explains how to force the query string to change every page load, by making the query string a large random number. You’ll want to change your wp_enqueue_style() calls from this:

wp_enqueue_style( 'wpshout-style', get_stylesheet_uri() );

To this:

$rand = rand( 1, 99999999999 );
wp_enqueue_style( 'wpshout-style', get_stylesheet_uri(), '', $rand );

This is if the original call to wp_enqueue_style() has no third argument (the thing we filled in with ''). If it does have a third argument, leave that argument there as-is, as it’s likely doing something important.

The effect of this code is to permanently prevent browser caching of the enqueued CSS stylesheet, by adding a different, random query string to it on every page load. Your browser, and your users’ browsers, will be forced to load the stylesheet from scratch on every page load.

Adding a Random Query String to a WordPress Stylesheet You Don’t Control

This is a bit trickier. You’ll have to dequeue the original style, and requeue it yourself with the query string. You’ll want to write this into a plugin, with the following as its body:

function wpshout_force_css_refresh() {
	wp_dequeue_style( '[STYLESHEET_SLUG]' );

	$rand = rand( 0, 999999999999 );
	wp_enqueue_style( '[STYLESHEET_SLUG]', [PERMALINK_TO_STYLESHEET], [STYLESHEET_DEPENDENCIES], $rand );
}
add_action( 'wp_enqueue_scripts', 'wpshout_force_css_refresh' );

To find a stylesheet’s slug, “View Source” and find the id of the stylesheet, then remove -css. For example, the id of WPShout’s main stylesheet is wpshout-style-css, and so its slug is wpshout-style.

If you need help knowing what to put into [PERMALINK_TO_STYLESHEET], view our article on the topic. If you need detail on add_action, check out our tutorial on WordPress hooks.

CSS Browser Caching: Further Reading

If you’d like to know more about adding and using CSS stylesheets in WordPress, below are a couple of resources:

https://wpshout.com/everything-custom-scripts-styles-wordpress/

https://wpshout.com/quick-guides/wp-enqueue-style/

And if you’d like to better understand caching in general, here’s a good article to get you started:

WordPress Caching: The Six Different Things People May Mean

Thanks for reading!