[Resolved] Child theme style.css version string

[sleddog]

I’ve implemented a child theme using
http://generatepress.com/api/themes/generatepress_child.zip

Everything works fine, though in my source I see:

<link rel='stylesheet' id='generate-style-css'  href='http://www.craftlabrador.com/home/wp-content/themes/generatepress/style.css?ver=1.2.4' type='text/css' media='all' />
...
<link rel='stylesheet' id='generate-child-css'  href='http://www.craftlabrador.com/home/wp-content/themes/generatepress-child/style.css?ver=1.2.4' type='text/css' media='all' />

It would be preferable if the link for the child theme’s style.css used the version set in that file, rather than the version of the parent theme.

[Tom]

Hi there,

All that version number does it set an expiration for browsers – when I update GP, browsers will reload the stylesheet.

I don’t believe it’s possible to allow a version to show up in that URL that is set in the file.

Sorry I can’t be more helpful!

[sleddog]

All that version number does it set an expiration for browsers – when I update GP, browsers will reload the stylesheet.

Exactly. And when I update the child stylesheet I want browsers to recognize the change and reload it. This doesn’t happen when the child stylsheet has the same version as the parent stylesheet. If I set a long expires time for css files, browsers will not recognize changes to the child style.css until either the expires time is reached or you update the parent theme 🙂

As a workaround, I’ve done this is the child theme’s functions.php:

function _fix_child_css_version( $src ) {
	$parts = explode( '?', $src );
	if ( stristr( $parts[0], '-child/style.css' ) ) {
		$child_ver = filemtime( get_stylesheet_directory() . '/style.css' );
		return $parts[0] . '?v=' . $child_ver;
	}
	else {
		return $src;
	}
}
add_filter( 'style_loader_src', '_fix_child_css_version', 15, 1 );

So the version number for the child stylesheet is now the file mtime. This lets me set a long expires time for css files, yet have browsers instantly recognize changes to style.css as the version number changes when I edit/save the file.

It’s a bit kludgy, maybe you can suggest something better 🙂

Thanks.

[Tom]

Good point – I always overlooked this as performing a simple refresh reloads the stylesheet anyways.

I’ve made a change to the core code in the theme so when you update your child theme’s CSS file, it will change the version and force the browser to reload the file.

Your code above will work for now, but it’s definitely a little clunky, so when you update to GP 1.2.5, be sure to remove it to increase performance.

Thanks!

[John]

Good Day,

Not a question or a problem.

Just to say that I had the same question as sleddog, particularly since we use a CDN so it’s really important that the version number changes to reflect child theme CSS changes. Otherwise we would have to clear the entire CDN cache every time we did a small CSS tweak. On my present theme I have a kluge much like his to solve this.

So the point of my comment is that this is at least the 6th time I have thought of a problem as I work on porting to GP and then found it already solved. Very impressive!

Thank you
John

[Author]

Posts