Purge CSS Cache Automatically After Editing a File

Last Updated -

Our CDN service is a pull CDN in which 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.

You 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.

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

Related Topics

Pagely is the Managed WordPress Hosting Platform designed to exceed the needs of media, business, and Enterprise customers alike. We help the world's biggest brands scale WordPress.

Copyright © 2006-2017 Pagely, Inc. All rights reserved.
Pagely® and WordPress® are registered trademarks.

Powered by Zendesk