Child Theme CSS

[Allison Deerr]

Hi Bill, second question today.

I am trying to transfer my edits into a child theme so we will be able to update the template. I have created the Child theme and all the widgets needed rearranging which I did. For some reason the Child Theme won’t load the parent CSS. I inserted this code into the child theme’s style.css >

@import url(“http://swedishamericanmuseum.org/2.0/wp-content/themes/forward/style.css”);

But when I view the page, all the style changes are gone. I have not updated the parent theme yet, so its stylesheet still contains all our customizations. Do you know what’s happening?

[Bill Robbins]

When I make a child theme at the present time, I also include a functions.php file in the child theme. It’s a good spot to add any additional functions your site needs, and it also allows you to enqueue the stylesheet from the parent theme instead of using an @include to do so.

Here’s the sample code from a Forward child theme’s functions.php file:

(See support site for code)

Just make sure that there is an opening

[Allison Deerr]

Bill,

This is currently what my Child Theme’s function.php file says:

<?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() . ‘/style.css’,
array(‘parent-style’)
);
}

This is what what set up using the recommended child theme creator. I also tried the code you provided. In both cases the parent style.css still isn’t loading. Is there a path wrong?

[Bill Robbins]

I use the code I posted above in virtually every child theme that I create for myself or others. I pulled it directly from a Forward child theme I made for a customer.

At this moment, two copies of the parent theme’s style.css are loading on your site:

<link rel='stylesheet' id='parent-style-css'  href='http://swedishamericanmuseum.org/2.0/wp-content/themes/forward/style.css?ver=4.5.4' type='text/css' media='all' />

and

<link rel='stylesheet' id='forward-main-css'  href='http://swedishamericanmuseum.org/2.0/wp-content/themes/forward/style.css?ver=1.1.4' type='text/css' media='screen' />

I made a very basic child theme for Forward and tested it on my development server. You could download it from https://support.organizedthemes.com/wp-content/uploads/2016/11/forward-basic-child.zip and see if it helps you out.

[Allison Deerr]

Thanks Bill,

I’m still having a lot of trouble with this. Any idea why it’s loading two style.css’s? I’m new to this, but I can’t put my finger on what going on with it. I used your code from the child theme sent me and Im still not getting a result. Obviously i’ve done something wrong on my end but I can’t figure it out.

[Bill Robbins]

Did you attempt to install and activate the child theme I sent?

[Allison Deerr]

Yes, nothing would load when I activated it and I received an internal server error.

[Bill Robbins]

If you’d like me to login and see if I can spot anything, I will. Just send over a login and I’ll take a look. There’s not much else I can do from the front end. The child theme loads up just fine with the unmodified theme on my development site.

[Allison Deerr]

This reply has been marked as private.

[Author]

Posts