How to add a query var based on the asset's file mod time.

cache-busting-enqueues-like-a-boss.php

<?php

/*
 * These two techniques add a query var with the modified filetime of the CSS file
 *
 * It works great for cache-busting at the browser level
 * It won't help with Cloudflare cache. That one needs to be purged as even with the query var,
 * it will decide to send the old file contents.
 *
 * Of course, if you're using a cache plugin and tell it to discard the query vars,
 * this process becomes moot. (or, as Joey Tribbiani would say, "it becomes moo")
 *
 *
 * One thing to look for is the assets request's headers.
 * Open your browser's dev tools and head to the Network tab.
 * Here, you can filter the calls for JS files or CSS files only.
 * Look for the file you're trying to update. Click on it and check its headers.
 * Chances are that you will see an older "modified date" than what you would like it to use.
 * ...time to PUUUUURGE!!!
 *  *
 */

add_action( 'wp_enqueue_scripts', 'iso_enqueue_plugin_assets' );

function iso_enqueue_plugin_assets() {

	// will grab something like  2021-02-20_10-20-00
	$css_time = date_i18n( "Y-m-d_H-i-s", filemtime( plugin_dir_path( __FILE__ ) . 'assets/dist/css/my-plugin-styles.css' ) );

	// the version argument will add a query var "v"
	// result = https://my-site.com/wp-content/plugins/my-plugin/assets/dist/css/my-plugin-styles.css?v=2021-02-20_10-20-00
	wp_enqueue_style( 'my-styles', plugin_dir_url( __FILE__ ) . 'assets/dist/css/my-plugin-styles.css', [ /* dependancies */ ], $css_time );
}


add_action( 'wp_enqueue_scripts', 'iso_enqueue_theme_assets' );

function iso_enqueue_theme_assets() {

	// will grab something like  2021-02-20_10-20-00
	$css_time = date_i18n( "Y-m-d_H-i-s", filemtime( get_stylesheet_directory() . 'assets/dist/css/my-theme-styles.css' ) );

	// result = https://my-site.com/wp-content/themes/my-theme/assets/dist/css/my-plugin-styles.css?v=2021-02-20_10-20-00
	wp_enqueue_style( 'my-styles', get_stylesheet_directory_uri() . 'assets/dist/css/my-theme-styles.css', [ /* dependancies */ ], $css_time );
}