As a developer, I am very well acquainted with cache issues when developing JavaScript and/or CSS. From experience, I have learned to use LiveReload to automatically reload my web site while working locally and to do a hard refresh in the browser after pushing files to the server.

But, many clients I have worked with aren’t aware that they may not be looking at the latest version of their site. So, when they check their site and see that the change I said I made isn’t there, they tend to be mad.

Now, there is a way to automatically bust the cache and force the client’s browser to pull down the latest file — Simply add a GET parameter at the end of your CSS or JavaScript.

[code lang=text]
http://yoursite.com/style.css?ver=1
[/code]

Notice how the above example has a version number at the end of the URL. The browser sees each version number as a different URL, so when you increment the version number, this triggers the browser to download the latest version of the JavaScript or CSS. While this is a great method, what if there was a way to automatically increment the version number instead of it being reliant upon a developer to remember to increment it?

Auto Versioning CSS and JavaScript in WordPress

After looking into this myself, I found a good tutorial about auto-versioning CSS in WordPress. This technique makes use of the PHP filemtime() to get the timestamp that the CSS was last updated. Thus, every time CSS or JavaScript changes, we can use the timestamp that file was changed (this is a unique integer) to automatically version our CSS and JavaScript.

While the method above does seem to work, it requires some unnecessary htaccess rewrites since the developer is actually changing the filename, as opposed to adding a GET parameter at the end of the filename.

To remedy this, and remove the need for all htaccess rewrites, let’s just move the timestamp to the end of the CSS or JavaScript filename. Here’s how you would enqueue auto versioned CSS and JavaScript  in WordPress with this auto versioning.

[code lang=text]
<?php
/**
* Auto-versioning CSS and JavaScript in WordPress
* @author Eric Binnion
* https://eric.blog
*/

add_action("wp_enqueue_scripts", "auto_version_scripts", 20);
function auto_version_scripts() {
// Get last modified timestamp of CSS file in /css/style.css
$ctime = filemtime( template_directory() . '/css/style.css' );

// Get last modified timestamp of JS file in /js/main.js
$jtime = filemtime( template_directory() . '/js/main.js' );

wp_enqueue_style(
'custom_style', // handle for style.css
get_template_directory_uri() .'/css/style.css' ,
array(), // dependencies
$ctime, // version number
true // load in footer
);

wp_enqueue_script(
'custom_js', // handle for main.js
get_template_directory_uri() .'/js/main.js' ,
array(), // dependencies
$time, // version number
true // load in footer
);
}
[/code]

 Questions, Comments, Bugs?

If you have any questions or input, please leave a comment below. If you notice any potential bugs, please leave a comment below or leave a comment at the public gist for this function at https://gist.github.com/ebinnion/c04265e34151a5e9a14e.