Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress How to Make a Website with WordPress Customizing WordPress Themes Customizing WordPress Theme Files

Paco Torres
Paco Torres
8,450 Points

Changes on my child theme

I am making a new project and I've created and activated a child theme. When I look at Dashboard > Appearance > Editor everything seems to work properly, but when I make a change in my style.css nothing happens. I just can make changes directly on my parent theme. Any suggestion about what I am doing wrong?

Thank you very much.

8 Answers

Andrew McCormick
Andrew McCormick
17,730 Points

Yeah, this theme is not very kind to child themes out of the box. I just downloaded it to look at what you were seeing. The main stylesheet at topbest/style.css is blank other than the required theme information. The actual css is in the topbest/css/style.css . I've tried importing that url into the child theme, creating a stylesheet in the child theme folder to match: topbestchild/css/style.css (often when using the exact same structure the file will overridde the parent theme file), and a host of other things, but you're right that the style.css in the child theme just will not overwrite anything in the parent.
I use child themes all the time and haven't ran in to this before. Unless I'm missing something, this is just an example of bad theme design (of course, it is a free theme)

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Can you post up a your CSS please.

When you make the changes via a text editor or from within admin area does it make a difference?

Paco Torres
Paco Torres
8,450 Points

No, it doesn't make a difference. The theme I am using has an style.css only with this:

/*
Theme Name: TopBest
Theme URI: http://themesmarts.com
Description: A Clean Design suitable for your company or personal portfolio.

Author: ThemeSmarts
Author URI: http://themesmarts.com
Version: 1.1

Copyright (C) 2012 ThemeSmarts
License: GNU General Public License, version 3 (GPLv3)
License URI: license.txt 
*/

And there is a folder named 'css' which contains another style.css (with part of the rules) and more css documents. When doing the child theme I've wrote this:

/*
Theme Name: TopBest Child
Theme URI: http://themesmarts.com
Description: Child Theme for the TopBest theme.

Author: ThemeSmarts
Author URI: http://themesmarts.com
Template: topbest
Version: 1.1

Copyright (C) 2012 ThemeSmarts
License: GNU General Public License, version 3 (GPLv3)
License URI: license.txt 
*/

@import "../topbest/style.css";

Thank you!

Paco Torres
Paco Torres
8,450 Points

I find that when I make changes on 'topbest/style.css' nothing happens. So, I suppose that making changes on /topbestchild/syle.css' has the same effect.

This is the source code. I don't see anywhere the 'topbestchild' theme that is active.

<link rel='stylesheet' id='style-css'  href='http://localhost/myweb.com/wp-content/themes/topbest/css/style.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='inner-css'  href='http://localhost/myweb.com/wp-content/themes/topbest/css/inner.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='layout-css'  href='http://localhost/myweb.com/wp-content/themes/topbest/css/layout.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='flexslider-css'  href='http://localhost/myweb.com/wp-content/themes/topbest/css/flexslider.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='color-css'  href='http://localhost/myweb.com/wp-content/themes/topbest/css/color.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='prettyphoto-css'  href='http://localhost/myweb.com/wp-content/themes/topbest/css/prettyPhoto.css?ver=3.8.1' type='text/css' media='all' />
Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

All your changes should be going in /topbestchild/syle.css. You shouldn't be editing anything with from the parent theme.

Have you selected the child theme as your active theme from within the admin area?

If so, can you try doing something in your /topbestchild/syle.css like this:

body { background: black !important }

Just to check that something is having an effect.

Paco Torres
Paco Torres
8,450 Points

"Have you selected the child theme as your active theme from within the admin area?" Yes, I have.

Anything is having an effect. It is as if there were no child theme, but I can see it in Appearance > Editor: TopBest Child: Stylesheet (style.css)

I can only change the background color from the parent theme: /topbest/css/color.css.

I am beginning to think that the mistake is elsewhere.

Thank you again!

Paco Torres
Paco Torres
8,450 Points

I have written this inside topbestchild/header.php:

<link rel='stylesheet' href='<?php echo get_stylesheet_directory_uri() ?>/style.css?ver=3.8.1' type='text/css' media='all' />

and it works!!

I have tried to load get_stylesheet_directory_uri() from functions.php, but I didn't success with this: wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css', array());

Nevertheless, I think my solution is not very elegant.

Paco Torres
Paco Torres
8,450 Points

Thank you, Andrew. I appreciate what you have done and your words. I am happy to know that I am not the problem.