Child Themes break styling (responsive, dependencies, mobile, menu icon)

The recommended way to include stylesheets these days, per Child Themes, is

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    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')
    );
}

And that’s basically what you guys do in your supplied child theme. Unfortunately (and this isn’t just your problem, it’s a problem with many themes), because you use multiple style sheets, this results in broken dependencies. If done the recommended way, the order of style sheets comes out:

parent
child
flat_responsive_bootstrap
flat_responsive_font-awesome
flat_responsive_menu_css

You don’t immediately notice problems, but some do pop up. For example, when done this way, the pancake icon never turns visible.

I fixed it for myself by doing two things. First, change the parent theme to always call the main stylesheet, and make it depend on those three, so it comes out in the correct order.

From:

// Loads our main stylesheet.
 wp_enqueue_style( 'flat_responsive-style', get_stylesheet_uri(), array(), current_time( 'mysql' ) );

To:

// Loads our main stylesheet.
wp_enqueue_style( 'flat_responsive-style', get_template_directory_uri() . '/style.css', array('flat_responsive-bootstrap', 'flat_responsive_font-awesome',
'flat_responsive_menu_css'), current_time( 'mysql' ) );

NB: get_stylesheet_ui() will get the child stylesheet, even if called in the parent themes function.php.

Then, in the child theme, instead of enqueueing the parent stylesheet, register the child stylesheet with a dependency on flat_responsive-style:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
        wp_register_style('child-style', get_stylesheet_directory_uri()
            . '/style.css', array('flat_responsive-style'));
        wp_enqueue_style('child-style');
}

WordPress probably needs to come up with a better recommended solution (e.g., tell theme authors to always call their last encoded stylesheet “parent”, and then change the child recommendation to put a dependency on parent). Or something.

But, in the meantime, since you’re providing a child theme skeleton anyhow, you can do the above to ensure correct stylesheet ordering.

Or you can do something else entirely ??

In any case … hopefully this helps someone (and hopefully it or a similar solution gets made in the theme, so things don’t break next time I update the parent ?? ).