How to Create WordPress Child Themes (Video)

by on November 17, 2010 · 33 comments

Child themes are the best way to customize an existing WordPress Theme. They allow you to inherit the functionality of another theme, and extend it without modifying the original theme files.

WordPress Child Theme Tutorial Video

Using a child theme to customize and extend your WordPress Theme gives you several benefits:

  • Inherit functionality from an existing theme
  • Customize and extend it without modifying the original theme files
  • If you break something (which is easy to do when modifying CSS or PHP files) you can easily recover
  • They are very easy to set up!

In the video tutorial I’ll show you exactly how to set up a child theme to extend the SmallBiz WordPress Theme and change fonts, background colors, and functionality in the theme’s footer.php file.

Here are the instructions on the WordPress.org site: http://codex.wordpress.org/Child_Themes

Have fun tweaking your themes, and let me know what you think in the comments below!

Article by »

Don is an entrepreneur based in Silicon Valley. He founded Expand2Web and is the publisher of the Expand2Web Blog, and the GetFiveStars Customer Feedback and Reviews service.

Don has written 313 articles on Expand2Web

Author Connect » Twitter | | Facebook |

See my disclosure about advertising and affiliate links

{ 33 comments… read them below or add one }

Marc Marseille November 18, 2010 at 5:24 am

Great stuff…you make it seem so easy. I am always wanting to try to learn how to customize Word Press, but for some reason I am also scared I will totally destroy everything…this definitely helps. Now I need to master FTP to make sure I get it right..

Reply

Don Campbell November 19, 2010 at 7:29 am

Thanks Marc! Yes, FTP is one of those things that trips you up at first, but once you get used to it you can do a lot of things to customize your website. Good luck!

Reply

Paulette November 18, 2010 at 6:39 am

Thanks Don for that great tutorial. I’ve been meaning to wrap my head around child themes and you’ve made it easy and fun.

Reply

Don Campbell November 19, 2010 at 7:30 am

You’re welcome Paulette – thanks for dropping by and leaving a comment!

Reply

Daren Willcock November 18, 2010 at 6:58 am

Excellent tutorial Don. You make the frightening side of webmastering less scary! I learnt a lot from this one. Thanks.

Reply

Don Campbell November 19, 2010 at 7:31 am

Thank you Daren! I appreciate you stopping by.

Reply

Cyndi Fink November 18, 2010 at 9:35 am

I really appreciate the way you explain things. You’re a natural-born teacher. Again thanks,
Cyndi

Reply

Don Campbell November 19, 2010 at 7:31 am

Why thank you Cyndi – you are very kind.

Reply

John Pollarld November 18, 2010 at 10:33 pm

I tried to follow the instructions but the files have different names now. Is this possible? Or am I looking in the wrong place?

Reply

Don Campbell November 19, 2010 at 7:33 am

Hi John, can you give me some specifics on what you mean? These are just standard theme folders and files and should be pretty consistent. Let me know what you are looking at and I’ll try to help.

Reply

Zee Visram November 19, 2010 at 4:41 am

Hey Don,
great idea this Child Theme concept. A great way to make changes confidently. I’m always concerned about making changes for the very reason you mention: what happens if I break something? How do I get back what I had originally? Thanks for staying ahead of the curve for us.

Reply

Don Campbell November 19, 2010 at 7:33 am

You bet – nice to hear from you Zee. Good luck customizing your theme!

Reply

Nadia Korths November 20, 2010 at 7:11 am

Thank you for child theme tutorial. Very straightforward.

Reply

Karen McMinn November 20, 2010 at 12:11 pm

So much to learn – so little time – thanks Don!

Reply

John November 20, 2010 at 5:38 pm

Hello Don, Hey how do you override the functions.php for a child theme? I have made some changes to the file. So i want if i can override the parent file so i can use the customized functions.php file in the child.

Thanks

Reply

Don Campbell November 20, 2010 at 6:17 pm

Hi John,
Just supply a new functions.php file in your new child theme directory (the same place you put your new style.css.)

This functions.php will be loaded in addition to the parent theme’s functions.php – it is actually loaded first. This way you can add new functions to parent theme if you want.

You can find more details and examples here: http://codex.wordpress.org/Child_Themes#Using_functions.php

Reply

John November 20, 2010 at 6:31 pm

Hey Don, Thanks for responding so fast!

I have made those changes that we were talking about with the header. (added more lines to the header) by me doing this it has also added those functions in the back end also i got the color picker working. So i just copied the functions.php file and stuck it in the child folder. So when i activate the child theme and it’s giving me a error. about a line.

So is there anyway i can use the complete function.php file in the child theme for the updated one with all those functions with out breaking it up in the child theme? Can’t wait to show you what i did..

Reply

Don Campbell November 20, 2010 at 7:01 pm

Hi John,
You don’t want to copy the functions.php from the parent to the child theme because then it will try to load every function 2x. You want to add a new functions.php that only contains your new functions. Make sure to read this section about functions.php in child themes: http://codex.wordpress.org/Child_Themes#Using_functions.php

I’d love to see what you’re working on – make sure to add a URL for us to see once you get it ready!

Reply

John November 20, 2010 at 7:49 pm

Hello again, I’m just using a wamp server at this moment. What I’m doing is adding 2 sections in the business options panel in the back end. 1 sections is the added info for me in the header like we talked about. 2 options is I’m also adding another address section for the header cause i have a couple google address that are listed on the maps here in Tn.

This might take me some time because a lot of code to go through… Lol, after all of this I might just move there with you and start another business with ya. I have torn this theme apart to learn it. It’s not hard at all for a beginner in themes.

I have also incorporated dreamweaver with this theme to make it easier for me to edit the theme.. Thanks for your time and patients you are a great help.
— Also before I make this theme live I’m going to settle up with you..

— I have the seo part of it down for now.. until we have to start bidding on letters in google lol..

Again Thanks A bunch!

Reply

Yvette November 23, 2010 at 6:56 pm

A word of warning – after creating and activating a child theme, all my pages were showing up in the menu so I had to reselect my menu (Appearances | Menus | Theme Locations section | reselect menu in Primary Navigation dropdown).

Otherwise worked wonderfully.

p.s. Thank you for the tip on inspecting styles in Chrome. Whoo hoo. Gonna inspect some of my favorite pages to get css tips.

Reply

Don Campbell December 18, 2010 at 9:09 am

Good point – thanks for adding that Yvonne. Yes the Chrome inspect element is pretty cool. Also the Firebug plug-in for Firefox is also very useful.

Reply

John Koetsier December 17, 2010 at 7:30 pm

Thanks for the really great and simple tutorial. I’ve edited lots of themes but never created a child theme before – now I’ll definitely try that.

Question: what did you use to make the video? I’ve alway done screenshots with Snapz Pro, but it can’t do what you did. Nice!

Reply

Don Campbell December 18, 2010 at 9:12 am

Thanks John,
I use a tool called Screenflow on the Mac. It’s pretty easy to use and you can do a lot of nice effects with it.

Reply

Stephen Kane March 31, 2011 at 9:04 am

Often a Style.css in the child theme is not enough

Don – Great job explaining the basic setup of a Wordpress child theme. I’ve been using child themes for some time to protect my customizations to Style.css and for some themes it works fine. But for many themes, a child theme Style.css is not enough, as they contain (skin-name).css files which trump the code in Style.css.

For example, many themes allow you to pick a skin and the skin is usually named for its primary color scheme like “primaryBlack.css” or “darkRed.css”, etc. As mentioned above, the skin css file trumps style.css.

Have you been able to successfully referance a skin.css file in the child-theme folder? If so, how.

Thanks for any insights.

Reply

Uttam April 30, 2011 at 1:16 pm

Hi Don,
One question..is there any I can change the dimension of rotating images..

Thanks

Reply

William October 11, 2011 at 6:26 pm

I have tried this to the letter, but the parent theme I am working with has a style.css that only contains the wordpress comment identifying it as theme. The CSS is coming from a main.css inside the css/main.css folder. So how do I configure the child theme with this type of setup?

Reply

Stephen Kane October 11, 2011 at 8:03 pm

If I understand, the parent’s style.css has nothing but theme heading and an import like: @import url(“../css/main.css”);

This should work William: Child style.css points to Parent style.css – via the @import – and the parent style.css points to main.css. If it is not working for you, try putting the full paths in each @import.

Reply

William October 11, 2011 at 10:53 pm

There is no @import pointing to anyother css file in the parent style.css. Just the commented identifier.

Reply

Sandeep Hijam December 28, 2011 at 10:07 pm

I really love this. Thank you. Its gonna try this out for my clients

Reply

Andy Klevorn May 4, 2012 at 6:23 am

Hey Don, It’s Andy…

Do you have to add any code at the top of a functions.php file like you did the css file?

Reply

Don Campbell May 4, 2012 at 10:00 am

Hi Andy, good to hear from you. No you don’t add anything to the top of functions.php. Replacing functions in there can be a bit tricky. This article has some good instructions on how to do that.

Reply

Sassica August 1, 2013 at 3:09 pm

Hi Don,
This is a very helpful tutorial. Thank you for posting it. I’m trying to create a child theme, but am stuck on the basics of the programs you are using.

How are able to view and edit your website (ftp?) info in Finder? What program are you using to create/edit CSS?

I’ve created the child theme, but had to do it through Bluehost’s File Manager. Also, it says the stylesheet is missing.

Thanks!

Reply

Nate December 16, 2013 at 12:49 pm

Hi Don,

2nd week w/a Wordpress website, so pretty new to this world. I see that I have 1 Wordpress update (3.8) pending, as well as 2 Theme updates. I’ve only been using/updating the WP plug-ins available, and have NOT done any of the type of editing you showed in your video (with the font or background shades) … just entering text and images and buttons, etc. So, at this point, is it okay to go ahead w/these updates, or do I still need a Child Theme? I don’t want to update, and then have my theme “reset”.

Thanks!
Nate

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post: