The WordPress Codex for setting up child themes changed recently and when I first saw it, I thought “Duh, of course!” Now, that I am working on implementing it, it is getting more complicated, especially when working with the Canvas theme.

To back up a bit, the Codex had said to create a style.css file for your child theme (prevents updates from overwriting your customizations) and then to use @import to load in the parent theme’s css. Website development 101 says not to use @import since it is slower and to use link to instead, so this is a smart change.

The Codex now says that instead of  adding @import in the style.css file, you now need to add a second file to your child theme called functions.php. This is dangerous territory for a WordPress newbie because an error here will surely bring down your site. If you somehow messed up the @import, things wouldn’t look right, but your site would still function. This should be interesting…

The new code creates the <link> code in the head of the html file for both the child and parent css files and it makes sure the child css is loaded after the parent css.

In functions.php they say to place the following code:

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' ) );
}

Don’t forget the opening php tag! Yes, you need to start the file with

<?php

and you do not need to close that “>” for reasons I won’t go into here.

And if you get this right, your site will look just fine.

But if you’re picky like me, read on…

Take a look at the source code and see if any style sheets are being linked twice. This all depends on how and if your parent theme use wp_enqueue_style to load its css.

For some of our sites, we are using WooThemes’ Canvas and this theme does load the parent stylesheet, so if I follow the Codex, it will be linked twice. And it will look just fine, but it bothers me. And it could affect site speed, although probably not a lot, but I’ll take what I can get.

I checked the documentation at WooThemes about child themes and they still use @import.

What you need to do is make a slight change to the Codex code to use the id used in the link, “theme-stylesheet”,  instead of using “parent-style” in two places.

Here’s my solution for Canvas child themes:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'theme-stylesheet', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'theme-stylesheet' ) );
}

I also followed this method in a custom theme I developed when I replaced “parent-style” with the name used in the parent theme. You can easily find this by looking at the source code for the stylesheet id. This is what it looks like in a Canvas theme. Leave off the “-css” part.

<link rel='stylesheet' id='theme-stylesheet-css' >href=...

For other sites, we use Pinboard & twentyeleven and they don’t load the parent theme, so the Codex solution will work just fine.

And to perhaps confuse things even more, Canvas has a custom.css file within the Canvas theme folder. If your css is there, then nevermind ALL of this. You don’t have to create a functions.php file at all. Or even a child theme.

After writing this, I found this article by a well-known WordPress developer and he doesn’t have a sure solution, so we will see where all this goes.