Astra Child Theme cache busting

To work with the Astra Child theme as generated using their generator you do need to understand the functionality added to the functions.php. Besides the general enqueueing of the child theme CSS they also define a version which is used to as an appended number to the css to allow for cache busting to take place.

Cache Busting

So on each update you should add a minor or major update number to the version in that file and also in style.css. Here is an actual example functions.php based on the generated code

<?php
/**
 * Site Theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Site
 * @since 1.0.1
 */

/**
 * Define Constants
 */
define( 'CHILD_THEME_SITE_VERSION', '1.0.1' );

/**
 * Enqueue styles
 */
function child_enqueue_styles() {

	wp_enqueue_style( 'site-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_SITE_VERSION, 'all' );

}

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

As you can see this child theme is now at version 1.0.1 so the theme has had a minor update. And when we reload the site and check the header for the style.css we see the following

URL: https://site.nl/wp-content/themes/astra-child/style.css?ver=1.0.1
Status: 200 OK
Source: Network
Address: xxx.xxx.xxx.xxx:443
Initiator: 
sport-shirts:92

As you see the version number is added to the stylesheet. This string forces the browser to load the latest style. And this is called cache busting

Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.