Child Theme Trouble: This theme is broken

Sometimes you bump into errors while working with child themes. I bumped into a “This theme is broken” error the other day. I wanted to modify an existing child theme. When checking the child theme from the Dashboard I saw this warning in the header:

This theme is broken. Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.

This was the first time in all these years I saw this error myself. Normally I create child themes well and then you won’t see warnings like these.

Missing Stylesheet Header

This “This theme is broken” error showed up because the stylesheet of the child theme was missing the necessary header. All child themes need one for proper display. Once I added:

 Theme Name: Divi Child Theme
 Theme URI:
 Description: Divi Child Theme for LawOkk
 Author: Jasper Frumau
 Author URI:
 Template: Divi
 Version: 1.0.1
 License: GNU General Public License v2 or later
 License URI:
 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain: divi-child

all was wel again. No errors were mentioned. More details on the header and how to work with it can be found in the WordPress Codex. But basically you can you use my example or the example in the codex. It is just basically a way of indicating:

  • we are dealing with a child theme,
  • what the parent theme is and
  • some details on the design and author behind it
  • text domain being used

Index Missing

I did however not add the index.php yet. That was also mentioned in the error message. This is also needed when using standalone themes. And this is a child theme so one is not needed really. Files you do need are:

  • style.css
  • functions.php

Those contain information to show we are dealing with a child theme and the proper way of loading or enqueuing the child theme CSS.

Bonus I: Enqueuing Styles Properly

Functions.php should normally contains something like this to enqueue styles properly:

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 ),
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

This way you will load the parent theme CSS as well as the child theme’s CSS well.  For a more detailed discussion on why it should be set up this way see this SO thread here. But this quote should tell you why you should use it instead of @import:

The statement @import url('../twentythirteen/style.css'); is completely independent of the underlying parent theme’s version. In fact, the parent theme can be updated without updating the child theme but browsers will still use cached versions of the old ../twentythirteen/style.css.

Bonus II: Extra Functionality

On top of that you can add extra functionality when need be of course. The functions.php in the child theme ads functionality to the parent. It does not override like the style.css in the child theme.


Tagged in : Tagged in :
Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.