1

When I've edited the child stylesheet for my site I'm encountering a problem where anyone who has already browsed my site will not see the correct version because their browser cache is using an old version of the same stylesheet. I have put some code in my functions file that's in the same folder as my child theme to force browsers to use the new code when I increase the "version" number in the functions file (presently at 2.4).
Using this method does not break the site, but it doesn't fix the problem with browser cache either so can someone who knows what they are doing help me troubleshoot it? Here's the code I'm using in my functions file (this is my second attempt and this question is edited):

<?php

/**
 * Enqueues child theme stylesheet, loading first the parent theme stylesheet.
 */

function purpose_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), '2.4'  );
}

add_action( 'wp_enqueue_scripts', 'purpose_child_enqueue_styles' );

Am I doing something obviously wrong? What other things could be getting in the way of this busting the browser cache? Many thanks

Here is the enqueue section of the Functions file for the parent stylesheet:


if ( !function_exists('purpose_enqueue_scripts') ) {
    function purpose_enqueue_scripts() {
    
        // Enqueue Styles
        wp_enqueue_style( 'purpose-style', get_stylesheet_uri() );
        wp_enqueue_style( 'purpose-style-mobile', get_template_directory_uri() . '/css/style-mobile.css', array( 'purpose-style' ), '1.0' );
        wp_enqueue_style( 'purpose-style-ie8', get_template_directory_uri() . '/css/style-ie8.css', array( 'purpose-style' ), '1.0' );
        
        // IE Conditional Styles
        global $wp_styles;
        $wp_styles->add_data('purpose-style-ie8', 'conditional', 'lt IE 9');
        
        // Resgister Scripts
        wp_register_script( 'purpose-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array( 'jquery' ), '20130729' );
        wp_register_script( 'purpose-hover', get_template_directory_uri() . '/js/hoverIntent.js', array( 'jquery' ), '20130729' );
        wp_register_script( 'purpose-superfish', get_template_directory_uri() . '/js/superfish.js', array( 'jquery', 'purpose-hover' ), '20130729' );
        wp_register_script( 'purpose-isotope', get_template_directory_uri() . '/js/jquery.isotope.js', array( 'jquery' ), '20130729' );
    
        // Enqueue Scripts
        wp_enqueue_script( 'purpose-html5shiv', get_template_directory_uri() . '/js/html5shiv.js' );
        wp_enqueue_script( 'purpose-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20130729', true );
        wp_enqueue_script( 'purpose-custom', get_template_directory_uri() . '/js/jquery.custom.js', array( 'jquery', 'purpose-superfish', 'purpose-fitvids', 'purpose-isotope', 'jquery-masonry', 'jquery-color' ), '20130729', true );
        
        // IE Conditional Scripts
        global $wp_scripts;
        $wp_scripts->add_data( 'purpose-html5shiv', 'conditional', 'lt IE 9' );
        
        // Load Flexslider on front page and slideshow page template
        if ( is_home() || is_front_page() || is_single() || is_page_template('template-slideshow.php') || is_page_template('template-blog.php') ) {
            wp_enqueue_script( 'purpose-flexslider', get_template_directory_uri() . '/js/jquery.flexslider.js', array( 'jquery' ), '20130729' );
        }
    
        // Load single scripts only on single pages
        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
            wp_enqueue_script( 'comment-reply' );
        }
    }
}
add_action('wp_enqueue_scripts', 'purpose_enqueue_scripts');
12
  • Please check if the HTML the browser receives has the correct cache-control headers. If the browser caches the HTML, then it also caches the <head> including the version of the CSS that you are delivering (which in turn means the browser includes the cached CSS). You can check by using the network tab in your browsers developer tools. May 16, 2023 at 10:17
  • get_template_directory_uri refers to the parent theme not the child theme, is this intentional? How are you testing if browser cache is applied or not? It's unusual to see a child theme registering the parents style.css as the parent theme normally does that. Likewise if you had made CSS changes would they not be made to the child themes css file not the parents?
    – Tom J Nowell
    May 16, 2023 at 11:54
  • Aha! that could be it because I'm trying to address the child themd stylesheet. What argument should I be using in this case? Thanks
    – Badger
    May 16, 2023 at 12:20
  • I just tried swapping get_template_directory_uri to get_stylesheet_directory_uri(). This made the theme void from the way it looked when I viewed the site. Would that occur if the parent theme had a higher number than the child one while the original argument was in place?
    – Badger
    May 16, 2023 at 12:50
  • that implies you're now loading a style.css from the child theme and no longer have the styles from the parent theme. Perhaps you're editing one but expecting changes from the other to show? It's not clear which files you're editing in which theme because you're only loading one of them
    – Tom J Nowell
    May 16, 2023 at 12:57

1 Answer 1

2

If you are editing the child theme CSS then this line has nothing to do with that:

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', [], THEME_VERSION, 'all');

get_template_directory_uri always refers to the parent theme, get_stylesheet_directory_uri always refers to the active theme, in this case the child theme.

Likewise these lines refer to the currently active theme, aka the child theme:

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); //gets version written in your style.css

You need to verify that:

  • the file you are editing's URL changes when you modify it using browser dev tools, if it does not change then you should expect it to be cached until it does change
  • that you are not using the parent themes version for the child themes stylesheet or vice versa
  • that you are enqueing both, and that their names are clear to avoid confusion
  • that the child theme uses get_stylesheet_directory_uri when enqueing, not get_template_directory_uri

Most people do not use the theme version to update the URL when the file changes as that requires modifying the theme version which is a manual and easily forgotten process. Instead using filemtime or an MD5 hash of the stylesheet is more reliable.

4
  • At the bottom of my post I showed where I bumped the version of the theme. So it should be working. Why isn't it, if I"ve increased the theme version?
    – Badger
    May 16, 2023 at 10:53
  • @Badger I've updated my answer, but some of it is guesswork, I suspect there's a basic confusion around parent vs child themes, how the two style.css files are loaded, etc, but you've not included the code for both so it's not possible to say with certainty, and a lot of your statements are implicit not explicit, e.g. "when I modify the style.css file" vs "when I modify the style.css file in the parent theme"
    – Tom J Nowell
    May 16, 2023 at 13:57
  • Ok thanks. To answer here quickly, I'm only editing the child theme stylesheet. I'm not even sure how each are loaded. I'm aware that when using a child theme, there has to be a functions file to enqueue. Which direction that works in is beyond me. Sorry about this!
    – Badger
    May 16, 2023 at 14:06
  • I've edited the question at the top now. Thanks
    – Badger
    May 16, 2023 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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