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 aindex.phptemplate file. Child themes need to have a Template header in thestyle.cssstylesheet.
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.
I was in the middle of building this new site when the CSS went dead – I blamed WP newest update but this page should be bookmarked as it was a life saver.
Thanks!
Joshua
Glad to hear that this post helped you out Joshua!
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?
If it is the link behind your name now I will check it tomorrow. If not let me know.
@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.
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.
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.