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?

Have you tried clearing your browser cache in order to see your changes? That's usually my first port of call for css caching issues like this. — Nathaniel Flick
Yes, that cleans my cache but not the cache of the hundreds people who visit the site daily. — kitimenpolku
Are you running a caching plugin on the site? If you're using Autoptimize as the theme docs suggest here, generatepress.com/fastest-wordpress-theme, then you need to delete the cache and your users will see the changes. — Nathaniel Flick
Yes, in production autooptimize. It comes with some random versioning alphanumeric tail. I see your point. Deleting that cache should generate a new one. Thanks — kitimenpolku
You're welcome. :) You can delete it from the plugin itself: Login to wp-admin and go to the Autoptimize plugin settings to delete the cache and it will do that and start a new cache for you. — Nathaniel Flick

Nathaniel Flick Nathaniel Flick · Accepted Answer · 2017-10-03T07:28:26

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.

Wordpress - GeneratePress theme - Cache busting

2 Answers