Versioning @import of parent theme’s style.css

You don’t have to use @import. It’s best not to, actually. Using an enqueued approach is probably better all around.

Here’s the relevant part of twentythirteen’s code:

function twentythirteen_scripts_styles() {
...
    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
...
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

Here’s what you do in your code:

function child_scripts_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

If your main.css has to come after the parent’s style.css, then you just make it dependent on that.

Now, if you also have a B.css in the child, then you set up the dependencies accordingly:

function child_scripts_styles() {
    wp_enqueue_style( 'child-B-style', get_stylesheet_directory_uri().'/B.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('child-B-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Make the dependencies that you define for each item actually reflective of what those dependencies really are. If main.css must come after B.css, then it depends on it. If B.css must come after the parent’s style.css, then B depends on that. The enqueue system will sort it out for you.

And if you’re not actually using the child’s style.css for anything, then you don’t have to enqueue it at all. It can be just a placeholder to hold your theme’s header information. Not using it? Don’t load it.

Also, what exactly are you doing that is so dependent on ordering here? CSS doesn’t care about load order in most situations. CSS is more dependent on specificity of the selectors. If you want to override something, you make your selector for it more specific. It can come first, or last, or anything in between, the more specific selector always wins.

Edit

Reading your comments and looking closer at the code, I see where the mistake is here. The twenty-thirteen code is enqueueing the “get_stylesheet_uri()”, which in a child theme case, would be your child theme’s style.css file, not the parent’s file. That’s why the @import works, and keeps the same ordering (which again, does not matter nearly as much as you think it does).

In that case, if you don’t want to use import, I would recommend enqueueing the parent’s style.css directly. Like so:

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

Code in the child theme’s functions.php runs first, so your own wp_enqueue_scripts will run first, and this will enqueue the parent theme’s style.css, which the parent theme is not doing itself (because it’s actually enqueueing your child’s style.css). By not making it depend on anything, same as the parent, then it simply gets put in the output correctly. Note that the order of this file and the genericons.css does not matter, because the original “twentythirteen-style” does not have the genericons.css as a listed dependency.

Your own child’s style.css will load, and honestly, this is where you should put your changes for the child theme, not into a separate main.css. There’s nothing preventing you from putting your changes there, but there’s no real reason to have an extra css file.

Leave a Comment