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
Muhammed says:
Hi,’
You can try the below option in your function.php. No need to rename and save.
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {
wp_enqueue_style(‘main-styles’, get_template_directory_uri() . ‘/style.css’, array(), filemtime(get_template_directory() . ‘/style.css’), false);
}
PK says:
Hi Muhammad, That’s very interesting. Thanks!
Scott Farquharson says:
I will definitely try this trick. I have dealt with this issue for years and I always tell customers to hit CTRL and F5 if on a PC (Command and R on a Mac, but I know that doesn’t work on Safari).
PK says:
I was really happy when this trick worked! Hope you like it!