child stylesheet loading twice

  • Resolved janew

    (@janew)


    3 years, 11 months ago

    I followed the instructions for creating a child theme, and added the following to my child functions.php:

    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentytwenty-style' for the Twenty Twenty 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 in the style header
    );
}

    But now my child stylesheet is loading twice:

    <link rel='stylesheet' id='parent-style-css'  href='https://www.MyWebsite.com/wp-content/themes/twentytwenty/style.css?ver=1.6' media='all' />
<link rel='stylesheet' id='child-style-css'  href='https://www.MyWebsite.com/wp-content/themes/twentytwenty-child/style.css?ver=1.5' media='all' />
<link rel='stylesheet' id='twentytwenty-style-css'  href='https://www.MyWebsite.com/wp-content/themes/twentytwenty-child/style.css?ver=1.5' media='all' />

    Where did I go wrong?

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,

    WordPress uses the first parameter ($handle) of wp_enqueue_style to determine if it needs to load a specific asset. This is why the documentation suggests that the handle be unique. For example, if you renamed your parent handle to twentytwenty-style then it shouldn’t load twice. Once it see’s there is a duplicate handle, it will skip any future iterations.

    Thread Starter janew

    (@janew)

    I’m sorry I don’t understand any of that. I didn’t rename anything, I just copied the code from the Child Theme page of WordPress. As far as I can tell, it only defines two stylesheets: parent and child. Both of those are listed in my head, but the third one listed in the head is also the child style sheet, with a different id. I don’t know where that id came from.
    This is from the functions.php of the parent theme:

    function twentytwenty_register_styles() {

	$theme_version = wp_get_theme()->get( 'Version' );

	wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version );
	wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );

	// Add output of Customizer settings as inline style.
	wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );

	// Add print CSS.
	wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '/print.css', null, $theme_version, 'print' );

}

add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' );

    I don’t see anywhere there that it loads the child css as well. Am I missing it? Could be this is where that last id is coming from, but as said it’s applied to the child css and this is for the parent css.
    I’m very confused. Please help.

    Hello,

    In the code you provided in the question, change the following:

    $parenthandle = 'twentytwenty-style';

    WordPress uses those functions to generate the <link> HTML and generates the IDs based on the first parameter passed to wp_enqueue_style(). Once you’ve change the above you should no longer see the duplicated stylesheet.

    Thread Starter janew

    (@janew)

    Ohhh! Duh, now you say it, it seems obvious.
    Yes, that worked perfectly.
    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘child stylesheet loading twice’ is closed to new replies.