Child theme does not overwrite parent themes style.css

by

It should be noted that the child stylesheet loads after the parent theme’s styles, so this should not be a problem. I think what is happening here is that you are trying to change styles that is not in the the parent stylesheet, but in other custom stylesheets. If that is the case, then your changes won’t work as most probably your child theme’s stylesheet is loading before the custom stylesheets in the parent theme.

It should also be noted that @import should not be used to import the parent stylesheet. The correct way is to enqueue it using wp_enqueue_style() hooked to wp_enqueue_scripts

Here is how you properly enqueue and add the parent stylesheet to the childtheme.

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

From the codex, this is the correct way how your stylesheet should look like

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/


/* =Theme customization starts here
-------------------------------------------------------------- */

NOTE

I have updated the codex with this information in this post

EDIT

From a comment below

If the parent theme does not use wp_enqueue_style() then how can one enque parent theme’s style.css WITHOUT messing with the parent theme’s templates? This point is not clear int Codex you updated. Can you please clarify with an example.

I want to first start of with this, if you are a theme author, please, NEVER add stylesheets or scripts through <link> tags in your theme’s header. This is the incorrect way of doing it. Properly enqueue and register these styles and scripts through the wp_enqueue_scripts hook as described in the Codex

To be honest, I never realized that there are still some theme authors doing this. I think the best probable way to solve this problem is to copy the parent header.php to your child theme and manually removing (deleting) the styles and scripts from the header.

You can then proceed to enqueue and register them as per normal using wp_enqueue_scripts as in the example above. Just remember, make use of get_templatedirectory_uri()` to enqueueu and register scripts and styles from the parent theme, and remember, the order in which you load styles and scripts are important here. If a script/style is dependent on another one, load it after that specific script/style

Leave a Comment