WordPress: Auto versioning of CSS/JS files #snippet #WordPress

functions.php

/* 
  Auto-version CSS & JS files, allowing for cache busting when these files are changed.

  Place in functions.php or wherever you are enqueueing your scripts & styles

  Avoids using query strings which prevent proxy caching

  Adjust paths based on your theme setup. These paths work with Bones theme
*/

$mtime = filemtime(dirname(__FILE__) . '/css/style.css');
wp_register_style( 'bones-stylesheet', get_stylesheet_directory_uri() . '/library/css/style.' . $mtime . '.css', array(), null, 'all');

// enqueue the stylesheet
wp_enqueue_style( 'bones-stylesheet' );

/* 
  this will change css filename from style.css to style.1234567890.css, where 1234567890 is the time that the file was last saved.

  IMPORTANT: Unless you use the .htaccess rewrite rule below (or something similar), this will break your site!

  Feel free to throw things at me if this isn't done correctly. I took the idea from here:
  http://w-shadow.com/blog/2012/07/30/automatic-versioning-of-css-js/
*/

htaccess

# place this .htaccess file in your theme directory
# For now I cannot get this to work with WP Engine. It works fine locally (MAMP)

# Auto-versioning support
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]
</IfModule>

You can do this with WP Engine by using the redirect rules. You can use the "break" type of redirect which just hides the real url and doesn't actually perform a 301/302

Forgot, you can't do the redirects in WPEngine's staging environment.

Anywhere I'm doing this I wrap it in

if(!strpos($_SERVER['SERVER_NAME'],'staging.wpengine.com'))

The jQuery js on the WordPress sites I am trying to update already have versioning query strings, so would this affect that? I was only intending to add them to the theme style.css files.