Snippet: Add Version Number to Child Theme to Prevent Browser Cache

  • Updated:

If you are working with a child theme style.css file you may find it very frustrating whenever you update the style.css and you don't see the changes live until you clear your cache. The following snippet can be used in your child theme functions.php file as the preferred way of loading your child theme's style.css file with a last modified version number for cache-busting. This way whenever you update your child theme style.css file the version number added to the end of the URL will be automatically updated so you can view the changes live.

Additionally this code will load your child theme after the parent Total.css file to ensure your custom CSS overrides the parent style.css file.

/**
 * Load the Total theme parent style.css file and add last modified version number to the child theme style.css
 */
function total_child_enqueue_parent_theme_style() {

	// Load the parent stylesheet.
	wp_enqueue_style(
		'parent-style',
		get_template_directory_uri() . '/style.css',
		array(),
		wp_get_theme( 'Total' )->get( 'Version' )
	);

	// Add version number to child theme style.css for chache-busting.
	if ( defined( 'WPEX_THEME_STYLE_HANDLE' ) ) {

		// First de-register the main child theme stylesheet
		wp_deregister_style( WPEX_THEME_STYLE_HANDLE );

		// Then add it again, using filemtime for the version number so everytime the child theme changes so will the version number
		wp_register_style(
			WPEX_THEME_STYLE_HANDLE,
			get_stylesheet_uri(),
			[],
			filemtime( trailingslashit( get_stylesheet_directory() ) . 'style.css' )
		);

		// Finally enqueue it again.
		wp_enqueue_style( WPEX_THEME_STYLE_HANDLE );

	}

}
add_action( 'wp_enqueue_scripts', 'total_child_enqueue_parent_theme_style' );
All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top