Purge CSS Cache Automatically After Editing a File

Our CDN service is a "pull CDN", which means that every static asset is downloaded just once. This can be problematic if you are editing your CSS/JS files on a live site and find that your changes are not reflected when you refresh.

To bypass this, you may need to "cache bust" your CSS/JS file with a unique query string as each new query string will be separately cached and considered unique content. An old fix by Mark Jaquith will do the trick.

Note: Although your CSS within the CDN cache will be purged automatically, pages may still embed the old version. When making CSS changes, you will still need to purge your page cache to reflect the updated location.

Simply modify the CSS reference link (typically in your header.php or functions.php) file as shown:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?ver=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

The important bit is:

<?php bloginfo('stylesheet_url'); echo '?ver=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>

This automatically updates the ?ver=12345678 ending part every time you modify the file. Now your changes will be available instantly.

Note: It's important you stick to using ?ver= as we'll ignore anything else.

If the above code snippet isn't working for your theme, you may need to adjust the enqueue code as needed. This page may be of some help to you: Cache busting JS/CSS.

A proper WordPress Usage Example with wp_enqueue_style()

Assuming no child theme:

$handle = 'my-css';
$src =  get_template_directory_uri() . '/my-css.css';
$deps = '';
$ver = filemtime( get_template_directory() . '/my-css.css');
$media = '';
wp_enqueue_style( $handle, $src, $deps, $ver, $media );