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 From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Maintaining Your Theme as a Parent Theme

johannbillar
johannbillar
9,028 Points
Posted by johannbillar
johannbillar
9,028 Points

When creating a child theme, how to include the child style.css file in the functions.php file?

I created a child-theme for the bootstrap-theme, which we created in this course.

How do I include the child-theme style.css file in the functions.php file so that it loads in the header.php?

Do I include it in the parent functions.php file? Or do I include it in the child's function.php file? And, if so how...?

Thanks! ~Johann

6 Answers

Jesse Petersen
STAFF
Jesse Petersen
Treehouse Guest Teacher
Jesse Petersen
Jesse Petersen
Treehouse Guest Teacher

The parent theme in this case has nothing to do with the child theme unless you include the parent .css with an include. You need to enqueue the styles in the child functions file. From what you write, I don't see your following my advice. The parent theme is not active. Forget that functions.php file. The only thing that matters is what happens in the child theme.

johannbillar
johannbillar
9,028 Points
johannbillar
johannbillar
9,028 Points

Thanks again!

This was quite confusing... Hopefully, more courses will become available on creating child-themes. I enqueued the parent style-sheets- and the child style file in the child functions file. It works now. Most guides online still use the @import method, which I was trying to avoid.

I added this code to the child theme functions.php file.

<?php

function child_theme_styles() {

  wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
  wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child_css', get_stylesheet_directory_uri() . '/style.css' );

}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );

?>
Jesse Petersen
STAFF
Jesse Petersen
Treehouse Guest Teacher
Jesse Petersen
Jesse Petersen
Treehouse Guest Teacher

You enqueue styles with wp_enqueue_style() - see this for an example: https://codex.wordpress.org/Function_Reference/wp_enqueue_style#Examples

It will put it where it needs to go when the page generates.

johannbillar
johannbillar
9,028 Points
johannbillar
johannbillar
9,028 Points

Hi Jesse - thanks for your answer.

The child style.css located in the root of the child-them folder is not being included in the head automatically for some reason. The bootstrap parent theme functions.php file does call the parent style sheets.

function theme_styles() {

p_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

} add_action( 'wp_enqueue_scripts', 'theme_styles' );

Not sure what I'm doing wrong.

Jason Collins
Jason Collins
4,535 Points
Jason Collins
Jason Collins
4,535 Points

This helped me tremendously! I was enqueue-ing my parent style.css in my child functions, then my child style.css. Then when I loaded the page, it was loading parent css, child css, then bootstrap and parent again. No idea why. I fixed it by enqueue-ing bootstrap in the child theme, then parent style.css then child style.css as shown in answer above.

If anyone has an idea why parent, child, then bootstrap and parent (a second time) were loading when I never enqueue'd bootstrap in the child the first time, please let me know. Glad there was an answer here, though.

Gerjan de Vries
Gerjan de Vries
5,625 Points
Gerjan de Vries
Gerjan de Vries
5,625 Points

Got the same problem Jason... Thanks for the solution! But does anyone knows why the Stylesheets are loaded twice?

Gerjan de Vries
Gerjan de Vries
5,625 Points
Gerjan de Vries
Gerjan de Vries
5,625 Points

Yeah! I've found it:

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

Gerjan de Vries
Gerjan de Vries
5,625 Points
Gerjan de Vries
Gerjan de Vries
5,625 Points

Yeah! I've found it:

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)