skip to Main Content
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: http://lawokk.com/
 Description: Divi Child Theme for LawOkk
 Author: Jasper Frumau
 Author URI: https://imwz.io
 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.

 

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.

This Post Has 7 Comments
  1. Helping a client setting up their website and got the above error. Good advice, but didn’t work for me for some reason. I have the above code in style.css, but didn’t help. I know it’s SOMETHIING in style.css, as I renamed it and put another child style,css in and it worked – well, messed up site, but error disappeared..lol.
    So now, to find the ‘tiny’ code problem.
    Any suggestions?

  2. @Bo Seems the link is to your website not your client’s so do need a link to the site or link to the CSS file as a gist at Github to be able to help out.

  3. Sorry for delay in reponding. Yes, link was to my site. Spent weekend on it and got it fixed. My problem, commented out header section in functions to play with header and forgot to uncomment after I quit playing. A little lazy on my part not to copy file before playing – I usually do. Funny how a ‘little’ mess up takes so long to fix.
    Thanks for your quick response.

    1. Glad to hear it worked out Bo. Yeah, always good to make backups before changing files. And definitely recommended to work locally before uploading remotely. Whenever I can I work with git version control and if possible a whole local, staging, production setup. Especially when I am building a site from scratch. Love working with Trellis, Bedrock and Sage in those cases. But for small site tweaks I do work locally on one file and then upload using (S)FTP. But I then of course backup that file and or the entire site . Cannot say however that I haven’t been there before. We all make these mistakes and learn making them. One is never to edit files in the Dashboard theme editor.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top