If you are a WordPress newbie and wanted to add your own CSS styles onto an existing WordPress theme using child template like me, you may also be following the instruction on WordPress.
As I was working with the twenty-twenty-one theme, which uses get_template functions to load CSS styles, I added the following given code template into a functions.php file within the child template.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'parenthandle' ),
wp_get_theme()->get('Version') // this only works if you have Version in the style header
);
}However my activated child template only loaded the parent theme and CSS style on my website.
After researching for a few hours and finally coming across this forum post, only I realised that among all the string arguments here, 'parenthandle' should be changed to point towards the name of the parent CSS style as defined in the parent functions.php file, i.e. 'twenty-twenty-one-style' (if you use twenty-twenty-one theme like me).
Changing the code to this will solve the problem.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'twenty-twenty-one-style' ),
wp_get_theme()->get('Version') // this only works if you have Version in the style header
);
}And your child template should now be loaded.
