Auto Versioning CSS and Javascript in WordPress

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]

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]
* Auto-versioning CSS and JavaScript in WordPress
* @author Eric Binnion

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' );

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

'custom_js', // handle for main.js
get_template_directory_uri() .'/js/main.js' ,
array(), // dependencies
$time, // version number
true // load in footer

 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

5 responses to “Auto Versioning CSS and Javascript in WordPress”

  1. Typo: variable name for script should be $jtime no $time

  2. someonewhowantsyouwell Avatar

    $jtime = template_directory() . ‘/js/main.js’ );
    something might be missing sir..
    Maybe $jtime = filemtime(get_template_directory() . ‘/crossfading.js’);

    1. Correct. Thanks for pointing that out. Perhaps I copied it incorrectly ¯_(?)_/¯

  3. how to add version for main style.css of theme, because this style automatic add by wordpress

  4. Since this is an old post there has been a change since then. My function was spitting out the true value into the media variable so it was not working properly. For the CSS functionality replace true with ‘all’ or whichever media query you’d like and it should work properly.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.