Child theme css not overriding parent
Solution 1
This problem is most likely caused be CSS selector specificity. Essentially, the parent css rule is more narrowly tailored to hit that element than the rule you're assigning. You can get your css to take over by using rules that are more specific than the parent css, or use the same rules, in which case yours will take priority, as it is loaded later.
Solution 2
Try updating your function to
<?php
function my_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') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
Afterwards please provide a screenshot of what is actually being loaded in your console.
Not sure why you created a variable of the parent-style, but you can keep using that of course.
Hope this helps
Sergi
Updated on July 22, 2022Comments
-
Sergi almost 2 years
I've created a child theme of the twentyseventeen theme. In the child's theme folder I have a "style.css" and a "functions.php" file. Inside of the style.css file I have:
/* Theme Name: Personal_theme Theme URI: http://wordpress:8888/ Description: This is a child theme of twentyseventeen Author: My name Author URI: ... Template: twentyseventeen Version: 0.1; */ .entry-title { color: blue; }
and inside of functions.php:
<?php function my_theme_enqueue_styles() { $parent_style = 'parent-style'; 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 ), wp_get_theme()->get("Version") ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?>
If I add "!important!" to the style, it works, it turns blue. If I use the inspector tool, I can see that the child stylesheet is being loaded after the parent, but the style is overwritten by the parent. I'm new to Wordpresss, is any of the parameter's in the functions.php wrong? Something I have to change?
-
nibnut about 7 yearsI agree about the specificity issue: I find the easiest way to debug these issues in in the inspector, in your browser. Inspect the element that you are trying to affect, and find the CSS rule that sets it's color. That will tell you the full CSS rule used by your parent theme. Use that same rule, and yours should now "win"!
-
Andrew about 7 yearsIndeed. The inspector will also, in most browsers, show the existing rules in order, so you can see which ones take precedence over others. They'll even cross out rules that are being overwritten. Very handy.
-
Sergi about 7 yearsI've copied the code that they recommend in the Wordpress Codex.
-
user2026178 about 6 yearsI believe importing is part of the old practice with wordpress. The correct practice is to enqueue through functions.php