Child Theme not loading parent CSS

Question

I'm using the MyStile theme for a new site. I'm trying to create a child theme so I can modify the theme and not have my changes overwritten, however once I activate my child theme, the whole styling seems to go from the website all together.
I'm guessing the issue here lies somewhere when it's calling the parent style.css file.

Here's what I have in my child theme's style.css.

   /*
 Theme Name:   Blurred Edge Apparel
 Theme URI:    http://www.blurrededgeapparel.com
 Description:  MyStile Child Theme
 Author:       Blurred Edge Apparel
 Author URI:   http://www.blurrededgeapparel.com
 Template:     mystile
 Version:      1.0.0
*/


@import url("../mystile/style.css");

I have also copied across header.php and footer.php from the parents theme directory, however still no joy.
Am I missing something here?

Answer 1

Take a look at How to create a Child Theme and you'll see that:

the previous method to enqueue the parent stylesheet was to import the parent theme stylesheet using @import: this is no longer best practice. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme's functions.php.

Here's the example provided:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Answer 2

The mystile theme is a 3 years old theme which is not simply ready to use as parent-style because the child-style is fixed in header.php at the bad place

the quicker way to correct this, is to put theses files in the child-theme directory :

• file style.css :

.

/*
Template: mystile
*/

• file child-style.css : all the CSS rules that you want to apply
• file functions.php :

.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style'
        , get_stylesheet_directory_uri() . '/child-style.css'
        , array('parent-style') // declare the dependency
                                // in order to load child-style after parent-style
    );
}

Answer 3

https://developer.wordpress.org/themes/advanced-topics/child-themes/

The recommended way of enqueuing the stylesheets is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. If you do not have one, create a functions.php in your child theme’s directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can write the PHP code according to what your parent theme does.

If the parent theme loads both stylesheets, the child theme does not need to do anything.

If the parent theme loads its style using a function starting with get_template, such as get_template_directory() and get_template_directory_uri(), the child theme needs to load just the child styles, using the parent’s handle in the dependency parameter.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ), 
        wp_get_theme()->get('Version') // this only works if you have Version in the style header
    );
}

If the parent theme loads its style using a function starting with get_stylesheet, such as get_stylesheet_directory() and get_stylesheet_directory_uri(), the child theme needs to load both parent and child stylesheets. Be sure to use the same handle name as the parent does for the parent styles.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

See the quoted text I put in bold above. Now check how your parent theme is loading its style, and follow the instructions and example accordingly. Mine was the latter, thus I coded mine as such:

add_action( 'wp_enqueue_scripts', 'twentytwentychild_enqueue_styles' );
function twentytwentychild_enqueue_styles() {
    $parentHandle = "twentytwenty-style";
    $childHandle = "twentytwentychild-style";
    $theme = wp_get_theme();

    wp_enqueue_style($parentHandle, get_template_directory_uri() . '/style.css',
        array(), // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version') // this only works if you have Version in the style header
    );

    wp_enqueue_style($childHandle, get_stylesheet_uri(),
        array($parentHandle),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}