Activating Child Theme Breaks Website, Blank Page, Error 500

Question

UPDATE: Solved! (02/06/17)

Thanks to everyone who helped give insight into this issue!

What Caused the Problem?

The root of the problem turned out to be that I copied the whole parent theme folder contents into the child theme. While this is good practice in general web development when creating a new website from an older one (start by duplicating the older site then editing folder contents as necessary), WordPress child themes work a little differently.

What Fixed It?

Child themes should start with the bare minimum: an appropriately-named child theme folder containing a style.css file and a functions.php file. The functions.php in the child should reference the functions.php in parent as per Nathan's instructions.

ORIGINAL:

---

THE ISSUE

My question is WordPress-specific. I installed WP for a client at http://hepkatorganics.com. I'm new to child themes, but the instructions on the Codex and this tutorial (Understanding WordPress Child Themes in 2016), seemed pretty easy to follow. But somehow editing the comments section of the style.css file seems to have broken my website. That doesn't make sense from a pure CSS standpoint to my knowledge because comments are ignored by CSS. I get error 500 in Chrome, and in Firefox I just get a blank page with no view source content whatsoever.

A little more info to understand where I am coming from: I just completed 3 quarters towards an associate in web development and I got straight-A's (4.0) in HTML5/CSS3 and Advanced CSS & Preprocessors classes. I also go an A in Intro to WordPress programming.

Like I said, I'm new to child themes, and maybe this one of those "gotchas" that experienced WP developers already know about.

MY PROCESS

I followed the steps (with slight customization) as follows:

1. Installed and activated free WP theme EightStore Lite.
2. Copied the entire parent theme folder locally from wp-content/themes/eightstore-lite and renamed the exact copy of the parent eightstore-lite-ehw-1.

3. Edited style.css --> just the comment header. Here is the original code I copy & pasted from the Codex:

   /* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 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: twenty-fifteen-child */

4. Uploaded the entire child theme folder to the wp-themes folder on the server and launched the website. WORKED. Previewed the child theme. WORKED.

5. Edited the comment header as follows:

   /* Theme Name: EightStore Lite - EHW - 1 Theme URI: https://wordpress.org/themes/eightstore-lite/ Description: EightStore Lite Child Theme Author: Eric Hepperle Author URI: http://erichepperle.com Template: eightstore-lite Version: 1.0.0 Date Created: 02/03/2017 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: eightstore-lite-ehw-1 */

   Notice I changed all fields except Version, License, License URI, and Tags.

6. Re-uploaded the entire child theme folder to the wp-themes folder on the server and launched the website. WORKED. Previewed the child theme. WORKED.

7. Added this line, per the video tutorial:

   @import url("../eightstore-lite/style.css");

8. Re-uploaded the child theme. The theme showed up in the theme chooser uder "Appearance". It was either when I clicked to preview the theme or to activate it that everything went haywire. Received page won't load error:

   HTTP ERROR 500

1. The final version of the style.css file is:

   /* Theme Name: EightStore Lite - EHW - 1 Theme URI: https://wordpress.org/themes/eightstore-lite/ Description: EightStore Lite Child Theme Author: Eric Hepperle Author URI: http://erichepperle.com Template: eightstore-lite Version: 1.0.0 Date Created: 02/03/2017 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: eightstore-lite-ehw-1 */

   /* OLD WAY --> Not Recommended!:

   @import url("../eightstore-lite/style.css"); */

   Notice this file only has CSS comments.

MY QUESTIONS

1. How can a file that is only css comments break a WordPress website?

2. What is the issue with my configuration? I mean, I haven't even started editing the actual css yet!

3. What is the key thing I should know going forward to prevent this WordPress website breaking scenario?

Any help is appreciated.

Answer 1

Congrats on starting your first WordPress child theme. I'd recommend scraping what you have (because we don't know exactly what's wrong) and starting with the simplest child theme you can. Then add stuff until something breaks or you finish the child theme.

To get started on a very basic child theme, create a new sub-directory in the themes/ directory. Add a CSS file that contains only the following:

/*
 * Theme Name:   My ChildTheme
 * Template:     eightstore-lite
 * Version:      1.0.0
 */

Make sure that the eightstore-lite theme is currently installed. Activate the child theme. Congrats on your first child theme! Now let's use the CSS from our parent theme.

@import url("../eightstore-lite/style.css");

This is not the correct way to use a parent theme's CSS. The proper way to enqueue a parent theme's CSS is to use the theme's functions.php file ( or another file called by functions.php ). So let's create a file called functions.php in the same directory as your CSS file with the following content:

<?php
add_action( 'wp_enqueue_scripts', function() {
    //* Parent CSS
    wp_enqueue_style( 'eightstore-lite', 
      get_template_directory_uri() . '/style.css' );

    //* Child CSS
    wp_enqueue_style( 'eightstore-lite-child', 
      get_stylesheet_directory_uri() . '/style.css', [ 'eightstore-lite' ] );
} );

Now your child theme will use the parent themes CSS. If you now look at the public side of your site, it will look exactly the same as if you had enabled the parent theme.

Add some CSS to your style.css to see what that does. You now have a child theme that uses the parent theme functionality with custom CSS styling.

Answer 2

1. Your style.css file is probably not breaking the site. As you suspect, CSS alone can't break a site, but if there are any problems with your theme as a whole, activating the theme may cause problems.

2. It sounds like you copied the entire parent theme into a child theme. Is that correct? If so, what you really need to do is start the child theme from scratch. Create a brand-new style.css file, where you can paste in the parent theme info and update it to your own info before uploading it. Then, create a brand-new functions.php file, where you can enqueue this stylesheet. Once those files are both ready, you should be able to activate the theme and see no errors.

3. Kudos for venturing into new territory. It's likely that you will break your site when you are first experimenting with child themes. Keep backups, and work on staging or development sites rather than Production sites. That way if you break something, you aren't affecting a live site.

You will also benefit greatly by reviewing your site's PHP error log. You can also turn on WP_DEBUG to see WP-specific errors. Those two tools should help you figure out what specifically was wrong with your initial attempt. If you did indeed copy the whole parent theme into a child theme, it's almost a guarantee that functions of the same name are defined in both themes, which causes a fatal error.

Answer 3

Looks like PHP errors are switched off and you have a fatal PHP error.

If they are being logged, you should check the logs as that would be your best bet to find out what's wrong. There you will find the error and what line the error belongs to.