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: http://lawokk.com/
 Description: Divi Child Theme for LawOkk
 Author: Jasper Frumau
 Author URI: https://wpvilla.in
 Template: Divi
 Version: 1.0.1
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 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:

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

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.