WordPress Child Theme Not Loading style.css

The WordPress architecture defines certain rules on how to change basic functionality. While working on a theme customization project for a client, we needed to change the styling provided by the theme. That seemed easy. We created a child theme with a style.css, defining required style classes.

[pre]/*
Theme Name: child-theme-name
Template: parent-theme-name
*/[/pre]

But in this case, the child theme styling was not getting applied. We checked the code, made a few changes and tested again. But nothing worked. Upon investigating further, we noticed that the child theme stylesheet was not getting picked up. Hmmm… Let’s take a look at any possible mistakes during child theme creation.

[space]

The Child Theme Creation Checklist

• Verify that the theme folder is created in /wp-content/themes folder
• The stylesheet is named style.css
• Ensure that child theme stylesheet has the parent theme name as the template

Well, all this was fine. Then what was the problem. The problem, we found, was in the parent theme.
[space]

Why are some themes stubborn or are the developers just ignorant?

The cause of the problem was evident in the functions.php file of the parent theme. There was an action which specified the stylesheet path as the parent theme’s stylesheet, implying that our child theme stylesheet was never going to get picked up.

add_action( 'wp_head', 'font_css_file',3);

function font_css_file(){
    $theme_path = get_template_directory_uri();
    //…some other theme functions
    // ah! the problem
    echo "<link rel=\"stylesheet\" href=\"".$theme_path."/style.css\">\n"
}

$theme_path is defined to get the template directory URI which will return the the parent theme directory (since template is the directory of parent theme).

Then, the same directory path is used to link the stylesheet, which means it will link parent theme’s style.css.

[space]

Resolve this issue without losing the purpose of creating a child theme

If we had to change this code, in the functions.php of the parent theme, the purpose of creating a child theme would be lost. So, the ideal solution was to create a functions.php file in the child theme, to explicitly link the child theme stylesheet using the following code:

// register and enqueue the stylesheet.
add_action( 'wp_enqueue_scripts', 'register_child_theme_styles' );

function register_child_theme_styles() {
    wp_register_style( 'style', get_stylesheet_uri() );
    wp_enqueue_style( 'style' );
}

With this simple change, the styling provided by the child theme was applied to the site. But this is not the expected behavior from the parent theme, as this goes against the design principles. As developers, we must ensure that we do not make such mistakes in theme development.