How to cache bust a child theme style.css

by

@dalbaeb’s comment eventually lead to insightful discussions and a feasible solution. Thanks a lot!

I believe the reason my child theme CSS was loaded using 'ver=<parent-theme-version> was because I had followed the WP Codex on child themes 1:1. My functions.php contained this:

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}

The code I ended up using was first mentioned in https://wordpress.stackexchange.com/a/182023/30783 but numerous sites on the Internet copy-pasted it (without giving proper credit).

// Making sure your child theme has an independent version and can bust caches: https://wordpress.stackexchange.com/a/182023/30783
// Filter get_stylesheet_uri() to return the parent theme's stylesheet
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');
// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

function use_parent_theme_stylesheet()
{
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}

function my_theme_styles()
{
    $themeVersion = wp_get_theme()->get('Version');

    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array(), $themeVersion);
}

Update 2017-01-26

The current WP Theme handbook now contains a proper fix:: https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet

Leave a Comment