Child theme stylesheet loading twice

The main issue here is that by altering the parent theme, you’ve nullified the purpose of creating the child theme in the first place, because if the theme were to be updated in the future, you’d have to find that line and delete it again.

When I use the same code, I don’t see that the child theme’s stylesheet loading twice. Can you post a link to your site?

Thanks for your help! Here’s a link to my site.

Your site seems fine to me. You’ve only got two files named style.css loading: one from the parent theme, and one from your child theme.

Right, but before I took this out —

wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri(), array( 'genericons' ) );

from the parent theme’s functions.php, the child theme was loading twice.

That didn’t happen for me. Can you temporarily put that line back in the parent and then I’ll check out the site again?

I’m having this same issue with a test site I’m working on (unfortunately not available publicly). I’ve created a child theme of the twentytwelve theme and added this code to the child theme’s function.php:

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

Here’s what I find in the head of my site:

<link rel='stylesheet' id='twentytwelve-style-css'  href='https://testsite/blog/wp-content/themes/twenty-twelve-child/style.css?ver=4.0' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentytwelve-ie-css'  href='https://testsite/blog/wp-content/themes/twentytwelve/css/ie.css?ver=20121010' type='text/css' media='all' />
<![endif]-->
<link rel='stylesheet' id='parent-style-css'  href='https://testsite/blog/wp-content/themes/twentytwelve/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='https://testsite/blog/wp-content/themes/twenty-twelve-child/style.css?ver=4.0' type='text/css' media='all' />

FireFox and Chrome developer tools show that the rules in twenty-twelve-child/style.css are overridden by the rules in twentytwelve/style.css. And then those rules are overridden by the rules in twenty-twelve-child/style.css.

@cmeers: I see what’s going wrong, now. Try this function, instead:

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', 20 );
function enqueue_child_theme_styles() {
    wp_deregister_style( 'twentyfourteen-style' );
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

This function deregisters the main stylesheet called in by the parent theme, but still allows the parent theme to call in the other stylesheets it uses. Your child theme now loads both the parent and child theme’s main style.css.

That didn’t work for me. I still get the exact same link tags in the head.

@lilaulan: It wasn’t for you. It was for the original poster.

Could you explain why it shouldn’t work in my case, please? I don’t see any difference between the original poster’s problem and mine.

Since you’re not using the Twenty Fourteen parent theme, you don’t have a stylesheet with the ID twentyfourteen-style to deregister. In your case, try using wp_deregister_style( 'twentytwelve-style' ); instead.

Yes that does it. (And it should have been obvious, sorry.) Thank you so much!

Thanks for your help @stephencottontail. WordPress updated the codex page I originally referenced. Turns out I wasn’t the only one with that issue.

The problem here is really that the codex entry need a proper clean up. The examples there are really generic, while the text refers to twentyfifteen. You are supposed to replace textually 'parent-style' and 'child-style' by their proper name for it to work.

If I derive a child theme from twentyfifteen, the code is
wp_enqueue_style( 'twentyfifteen-style', get_template_directory_uri().'/style.css' ); and NOT

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

This is, imho, the proper and intended way of using scripts and styles enqueuing.

Using wp_deregister_style, while it works, is overkill.

Just thought posting the whole code for my child theme is more helpful.
derived from parent-style = twentyfifteen-style, and my child theme is child-style = zlabiya-style

/* load the styles and overrides */
function zlabiya_enqueue_styles() {
    wp_enqueue_style( 'twentyfifteen-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'zlabiya-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('twentyfifteen-style')
    );
}
add_action( 'wp_enqueue_scripts', 'zlabiya_enqueue_styles' );