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

Zackery Cimini
Zackery Cimini
51 Points
Posted by Zackery Cimini
Zackery Cimini
51 Points

I created the child folder....I don't see a step on how to copy the CSS to that folder

How to Make Child Themes

2 Answers

matsum0t0
matsum0t0
12,520 Points
matsum0t0
matsum0t0
12,520 Points

Hello this might help out.

/*
 Theme Name:   your-parent-theme-name-child
 Theme URI:    http://example.com/your-theme-name-child
 Description:  Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     your-parent-theme-name
 Version:      1.0.0
 Tags:         
 Text Domain:  
*/

@import url("../your-parent-theme-folder/style.css");

The @import url line adds the parent theme to your child theme .css

Works?

Zac Gordon
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Correct, you wouldn't copy and paste the parent CSS over, but rather use the @import rule to bring it in from the parent theme.

Andres Altuve
Andres Altuve
16,274 Points
Andres Altuve
Andres Altuve
16,274 Points

Hi Zackery in order to create a Child theme you first create the theme folder, and then create a new file named style.css´

This is how your child theme folder should look

/wp-content/themes/your-child-theme/

inside your-child-theme folder you should have the following

style.css (see example below)

This is an example on how your style.css should look, in this example you will be creating a child theme of Twenty Fourteen Child.

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen    
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/


/* =Theme customization starts here
-------------------------------------------------------------- */

Information that you need to change

/*
 Theme Name:   Name of your theme
 Theme URI:    http://example.com/Name-of-your-theme
 Description:  Description of your child-theme
 Author:       Your name
 Author URI:   Your site
 Template:     name of the parent theme   
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/


/* =Theme customization starts here
-------------------------------------------------------------- */

For more information on Child Themes visit wordpress codex:

Wordpress Codex: Child Theme