WordPress Child Theme in 2024 With Cache Busting Code

Updated June 17th, 2024
Updated June 17th, 2024
Share this post:

WordPress child themes give you the ability to make changes to your theme with peace of mind. You can make changes without being afraid of permanently breaking your theme and without fear of updates to the parent theme deleting your custom code.

All the code you need is found below. Watch the video for step-by-step instructions or just take the code and run with it.

Defining the child theme in the stylesheet

Directly below is the code that goes at the top of the style.css in the child theme:

Advertisement
/*
Theme Name: Twenty Twenty Four Child
Theme URI: http://example.com/twenty-twenty-four-child/
Description: Twenty Twenty Four Child Theme
Author: WordPress
Author URI: http://example.com
Template: twentytwentyfour
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-twenty-four-child
*/

/* Custom styles go here */

Child theme functions.php info the enqueue CSS

Directly below is the code to add to your child theme’s functions.php file to enable cache busting. For this to work properly you need to change the version number in the stylesheet every time to you make an update to it.

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentytwentyfour-style' for the Twenty Twenty Four theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Directly below is the code to add to your child theme’s functions.php file without cache busting.

Advertisement
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
};
?>

For more information about WordPress child themes head over to the WordPress codex.

Share this post:

Responses

Your email address will not be published. Required fields are marked *

  1. Hi! thanks a lot for the info, very useful. Quick question: what do you mean by “Also, if you’re functions.php file already has opening”?
    Thanks!

  2. Hi! a very helpful and no BS video on youtube, thanks!
    Just to make sure – in the functions.php code – do I have to just change the version name, nothing else? like, the ‘parent-style’, ‘child-style’ and ‘my_theme_enqueue_styles’ stay just like this?

    1. Hi Kristine,

      You just need to change the version name, nothing else. That will force the CSS file to be completely reloaded and your style changes should take effect.

      I hope that helps and thanks for stopping by!

  3. There’s an error in your style.css code, and it actually cost me some significant debugging time. The last line of the file is
    // Custom styles go here
    This is not a valid CSS comment, and it apparently causes the parser to ignore SOME content that follows. My line that immediately followed that was

    .ast-article-single {padding-top: 0px !important; padding-left: 0px !important;}

    My style line was ignored. After I removed the non-comment comment, it worked fine.
    Otherwise, thanks for the nice posting and explanation.

  4. Sorry that I’m asking for a different child theme “ Em’ it’s Fairy dark child theme Actually this coding is very tough that I can’t handle please I’m asking if you can drop me. Fairy dark child theme writting code please….

WPLearningLab