Parent Theme's JS tries to load from child directory

Copy the problem file(plugins.js) from the parent theme into your child theme’s folder, and the problem will be solved.

Hi Mark,

Thanks. I figured that would work but thought there might be another way to do it without having to copy those files in future updates – is that the best way?

I’m actually having a problem with the css files too. The parent theme uses three css files in a subdirectory and when using @import in my child theme’s .css to load those files, none of the css shows up and the page remains unstyled.

I noticed that in the page’s html the page is trying to load the parent theme’s css in the child theme’s folder similar to the JS issue above. Is this normal to see the html in a child theme call a css file that isn’t there?

The problem is this:

bloginfo('stylesheet_directory');

It should instead be this:

bloginfo('template_directory');

(or, better yet)

get_template_directory_uri()

Chip,

Thanks. Right, but since these calls (both css and js) are in the parent’s header.php, do I have copy header.php to the child theme and change it there?

And I’ll have to do this again in the future for each theme update?

since these calls (both css and js) are in the parent’s header.php, do I have copy header.php to the child theme and change it there?

That’s what I would do. Just copy header.php into your Child Theme, and correct it there.

And I’ll have to do this again in the future for each theme update?

No; your Child Theme will be unchanged when the Parent Theme is updated.

But, I would advise contacting the Parent Theme developer, and suggesting the fix.

Chip,

Alright, thanks, the only problem with that is that the parent theme developer has included all of the page navigation in header.php so if that gets updated in the future I’ll have to copy it over again to the child theme. I guess I’m realizing that this theme is not very child-theme-friendly.

Is there any reason why I wouldn’t be able to import three css files in a subdirectory of the parent in my child theme’s style.css? My child theme still remains unstyled even with the @import calls to the proper location.

Would it not be easier to copy the CSS and/or JS files the header calls upon, you’d then not need to edit anything, simply copy the files again if they get updated in a new version of the theme.

Okay, I copied all of the files to the child theme directory. The page loads up correctly this way.

The page loads correctly even without doing an @import in the child style.css. Shouldn’t I have to? The parent’s default style.css is empty and the header calls master.css in a sub directory which loads three separate css files.

The problem I’m having is that no change I make in the child’s style.css overrides the parent theme’s css.

Again, that’s because the stylesheet, like the JS files, is included by the header.

If you want to control over these things you’ll need to copy the header file to your child theme and make the necessary adjustments. Parent & Child themes work using an inheritance scheme, if a file exists for the child theme, it’s loaded… if not, the parent theme’s file is loaded instead.

1. Copy the header.php from the parent theme, into the child theme folder
2. Open the newly made file, adjust the code and save
3. If the theme is updated at any point, simply copy the file again and make adjustments

Updates will not effect your copied files, only the parent files ever change, meaning your adjustments won’t get overwritten.

Turns out Chip’s suggestion was the right one after all… ??

Again, that’s because the stylesheet, like the JS files, is included by the header.

What Theme is this, by the way? This behavior is common in older Themes, but is clearly outside of current best-practice.

Turns out Chip’s suggestion was the right one after all… ??

It happens from time to time, even despite my best efforts. ??

Alright, thanks. The theme is grid-a-licious. It’s a great theme but apparently a little dusty under the hood ??

https://suprmarket.net/themes/gridalicious/

I copied header.php to the child dir and changed the calls to bloginfo(‘template_directory’); and the works fine.

But still, any changes I try to make in my child theme’s style.css don’t override the parent theme’s css.