WordPress Child Theme Doesn’t Look Like Parent Theme? Here’s The Fix

You have just created a WordPress child theme. You followed closely the guide found on WordPress Codex as well as on WordPress developer theme handbook. But there seems to be a problem. Once you activated your child theme, it doesn’t look like its parent theme. Shouldn’t a child theme inherit everything from its parent theme? If so, why doesn’t your child theme look exactly like the parent theme? Here’s what to look for in order to fix this.

There are two things you should check first:

1. Have you copied custom css, widgets, theme options and configurations (including what you customized using WordPress customizer) from the parent theme over to the child theme?
2. Have you successfully enqueued all the parent theme’s stylesheets and set their dependencies (such as font awesome, bootstrap, etc) accordingly?

Okay, let’s go through all the above one by one.

#1: Copy Parent Theme’s Options Over To Child Theme

Most WordPress themes these days have their own theme options page where users can customize the theme’s styles, fonts, and a lot more. Most also include custom css and custom js section where users who know css (and/or javascript) could change the site’s style and action via css and/or javascript.

The first thing you need to remember when creating a child theme is, a child theme will NOT inherit theme options, widgets, and custom css of its parent theme.

And you have to remember, for your child theme to look like the parent theme, you would have to copy ALL these theme options (including the custom css and js codes) from the parent theme to its child theme. Those widgets you configured for the parent theme? You have to reconfigure that once you activate the child theme. But lucky for you, themes with gazillions of options out there usually have an Import/Export feature so that you could export all your options and configurations into a file and import it back into your child theme with just a few clicks.

But what if your theme doesn’t have this Import/Export feature?

Well, the main reason you create a child theme is to add your own styling and customization to an existing theme. A child theme is to make sure the customization won’t be wiped out once the theme is updated. But understandably, not everyone wants to get their hands dirty by creating files and editing codes. That’s why a lot of themes these days have a more user-friendly theme options where users could change the look and feel of the theme just by clicking buttons without having to touch the theme files at all. And if you are already doing this, then you probably don’t need a child theme anyway. Amirite?

#2: Enqueue Parent Theme’s Stylesheet and Set Its Dependencies On a Child Theme

If your parent theme is a fresh install and you haven’t configured any options but your child theme does not look like the parent theme, the first thing you should check is the way you enqueue the parent theme’s stylesheet (style.css file). Are you enqueuing the parent theme’s stylesheet correctly?

From WordPress Codex, this is how you do it:

function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    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' );

But copying the code above into your child theme’s functions.php (and replacing ‘parent-style’ accordingly) is sometimes not enough. You have to look for its dependencies and make sure to set it as so.

Let’s use Shaped Blog theme found on WordPress.org theme directory as an example.

The Shaped Blog theme defines its main stylesheet as ‘shaped-blog-stylesheet’ in functions.php. Other than that, it also defines three other css files. All these are done in functions.php. Below is the code:

wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css', array(), '3.3.5');
wp_enqueue_style('font-awesome-css', get_template_directory_uri() . '/assets/css/font-awesome.min.css', array(), '4.4.0');
wp_enqueue_style('shaped-blog-stylesheet', get_stylesheet_uri() );
wp_enqueue_style('responsive-css', get_template_directory_uri() . '/assets/css/responsive.css', array(), NULL);

Naturally, looking at the code above, bootstrap css will load first, followed by font awesome css, followed by style.css, and then responsive css. That works well for the theme. But what if we want to create a CHILD theme for this Shaped Blog theme?

Without setting up any dependencies, parent theme’s style.css file will load FIRST, and then child theme’s style.css file, followed by the other three (bootstrap-css, font-awesome-css, responsive-css). This will cause your child theme to look a tad different from its parent theme, i.e. you will notice the fonts are different, among others.

In order to fix this, in the child theme’s functions.php file, you will have to set the parent theme’s stylesheet dependencies. This is to make sure the parent and child theme’s style.css files load AFTER the css files they depend on, like so:

function ttb_shapedblog_child_enqueue_styles() {

    $parent_style = 'shaped-blog-stylesheet';
    
    $deps = array('bootstrap-css', 'font-awesome-css'); //dependencies

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css', $deps );
    
    wp_enqueue_style( 'shaped-blog-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'ttb_shapedblog_child_enqueue_styles' );

Notice in Line 5 in the above codes, dependencies are declared as an array and then set in Line 7. This way, bootstrap css file will load first, and then font awesome css file, followed by the parent theme’s style.css file and then the child theme’s style.css file. Having bootstrap and font awesome to load first, child theme now will look just like its parent theme.

Still Need Help?

If you still need help with creating child theme, you can contact me for a quote.