Wordpress CSS Versioning - Override Browser Caching

Browser caching is a wonderful thing. It speeds up our site’s performance and creates a better experience for repeat visitors. But when we push new changes to a live Wordpress site, we need to make sure that any previous user doesn’t view our new updated site with an older version of our site’s CSS.

There are many ways to make sure this doesn’t happen and (looking at a few of our Wordpress sites) we are currently using all of these methods. We can:

Manually updating the version number is a hassle and adding a timestamp fixes the issue but it does not allow us the benefits of browser caching for our users. The best method of these three is definitely to append the ‘Release’ directories version to our CSS as it allows the benefits of browser caching while making sure to override the cache when a change is pushed live. But…

Turns out there is a simpler, automated and easier way to accomplish this using PHP’s built in filemtime function. To do this simply use the following method when you enqueue your stylesheet.

wp enqueue style( 'main css', get template directory uri() . '/compiled css/main.css' , false, filemtime( get template directory() . '/compiled_css/main.css' ), 'screen' );

The above method adds a new version to the stylesheet anytime the main.css file is updated. This allows us the benefits of browser caching while making sure that the new css version is updated when code is pushed live. And it’s all right there in the enqueue_style function.