The scenario

A project is close to completion, then there’s this one thing the client wants changed. You can totally do it. Easy peasy.

Now, if you build a site with code, and not mouse clicking, then you would have edited the stylesheet.

So you change a couple of values and/or properties on the stylesheet.

Cool. Plus, you clear the cache.

All good?

No.

The situation

The people who checked the previous version of the site have the cache on its local storage, and you can’t make everyone use the incognito browser to check the un-cached version of the website to confirm that it’s been changed.

So they only see the version before the stylesheet change.

Hit refresh, nope. Nothing changes. Nope.

 

 

Uuuuuuuuuuuugggghghhhghghghghghghhghgh

So now you got a bunch of people asking “Did you REALLY make those changes? I can’t see them, I refreshed the browser” and so on… until it’s been taken care of.

Make it stop.

The solution

(Disclaimer: You usually won’t be having this problem if you use the additional CSS tab in the customizer, but if you style a whole website, it’s better to actually code the whole thing properly, and not add a couple of quick snippets to the theme, so this solution doesn’t apply to short CSS snippets in the additional CSS field. It’s for large CSS files in the WP enqueue.)

Alright, this is actually way simpler than it seems.

And that’s good, because I had so much frustration with this.

Here’s how to get it done.

Step 1. Connect to your server, go to your child theme folder, and to the folder with the stylesheet.

Step 2. Duplicate the CSS file, and name it something different. Like with a 2 at the end.

Step 3. Now go to functions.php and change the name of the enqueued CSS file to the new one.

And… you’re done.

 

That’s it. The browser will have to load the new stylesheet because it realizes it’s a different file.

PS. I’ve read that this works with adding CSS file versions too, but I couldn’t get it to work with my setups reliably, so I just go with a full filename change.

 

 

Photo by Justyn Warner on Unsplash