Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Simon Parker
PLUS
Simon Parker
Courses Plus Student 4,160 Points

Help creating a Wordpress Child Theme

On the course How to Make a Website with Wordpress explanation is given on how to create a child theme. I followed the instructions changing the information where asked but it did not work. Following the video I used the style.css from the downloads and used the @import rule to import the style.css. I saved it activated the child theme and it wasn't formatted correctly. Further investigation revealed another css file that I had missed. I guess I need to import that too. Would that just be another line using @import with the file path to the second css file? Also when looking at the wordpress codex I see that it is now not recommending @import but rather you create a functions.php for the child them and use the enqueue_scripts function. As I am still in the process of getting my head around php at this point I am completely lost. I would be most grateful for anyone who can help shed light on what I should be doing. Thanks.

2 Answers

Colin Marshall
Colin Marshall
32,861 Points

You are correct you can import the second (and all other stylesheets) with a new @import line pointing to that stylesheet. Although @import is not recommended anymore for child themes, it still works. It is not recommended because it will load your CSS files slower than the enqueue scripts method.

Check out this blog post for more: An Alternative to @import in WordPress Child Themes

As far as enqueue_scripts goes, it is fairly simple. You just need to create a functions.php file in your child theme and add this code to it:

<?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( 'parent-style', get_template_directory_uri() . '/style2.css' );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style3.css' );
}

Just make a new call to the wp_enqueue_style function for each CSS file in your parent theme.

Simon Parker
PLUS
Simon Parker
Courses Plus Student 4,160 Points

Thats clearer thank you. I notice the php block is not closed. Is that on purpose?

Colin Marshall
Colin Marshall
32,861 Points

Yes it is on purpose. The closing tag is optional in php files.

Check this out: Why do some scripts omit the closing PHP tag