8

There may be several aspects to my question but I feel in essence it's easy: how do you make sure changes to a child theme style.css are properly propagated across caches?

I read in a few places that WP should/would be placing the WP version in nnn when the resource is fetched as http://host/wp-content/themes/theme-child/style.css?ver=nnn. In my installation at http://frightanic.com/ I see that the parent theme version is used instead. I have W3 Total Cache and a CDN in place but even if they're disabled a resource like wp-content/themes/frightanic/style.css?ver=3.0.7 is requested. 3.0.7 is the version of the Decode parent theme.

But be that as it may, if I update my child theme CSS without updating either WP or the parent theme at the same time how can I bust it from caches?

11

@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

1

This works well when you add directly in your header.php and refresh the cache everytime you update your css file:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen" />

It displays: style.css?324932684 where the number is the time when the file was edited

  • 1
    Styles should be enqueued using wp_enqueue_style instead of hard coding. – bravokeyl Sep 30 '16 at 17:29
0

This may work as well. Using the php rand function:

function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css?'.rand(),
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
  • 1
    That's not a good idea as you want those assets to be cachable by the browser for as long as they don't change. – Marcel Stör Dec 22 '16 at 15:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.