You might find that your site still loads styles from the parent theme’s style.css file instead of your child theme’s stylesheet. Let’s take a closer look at why that happens and how to fix it.
The Situation
You’re using a ThemeForest Premium theme and have activated a child theme to make custom CSS modifications. However, despite adding your changes to the child theme’s style.css file, the styles don’t appear on your live website.
Your functions.php file includes the following 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' );
}
?>
At first glance, this code looks perfectly fine — it’s the same snippet used in many child themes that work as expected. But in this case, the styles from the child theme aren’t overriding those from the parent theme.
The reason? Not all WordPress themes load styles in the same way. The way your theme developer enqueued the parent stylesheet can affect how child theme styles are loaded.
Important Note
⚠️ Don’t try all the solutions below at once — apply them one at a time.
Different parent themes are structured differently, so the correct solution will vary from one theme to another.
✅ Solution 1: Enqueue Both Parent and Child Styles
You can manually load both the parent and child theme stylesheets by editing your functions.php file as follows:
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' );
Why it works:
This method ensures both stylesheets are loaded — first the parent, then the child — allowing your child theme styles to take priority.
✅ Solution 2: Use get_parent_theme_file_uri()
Some themes load files differently, so using get_parent_theme_file_uri() can fix path issues:
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' );
Why it works:
This function directly references the parent theme’s file structure, ensuring WordPress locates and loads the correct stylesheet.
✅ Solution 3: Adjust the Loading Order (Priority)
Sometimes, the problem isn’t the code itself but the order in which stylesheets load. If your child theme’s styles are loaded before the parent theme’s, they’ll be overridden.
Inspect your website’s <head> section and check the order of the stylesheets. If the parent theme’s stylesheet is loading after the child’s, change the function’s priority using the third parameter of add_action():
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
Why it works:
By increasing the priority to 11, WordPress loads the child stylesheet after the parent’s, allowing your custom CSS to override default styles.
Common Cause Recap
The issue typically occurs when:
- The parent stylesheet loads last, overriding your child theme’s CSS.
- The parent theme uses a different enqueue method or filename for styles.
- The child theme’s functions.php doesn’t properly reference both stylesheets.
Final Thoughts
Getting your child theme CSS to work properly often comes down to how and when styles are enqueued. Try each of the solutions above one by one until your custom CSS overrides the parent styles as expected.
Once fixed, you can safely modify and customize your WordPress design without touching the parent theme files — keeping your changes secure during updates.
Post Tags:
#ChildTheme #functions.php #WordPressSolutions #ThemeCustomization #CSSFix