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, with a special focus on doing this for WordPress sites.

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.

Disable CSS Caching: 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.

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.

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. Probably the cleanest version of this is to use your own versioning system, meaning that your query string will look something like v=1.1.2.

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 to do in that case?

Disable CSS Caching 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 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. 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 [PERMAINK_TO_STYLESHEET], view our article on the topic.

[STYLESHEET_DEPENDENCIES] should be either '' or whatever the stylesheet’s listed dependencies are in the code that originally enqueues it.

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:

Everything You Should Know About Using Custom Scripts and Styles In WordPress

How to Use wp_enqueue_style to Load CSS Stylesheets

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!