Leveraging browser caching can improve your websiteβs loading times for repeat visitors. However, it also means that users might sometimes see outdated content when they visit your site.
The best way to avoid this issue is to implement βversioningβ for your WordPress content. That way, users will always get the latest version of your website, even if their browsers have cached the site. In this article, weβll talk more about browser caching, versioning, and then weβll teach you how to implement it in WordPress.
Letβs get to work!
What Versioning Is (And How It Impacts Browser Caching)
Browser caching is a process that saves files from your website on your visitorβs devices so that they donβt need to be downloaded when they revisit your site. This is a straightforward solution that helps to cut down on loading times.
When you leverage browser caching, you usually set expiry dates for the content you want to save. For example, you can configure your .htaccessΒ file to store files on userβs computers for a specific period. When that time is up, their browsers will check for new versions of those files.
The problem is that youβll often need to update files on your server before the cached versions expire. For example, the code above will automatically cache anyΒ pngΒ files. If your siteβs logo is aΒ pngΒ file and you make changes to it, those users might not see the new version until their cache expires.
Versioning, also known as βcache bustingβ, solves this problem by automatically forcing updates to the cache if a file has been changed. Itβs a simple workaround that enables you to implement browser caching with long-lasting expiration dates without having to worry about displaying outdated content. However, it does require a bit to work to set up, which brings us to the next section.
How to Use Versioning to Update Your Cached WordPress Content (In 2 Ways)
Weβre now going to show you how to set versions of different types of files to bust your usersβ cache. Keep in mind β you might run into some issues using these methods if youβre using a caching plugin. If so, youβll want to flush your siteβs cache through whichever plugin youβre using, to ensure your site is serving the latest versions of each file.
1. Update Your Child Themeβs Version Using theΒ wp_enqueueΒ Function
If youβre using a child theme (which you should be!), you can force WordPress to load a new version of its stylesheet through theΒ functions.phpΒ file. As you may know, you need to use theΒ wp_enqueue_styleΒ function within theΒ functions.phpΒ file to load a themeβs stylesheet. Hereβs the format the WordPress codex suggests you use:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
That snippet does the trick. However, it doesnβt include a cache busting function. In contrast, the code below enables you to include the child themeβs version number:
function my_theme_enqueue_styles() { $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
This code pulls the version number from your child themeβsΒ style.cssΒ file. When you initially set up your child theme, you had to to create a new stylesheet, including a snippet like this one:
/* Theme Name: Β Β Twenty Fifteen Child Theme URI: Β Β Β http://example.com/twenty-fifteen-child/ Description: Β Twenty Fifteen Child Theme Author: Β Β Β Β Β Β John Doe Author URI: Β Β http://example.com Template: Β Β Β Β twentyfifteen Version: Β Β Β Β Β 1.0.0 License: Β Β Β Β Β GNU General Public License v2 or later License URI: Β http://www.gnu.org/licenses/gpl-2.0.html Tags: Β Β Β Β Β Β Β Β light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: Β twenty-fifteen-child */
All you have to do is update the number within theΒ VersionΒ line each time you make a change to your child themeβs stylesheet. This will force WordPress to load the latest version of the file.
In case you need a reminder, you can update both these files by accessing your website via FTP. If you donβt have a client set up, we recommend using FileZilla. Navigate to theΒ wp-content/themesΒ directory and look for your child themeβs folder within. Both itsΒ functions.phpΒ andΒ style.cssΒ files should be right within:
To edit either file, just right-click on it and choose theΒ View/EditΒ option. This will open the file using your local default text editor, enabling you to make changes to the code.
2. Rename Your Static Files to Force a Cache Update
The previous method takes care of updating your child theme. However, depending on how you set up browser caching, your website is probably saving copies of a lot of other files. For example, during our guide to implementing browser caching, we provided you with a code snippet that should cache copies of your images, CSS, HTML, and JavaScript files:
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 week" ExpiresByType text/x-javascript "access 1 week" ExpiresDefault "access 1 month" </IfModule>
We can use the same file to implement a new set of rules. Use the following code, andΒ add it below the </IfModule> tag of the snippet we showed you previously:
<IfModule mod_rewrite.c> RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|jpeg|gif)$ $1.$3 [L] </IfModule>
This tells WordPress to check if any files using those formats have appended numbers within their filenames, like so:
child-theme/style.201.css
In that example, we updated theΒ style.cssΒ file and changed its filename to reflect that. TheΒ 201Β within its filename represents theΒ style.cssβsΒ version number. WordPress will still recognize it as your themeβsΒ style.cssΒ file, but the changes we made to .htaccessΒ enable you to indicate itβs a new version.
After adding that code to your .htaccessΒ file, youβll be able to set versions for all the file types youβve included. For example, if you want to upload a new version of aΒ pngΒ logo, you just have to rename the file to something such asΒ logo.201.pngΒ before uploading it.
Conclusion
Implementing browser caching is an excellent way to ensure your siteβs visitors enjoy fast loading times. However, this can also result in situations when you update your content, but users canβt see the changes.
The easiest way to tackle this issue is to use versioning for the content your userβs browsers cache. Weβve shown you the following ways to do this:
- Update your child themeβs version using theΒ wp_enqueueΒ function.
- Rename your static files to force a cache update.
Do you have any questions about how to implement file versioning in WordPress? Letβs talk about them in the comments section below!
Article thumbnail image by imdproduction / shutterstock.com
this is awesome.. the last few hours I’ve been searching for exactly the same. Its like you guys know what I needed for today.
Happy to help, Arun π
The child theme cache busting function did not work for me. Setting $parent_style = ‘divi-style’; but I end up with a 500 error.
There is an error in the code, in function my_theme_enqueue_styles() line 7 should be:
wp_get_theme()->get(‘Version’)
Thank you Orlando, that made the difference!
I have a solution specifically for Divi:
https://github.com/web2033/divi-child-theme-css-v
Thanks, Eugene. That works perfectly. Appreciate the share!!
Thanks for the child theme setup Eugene. I’m definitely going to try it out.
This post came at the right time! I was just starting to research this. It’s so annoying how many times I have to refresh the browser and clear cache for the specific browser. Even in incognito/private mode, I have the same issue with changes now showing up right away.
Hi:
Just a little editor substitution error:
wp_get_theme()->get(‘Version’)
Should be:
wp_get_theme()->get(‘Version’)
Anyway, great solution to this problem!
hahahaha please fix my previous comment with the correct substitution.