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 How to Make Child Themes

Posted by Jesus Trevino
Jesus Trevino
720 Points

How to create the style.css file for a child theme that is derived from a premium theme?

I need help creating the style.css file when generating a child theme from a premium theme.

When creating the child theme folder, I get lost at the point in which we copy and paste the style.css file. In this tutorial video, the presenter copies this file from the "project downloads folder." In my case, I do not understand which file I should copy and paste into my child theme folder...

You see, I copied and pasted the style.css file from the premium theme folder and expected to see the code that appears in the video at minute 2:07 (i.e., file description in lines 1-9 and @import rule in line 11). However, when I open this copied style.css file in a text editor, the entire contents of the style.css file is displayed and there is no @import rule...

Any thoughts on where I am going wrong with the creation of the style.css file?

3 Answers

A.J. Kandy
PLUS
A.J. Kandy
Courses Plus Student 12,422 Points
A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

The premium theme's CSS is the "parent" CSS.

The child theme's stylesheet needs to contain a specially formatted comment at the top that includes the parent theme's name, so that WordPress can identify it as such.

In this sample code from WordPress.org, the 'Template' line indicates the parent theme (twentyfifteen). If you look at your parent premium theme's CSS, you'll notice that it doesn't have this line. 

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

You shouldn't need to use @import to make a child theme, unless you have partial stylesheets elsewhere that you need to bring into the child theme; you don't need to duplicate the parent. A child theme's CSS either adds to, or overrides, parts of the original.

More info at the WordPress Codex: https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

saransh mahajan
saransh mahajan
283 Points
saransh mahajan
saransh mahajan
283 Points

Even didn't understand, presenter should be more explicit and ended up googling the solution then what is the use of paying money to team tree house ?

Justin Gustafson
Justin Gustafson
13,633 Points
Justin Gustafson
Justin Gustafson
13,633 Points

Sorry I agree with Saransh, it was completely unclear where the presenter got the info for the child css sheet. Extremely confusing. This answer above should have been in the video.