Wordpress - GeneratePress theme - Cache busting

Question

Im maintaining a wordpress site which uses GeneratePress theme. To extended a child theme solution was used. It is already a quite developed child theme (saying this to avoid dramatic solutions).

For a while I have had issues with CSS cache every time I update the CSS. style.css child stylesheets deliver the cache version instead of the modified one .

I believe that GeneratePress theme is loading parent style.css + child style.css if it exists.

generatepress/functions.php

// Enqueue our CSS.
wp_enqueue_style( 'generate-style-grid', get_template_directory_uri() . "/css/unsemantic-grid{$suffix}.css", false, GENERATE_VERSION, 'all' );
wp_enqueue_style( 'generate-style', get_template_directory_uri() . '/style.css', array( 'generate-style-grid' ), GENERATE_VERSION, 'all' );
wp_enqueue_style( 'generate-mobile-style', get_template_directory_uri() . "/css/mobile{$suffix}.css", array( 'generate-style' ), GENERATE_VERSION, 'all' );
wp_add_inline_style( 'generate-style', generate_base_css() );

// Add the child theme CSS if child theme is active.
if ( is_child_theme() )
    wp_enqueue_style( 'generate-child', get_stylesheet_uri(), true, filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );

Reading this piece of code... it seems that IF a child-theme is detected, it should already do the cache busting BUT... to me it does not. I dont get a url with filemtime result as a version param.

My child theme functions.php does not enqueue any 'style.css'. Despite of that it gets loaded after the parent style.css.

ATTEMPT 1 I have read the section for adding CSS from the generatepress https://docs.generatepress.com/article/adding-css/ .

I don't see how to cache bust the child style.css file.

ATTEMPT 2 My first attempts to solve the issue has been based on enqueueing the stylesheet when wp_enqueue_scripts is triggered.

function theme_css(){
    wp_enqueue_style( 'my-theme-style', get_stylesheet_directory_uri().'/style.css', 'generate-style', '1.1', 'all');
}
add_action( 'wp_enqueue_scripts', 'theme_css' );

I referred to generate-style since it seems to me that it is the parent default style to depend on (child style.css would load after the parent style.css). You can see this in the previous code snippet. It does not work for me. Child theme would load first and later the parent theme stylesheet. This is unfortunate and break the css. Order should be the contrary (parent style.css first and child style.css later). As said before, depending on generate-style does not help.

ATTEMP 3 Create the stylesheet with another filename . Generatepress complains since it needs a style.css stylesheet file if child_theme is detected. I could have a child theme with an empty style.css and the new stylesheet. The issue would be that style.css cache will be delivered for returning users.

Im somehow new to wordpress so I dont know other mechanism it could have to solve this. Maybe there is some easier solution that could work?

Answer 1

If you're using Autoptimize as the theme docs suggest here , then you need to delete the cache and your users will see the changes. This quote is from that documentation:

Installing Autoptimize

Reducing the amount of CSS and JS files being loaded on each page load will make a huge difference to your page speed.

Another perk with Autoptimize is it will bundle the CSS generated by your options in the Customizer into an external file, allowing your browser to cache it.

To delete and reset Autoptimize cache: Login to wp-admin and go to Plugins/Autoptimize/Settings to delete the cache and it will do that and start a new cache for you. There's also an Autoptimize item in the top menu bar in wp-admin; it's handy for this too.

Answer 2

Even though the question is being marked as answered Autooptimize was not mentioned in the original question. So to answer the original question.

The correct way to bust your cache is to append query strings to your static asset urls eg:

https://example.com/wp-content/themes/themetry/style.css?3242564353

wp_enqueue_style( 'child-style', get_stylesheet_uri(), array(), '3242564353', 'all' );

<link rel='stylesheet' id='child-style-css'  href='https://example.com/wp-content/themes/thetheme/style.css?ver=3242564353' type='text/css' media='all' />

You can automate this by replacing the '3242564353' with the php function filemtime()

wp_enqueue_style( 'child-style', get_stylesheet_uri(), array(), filemtime(), 'all' );

Now when you save the file modified time will provide a different query string and the cache will bust.