Search

WordPress Child Theme Not Loading style.css

Listen to this article

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.

 

Ankita Raikundalia

Ankita Raikundalia

3 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads