It’s an age-old problem. We make an update to style.css and we have to walk clients through how to clear their browser cache and remind them to do so every time we make a change they have requested. When a website is live, if style.css is cached, a website visitor may also be unable to see the latest changes. They may view an outdated version of the site instead, which no longer presents the website owner’s current vision, branding, or style.
The following issues had to be addressed:
- We needed to cache stylesheets to improve website speed.
- We often forgot to update the query string manually after a stylesheet update to show the browser the stylesheet has been updated.
- Both clients and website visitors should see the latest version of the website without having to know to clear their browser cache.
At last, we have a solution for all three of these problems!
How can we force browsers to clear style.css cache and display the latest version of the file?
Using the function filemtime(), we can find the time the stylesheet was last modified. If the last modified date is different from the previous time someone visited, their browser will recognize it as updated content because of the updated timestamp. Then the browser will fetch the new version instead of showing the previously cached version.
This suggestion on esri inspired us to use this solution to force the browser to see the latest version of the stylesheet.
For example, using this code in the TwentyThirteen child theme functions file:
wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), filemtime(get_template_directory()) );
Outputs this in the website’s HTML:
<link rel='stylesheet' id='twentythirteen-style-css' href='/wp-content/themes/twentythirteen-child/style.css?ver=1547242364' type='text/css' media='all' />
In your own child theme template, the original code could look like this:
wp_enqueue_style( 'red_underscores-style', get_stylesheet_uri() );
The new code this:
wp_enqueue_style( 'red_underscores-style', get_stylesheet_uri(), array(), filemtime(get_template_directory()) );
And this now outputs this in the website’s HTML:
<link rel='stylesheet' id='red_underscores-style-css' href='/wp-content/themes/red_underscores/style.css?ver=1545203752' type='text/css' media='all' />
Important note: This method won’t work if you have a plugin installed that removes query strings, like Remove Query Strings from Static Resources or Clearfy with the “Remove version from stylesheet” setting on, or if you are stripping out the version query string via a CDN or in some other way. In Clearfy, you can turn this setting off to stop removing the stylesheet query string:
Now our clients and the website visitors are able to see the latest version of the style.css file on every visit. Make sure your website visitors see the right stylesheet every time they visit your site.
Do you have another solution for how to force the browser to see the latest stylesheet without requiring users to clear their browser cache?
