WordPress + Child Theme = Am I missing something?

Question

I have an issue that has me scratching my head and if I scratch anymore I'm gonna go bald. I have looked all over for a solution but have not found anything so I thought I'd stop by and see if maybe any of you experts out there can assist.

I created a theme called WP-Forge and then I created a child theme to be used with WP-Forge called WP-Starter http://wpstarter.themeawesome.com/

When I created WP-Starter, the method of @import was still being used and now I see that there is a new way of pulling in the parent css: http://codex.wordpress.org/Child_Themes

However, when I updated WP-Starter to use this new way of pulling in the parent css, it seems that I get two versions of WP-Starter's style sheet. If you look at the source of WP-Starter demo site listed above - you will see that wpforge-css is exactly the same as child-style-css.

In my parent theme I have all of scripts and styles enqueued in the following manner:

function wpforge_scripts() {

    // Enqueue our stylesheets
    wp_enqueue_style('opensans-style', 'http://fonts.googleapis.com/css?family=Open+Sans:300,600');
    wp_enqueue_style('font-style', get_template_directory_uri() . '/fonts/wpforge-fonts.css');
    wp_enqueue_style('normalize-style', get_template_directory_uri() . '/css/normalize.css');
    wp_enqueue_style('foundation-style', get_template_directory_uri() . '/css/foundation.css');
    wp_enqueue_style('wpforge-style', get_stylesheet_uri());    

    // Register our scripts
    wp_enqueue_script ('modernizr', get_template_directory_uri() . '/js/vendor/modernizr.js', array('jquery'), '5.5.0.3', false);
    wp_enqueue_script ('foundation-js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '5.5.0.3', true);
    wp_enqueue_script ('functions-js', get_template_directory_uri() . '/js/wpforge-functions.js', array('jquery'), '5.5.0.3', true);

    // Make the "Back" string in Foudation mobile menu translatable
    $translation_array = array( 'nav_back' => __( 'Back', 'wpforge' ) );
    wp_localize_script( 'foundation-js', 'foundation_strings', $translation_array );

}
add_action( 'wp_enqueue_scripts', 'wpforge_scripts' );

and in my child theme WP-Starter all I have is this:

function wpstarter_styles() {

    wp_enqueue_style( 'parent-theme', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'wpstarter_styles', 100 );

Now when you look at the page source of the demo site you will see this:

<title>WP-Starter | A WordPress Child Theme for WP-Forge</title>
<link rel='stylesheet' id='wpforge-fonts-css'  href='http://wpstarter.themeawesome.com/wp-content/themes/wp-forge/fonts/wpforge-fonts.css' type='text/css' media='all' />
<link rel='stylesheet' id='normalize-css'  href='http://wpstarter.themeawesome.com/wp-content/themes/wp-forge/css/normalize.css' type='text/css' media='all' />
<link rel='stylesheet' id='foundation-css'  href='http://wpstarter.themeawesome.com/wp-content/themes/wp-forge/css/foundation.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpforge-css'  href='http://wpstarter.themeawesome.com/wp-content/themes/wpstarter/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-css'  href='http://wpstarter.themeawesome.com/wp-content/themes/wp-forge/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://wpstarter.themeawesome.com/wp-content/themes/wpstarter/style.css' type='text/css' media='all' /> 

If you click on wpforge-css it is the same as child-style-css.

Just wondering if anyone has ever run into this particular issue or if anyone can help by explaining why this may be happening so I can correct it?

Your help is greatly appreciated and thank you in advance.

Answer 1

Actually @Pieter Goosen took care of the issue when he corrected the Codex and removed the call to the extra style sheet. So in fact this works the way it should

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Thanks Pieter.

Answer 2

Did you try adding the next line of code as it says in the codex?

Codex:

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_uri(), array( 'parent-style' ) );//Add this to wpstarter_styles();
}

Answer 3

It's been a while since I've worked with child themes but I presume the problem here is that you're registering your parent css using get_stylesheet_uri as opposed to get_template_directory_uri

Try using this instead, notice how I have changed the get_stylesheet_uri with get_template_directory_uri

function wpforge_scripts() {

    // Enqueue our stylesheets
    wp_enqueue_style('opensans-style', 'http://fonts.googleapis.com/css?family=Open+Sans:300,600');
    wp_enqueue_style('font-style', get_template_directory_uri() . '/fonts/wpforge-fonts.css');
    wp_enqueue_style('normalize-style', get_template_directory_uri() . '/css/normalize.css');
    wp_enqueue_style('foundation-style', get_template_directory_uri() . '/css/foundation.css');
    wp_enqueue_style('wpforge-style', get_template_directory_uri() . '/style.css');    

    // Register our scripts
    wp_enqueue_script ('modernizr', get_template_directory_uri() . '/js/vendor/modernizr.js', array('jquery'), '5.5.0.3', false);
    wp_enqueue_script ('foundation-js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '5.5.0.3', true);
    wp_enqueue_script ('functions-js', get_template_directory_uri() . '/js/wpforge-functions.js', array('jquery'), '5.5.0.3', true);

    // Make the "Back" string in Foudation mobile menu translatable
    $translation_array = array( 'nav_back' => __( 'Back', 'wpforge' ) );
    wp_localize_script( 'foundation-js', 'foundation_strings', $translation_array );

}
add_action( 'wp_enqueue_scripts', 'wpforge_scripts' );

Now the parent stylesheet is loaded properly we can call the child theme's stylesheet using get_stylesheet_uri and pass it a dependency of the parent theme stylesheet referenced by the handle it was registered with of wpforge-style

function wpstarter_styles() {

    wp_enqueue_style( 'wp-starter', get_stylesheet_uri(), array( 'wpforge-style' ) );
}
add_action( 'wp_enqueue_scripts', 'wpstarter_styles', 100 );

This is because get_stylesheet_uri gets the current active themes stylesheet URI. Therefore when the child theme is loaded first it performs the function wpforge_scripts from its parent theme - which in your code specified get_stylesheet_uri thus was actually getting the URI of the child theme as that is active, not the parent theme. Swapping this for get_template_directory_uri will get the correct template directory for the parent theme.

All this is in theory I haven't had a chance to check it for you (fingers crossed)