Child theme not loading style.css

thetoolman123
(@thetoolman123)

5 years, 2 months ago

Hi there,

I am trying to create a child theme of Twenty Twenty One.

I have named my child theme folder twentytwentyone-child

I have created the style.css in this directory with the following in:

/*
Theme Name: Twenty Twenty One Child
Theme URI: https://diviextended.com/
Description: A child theme of Twenty Twenty One WordPress theme.
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/`

@import url(“../twentytwentyone/style.css”);`

The theme is showing in the themes settings and I have activated it, however looking at the source, it is still loading the parent style and not the child styles.

What have I done wrong here?

Thanks

Viewing 8 replies - 1 through 8 (of 8 total)

vincent7892
(@vincent7892)

5 years, 2 months ago
Hi,

I think you might have missed the step where you enqueue your style.css in your child’s function.php.
```
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
    );
}
```
Step 6 here :
https://www.hostinger.com/tutorials/how-to-create-wordpress-child-theme
Thread Starter thetoolman123
(@thetoolman123)

5 years, 2 months ago

Thanks, I have tried that but still no luck.

This is what is in the source:

<link rel='stylesheet' id='twenty-twenty-one-style-css' href='http://website.com/wp-content/themes/twentytwentyone/style.css?ver=1.0.0' media='all' />
vincent7892
(@vincent7892)

5 years, 2 months ago
Ok,

I don’t understand why your theme URI is set to : https://diviextended.com/
I assume you got this here :
https://diviextended.com/download-wordpress-twenty-twenty-one-child-theme/

The parent style is still loaded as it is not supposed to “vanish”… did you try to modify any css property in your child.

(like a body{display: none!important;} that would for sure have a visible effect.
Child modifications override parent’s rules… so If you don’t write anything in child’s style.css, it won’t do anything.

Also refresh your cache.
- This reply was modified 5 years, 2 months ago by vincent7892.
- This reply was modified 5 years, 2 months ago by vincent7892.
Moderator bcworkz
(@bcworkz)

5 years, 2 months ago

FWIW, usage of @import to load external stylesheets is discouraged. Relative paths in WP can be unreliable, though it appears to be working in your situation. Absolute paths would not be portable to other servers. It’s recommended all external stylesheets be enqueued, similar to how Vincent enqueues your child style. How to do so properly depends on how the parent theme enqueued their stylesheet. More information:
https://developer.ww.wp.xz.cn/themes/advanced-topics/child-themes/#3-enqueue-stylesheet
Thread Starter thetoolman123
(@thetoolman123)

5 years, 2 months ago
Yes I have the following in the child style:
```
/*
 Theme Name:   Twenty Twenty One Child
 Theme URI:    https://diviextended.com/
 Description:  A child theme of Twenty Twentym One WordPress theme.
 Author:       Elicus Technologies
 Author URI:   https://elicus.com
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

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

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;900&display=swap');

body{
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    background: #000!important
    
}
```
I’ve tries to change the background colour but nothings happening. It’s not even showing in the source – there is no path to the child style.css
- This reply was modified 5 years, 2 months ago by bcworkz.
Thread Starter thetoolman123
(@thetoolman123)

5 years, 2 months ago
this is what I am seeing in my source code:
```
<link rel='stylesheet' id='wp-block-library-css'  href='http://website.com/wp-includes/css/dist/block-library/style.min.css?ver=5.6.2' media='all' />
<link rel='stylesheet' id='wp-block-library-theme-css'  href='http://v/wp-includes/css/dist/block-library/theme.min.css?ver=5.6.2' media='all' />
<link rel='stylesheet' id='parent-style-css'  href='http://website.com/wp-content/themes/twentytwentyone/style.css?ver=5.6.2' media='all' />
<link rel='stylesheet' id='bootstrap4-css'  href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css?ver=5.6.2' media='all' />
<link rel='stylesheet' id='twenty-twenty-one-style-css'  href='http://website.com/wp-content/themes/twentytwentyone/style.css?ver=1.0.0' media='all' />
<link rel='stylesheet' id='twenty-twenty-one-print-style-css'  href='http://website.com/wp-content/themes/twentytwentyone/assets/css/print.css?ver=1.0.0' media='print' />
```
There seems to be 2 references to the parent style, but no child
Moderator bcworkz
(@bcworkz)

5 years, 2 months ago

The first example after my earlier link applies to twentytwentyone children. No need to enqueue the parent or @import it. Just enqueue your child style as illustrated.
Thread Starter thetoolman123
(@thetoolman123)

5 years, 2 months ago
Thanks, I have used this and it is now working:
```
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
    );
}
```
- This reply was modified 5 years, 2 months ago by bcworkz.