[Solved] CSS Styling in WordPress Child theme’s “style.css” file not working
I’m using a Themeforest Premium theme and installed and activated a child theme in order to make various CSS style changes to my website.
However, the changes I’ve made to the child theme stylesheet are not working on the website, it’s taking styles from parent theme style.css file. functions.php file has the folowing code,
<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
The functions.php code seems fine to me because I saw this exact same code in many other premium themes child theme I have worked on before and they are working fine. But in this case, I have this issue.
I believe every theme has a different code standard, so how the theme developer code the parent theme may cause this type of issue.
Here is a couple of solutions here. I guess not every solution work for everyone. Depending on your parent theme it’ll be different.
Important Note
Please do not add all the solutions code at a time. It might break your website. Try one by one and let’s see which one works for you.
Solution 1:
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent_theme_style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child_theme_style', get_stylesheet_uri() );
}
add_action("wp_enqueue_scripts". "my_theme_enqueue_styles");
Solution 2
function my_theme_enqueue_styles(){
wp_enqueue_style("parent-style", get_parent_theme_file_uri("/style.css"));
}
add_action("wp_enqueue_scripts". "my_theme_enqueue_styles");
Solution 3
Take a look at your <head> tag. More importantly look at the order of your stylesheets.
The styles from your child theme are being added first and then all the styles from your parent theme. This will cause the styles from the parent theme to override your child theme styles.
You can change the priority of your my_theme_enqueue_styles function to run after the parent by using the third parameter of add_action. This will enqueue your child theme styles last and allow the CSS to work as expected.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
