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

Timothy Wattimena
Timothy Wattimena
4,896 Points
Posted by Timothy Wattimena
Timothy Wattimena
4,896 Points

My child theme always looks very different from my parent theme when I create it

Hi! Every time I try to make a child theme, it looks drastically different from its parent theme. I'm following the video "How to Make Child Themes" using the twentythirteen theme just like what Zac is using. The parent theme must look exactly the same as the child theme when you create it. But it's not turning out that way.

My child theme looks like this: ! Child Theme

While the parent theme looks like this: ! Parent Theme

What did I do wrong? Thanks!

5 Answers

Timothy Wattimena
Timothy Wattimena
4,896 Points
Timothy Wattimena
Timothy Wattimena
4,896 Points

I found out what the problem was. Everything I did was actually correct. The problem was the browser I was using. I was accessing my site on Internet Explorer, and the child theme looked all messed up. But when I accessed my site on Google Chrome, everything was fine. Thanks James and Don for your help!

Don Shipley
Don Shipley
19,488 Points
Don Shipley
Don Shipley
19,488 Points

Have not use IE for some time. Always seem to have problems having there own way Wish all developer would use something saying You are using IE so the page may not display properly. Here are some suggestions on better browsers LOL

Good luck to you

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Lesson learned: IE sucks use chrome!

Glad you fixed it anyway :)

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Looks like its unable to load/not loading the style.css file correctly. Did you copy style.css from your parent theme to your child theme? And did you ensure it is in the root of the folder not in a subfolder called 'css' for example?

If you're still working on it on smellyoulater.net (nice name btw :P), activate the child theme and let me know and I'll be able to take a closer look.

Hope this helps!

Don Shipley
Don Shipley
19,488 Points
Don Shipley
Don Shipley
19,488 Points

It looks like it is not reading your css file. Not sure if what I posted below is correct but make sure your @import url("../twentythirteen/style.css"); is pointed to the correct css Make sure you place the correct heading in your child theme

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


@import url("../twentythirteen/style.css");
Timothy Wattimena
Timothy Wattimena
4,896 Points
Timothy Wattimena
Timothy Wattimena
4,896 Points

The file path seems fine to me.

Here is a screenshot of my FTP software: ! FTP screenshot Here is a screenshot of my style.css ! style.css

Don Shipley
Don Shipley
19,488 Points
Don Shipley
Don Shipley
19,488 Points

You need to create a folder inside your wp_content, themes name it what you like like twentythirteenchild. create a style.css file and save this and save it in you child folder /* Theme Name: Twenty thirteen Child Theme URI: http://example.com/twenty-fourteen-child/ Description: Twenty Thirteen Child Theme Author: John Doe Author URI: http://example.com Template: twentythirteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fourteen-child */

@import url("../twentythirteen/style.css");

Make sure you save it as a css file and not a text doc.