Activating Child Theme Breaks Website, Blank Page, Error 500

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.