Skip to content

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.

wordpress css browser cache

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.

[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:

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!

Fred Meyer

7 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
igre
February 20, 2023 3:13 pm

tnx for info …

Spephen
November 24, 2020 10:04 pm

It’s helpful. Thanks so much

Ana
April 11, 2020 8:57 am

Thanks Fred! It helps me a lot!

Someone
June 20, 2019 10:44 pm

Awesome!!!

mark aaron
June 9, 2019 9:04 pm

Clever trick. Works great 🙂

Aamer Shahzad
January 8, 2019 6:01 am

Every time when you change file version it will never get cached and performance will not improve if you apply cdn on that file. I had same issue. I generated a unique string with time when last time file was updated with filemtime() php function. now when I update the file the new version is cached. here is the code.

$css_update_time = filemtime( get_stylesheet_directory() . ‘/style.css’ );
wp_enqueue_style( ‘main-style’, get_stylesheet_uri(), null, $css_update_time );

kate
September 7, 2017 9:04 am

This is really helpful – can we put versioning via WordPress on the home page too?

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

25 Best Free WordPress Themes (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...