Fixing a missing parent stylesheet in a WordPress child theme

A child WordPress theme inherits the look and feel of the parent theme including all of its functionality. WordPress professionals use a child theme to make modifications to any part of the theme. There are cases when a child theme is not loading a parent stylesheet. Let’s learn how to fix a missing parent stylesheet in your WordPress child theme.

One of our customers has recently contacted us asking for a help solving an issue in a child theme. The child theme worked without any critical PHP issues but it did not load the main theme styles. We knew that broken styles in the customer’s site could have a negative effect on the site appearance, so we started to work on a solution on the same day when a child theme files had been received.

Problem

Below you can see the issue in action. In this example, you can find a WordPress site with an active child theme which has broken styles. It does not look well, right?

First thing you need to do in this case, check the functions.php file in your child theme. That’s what we did. By opening the file, we started to look for the wp_enqueue_scripts action. This action is responsible for loading styles. As a result, we found this:

if ( ! function_exists( 'themeslug_child_enqueue_scripts' ) ) :
    /**
     *  Enqueue scripts and styles needed for a child theme.
     */
    function themeslug_child_enqueue_scripts() {
        wp_enqueue_style( 'themeslug-parent-styles', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'font-awesome' ), '1.0.0' );
    }
endif;
add_action( 'wp_enqueue_scripts', 'themeslug_child_enqueue_scripts' );

The code snippet is modified for demonstration purposes but the source of the problem remains unchanged. If you check the code, you’ll find font-awesome dependency added to the parent theme stylesheet. It means that this stylesheet will be only loaded if all assets which the stylesheet depends on are loaded.

By the way, if you are using one of our professional WordPress themes then there is no need to load a parent theme stylesheet. It will done automatically for you through the functionality of the parent theme. Moreover, each of our premiums themes come with a blank child theme. More information can be found on the theme product page.

Solution

We have check the parent theme files to find out if the theme load styles used in a child theme as dependency. Basically, you need to check all wp_enqueue_scripts actions in your parent theme to find defined styles and scripts in your theme. After inspection of the parent theme, we found that the theme does not load any font-awesome styles.

So, we now can see that a child theme wants to load a stylesheet which depends on another stylesheet, and moreover, that stylesheet does not exist. WordPress cannot load styles when its dependencies are missing. Below you can find an updated version of the code snippet without any dependencies.

if ( ! function_exists( 'themeslug_child_enqueue_scripts' ) ) :
    /**
     *  Enqueue scripts and styles needed for a child theme.
     */
    function themeslug_child_enqueue_scripts() {
        wp_enqueue_style( 'themeslug-parent-styles', trailingslashit( get_template_directory_uri() ) . 'style.css', array(), '1.0.0' );
    }
endif;
add_action( 'wp_enqueue_scripts', 'themeslug_child_enqueue_scripts' );

Once this dependency was removed, the site started to work properly. Webpage was not broken anymore. We could see a clean and beautiful design in a child theme.

If you had the same problem in your WordPress site and you were able to solve it using a different solution, please let us know in the comments. We would like hear your story on how you fixed a missing parent stylesheet in a WordPress child theme.