Wordpress - How do you avoid caching during development?

Add the filemtime() of your stylesheet as version parameter. Lets say, your default stylesheet is in css/default.css and css/default.min.css (not style.css). When we register a stylesheet on wp_loaded (not init), we can pass a version as fourth parameter. That will be the last modified time and therefore change every time we change the file.

$min    = WP_DEBUG ? '': '.min';
$file   = "/css/default$min.css";
$url    = get_template_directory_uri() . $file;
$path   = get_template_directory() . $file;
$handle = get_stylesheet() . '-default';

// Overridden?
if ( is_child_theme() && is_readable( get_stylesheet_directory() . $file ) )
{
    $url  = get_stylesheet_directory_uri() . $file;
    $path = get_stylesheet_directory()     . $file;
}

$modified = filemtime( $path );

add_action( 'wp_loaded', function() use ( $handle, $url, $modified ) {
    wp_register_style( $handle, $url, [], $modified );
});

add_action( 'wp_enqueue_scripts', function() use ( $handle ) {
    wp_enqueue_style( $handle );
});

If you are using Node.js and Grunt, I strongly recommend Browsersync. It will watch your files and update them instantly whenever they change. It can also synchronize the scrolling position, form submissions and more across multiple open browsers. Very cool.


After searching for a simple solution many times i decided to find something that works!

so... after thinking about it i found a great way to override caching while developing new websites... (and its easy).

What we need is to tell wp this is a new CSS version like this...

Before changes:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

After changes:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

This is what we added:

?v='.time()

Explanation:
We are basically adding a dynamic version number to the css file which forces the browser to load the new css every time we update it.

Don't forget to remove it after your done developing otherwise your caching won't work for this file and it would load for returning users again and again.

This technique works for css & js files - hope this helps ;)


This might seem overly simple, but how about just disabling caching until you're done with the development portion of your site? It's more than simple to turn on and off.