How to Fix: Child Stylesheet Loading Twice (WordPress)

One of the things that can happen when you’re working with WordPress child themes is that the stylesheet will get loaded twice. In fact, if you follow the official tutorial, which is here, the tutorial is exactly what will cause the problem because it doesn’t consider that some themes automatically load the child style.

If we take this code for example:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
	$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
	$theme        = wp_get_theme();
	wp_enqueue_style( $parenthandle,
		get_template_directory_uri() . '/style.css',
		array(),  // If the parent theme code has a dependency, copy it to here.
		$theme->parent()->get( 'Version' )
	);
	wp_enqueue_style( 'child-style',
		get_stylesheet_uri(),
		array( $parenthandle ),
		$theme->get( 'Version' ) // This only works if you have Version defined in the style header.
	);
}

This code block adds two stylesheets to the current WordPress page using the wp_enqueue_style function. The function is called in the context of the WordPress action hook wp_enqueue_scripts, which is fired on the site’s front-end. I’ve covered this in a separate article before.

The issue is that some themes (but not all) are configured so that the child themes stylesheet is automatically loaded because of a function in the parent theme. So, if you were to add this function (the one above) to your site, you would get your child theme’s stylesheet loaded twice.

To illustrate the issue, I have added the above code block to my functions.php files in my child theme, after if I refresh the site and check the page’s source, I can see that my child themes stylesheet is being loaded twice.

One stylesheet has the id of “child-style” (added by the function), and the other one has an id of “inertia-css” (added by the parent theme because it is hardcoded in).

How to fix this?

All you need to do is remove this code from the original function:

wp_enqueue_style( 'child-style',
		get_stylesheet_uri(),
		array( $parenthandle ),
		$theme->get( 'Version' ) // This only works if you have Version defined in the style header.
);

This will ensure that you are not loading your child stylesheet twice because your original theme already does it for you.