In this post you’ll learn all the basics of WordPress Child Themes: WordPress Child Theme file structure, how to make any WordPress Theme a blank framework, how to import Parent Theme CSS styles, how to override Parent Theme styles, and how to override Parent Theme Template files. You’ll also learn that all of this is incredibly easy and within your grasp and that it might just change how you think about WordPress and Theme development.
Child Theme File Structure
WordPress Child Themes are located in /wp-content/themes/ like any other WordPress Theme. They’re activated from the WordPress admin like any other theme. They’ll always have a style.css file and may often include a functions.php file. They can contain images folders, script folders and include folders. Really, they’re just like any other WordPress theme.
Except they don’t need theme files. None at all. Zero. You don’t need to understand PHP in the slightest to create a WordPress Child theme.
The Comment Section In The Child Theme Stylesheet
The key to understanding how WordPress Child Themes work lies in one single line of a basic WordPress theme style.css file.
Here’s an example style sheet header from the WordPress Codex.
-
/*
-
Theme Name: Rose
-
Theme URI: the-theme's-homepage
-
Description: a-brief-description
-
Author: your-name
-
Author URI: your-URI
-
Template: use-this-to-define-a-parent-theme–optional
-
Version: a-number–optional
-
.
-
General comments/License Statement if any.
-
.
-
*/
We’ll be concerning ourselves with 1 particular line from the style sheet header.
Template: use-this-to-define-a-parent-theme--optional
According to the WordPress Codex
The simplest Theme includes only a style.css file, plus images, if any. To create such a Theme, you must specify a set of templates to inherit for use with the Theme by editing the Template: line in the style.css header comments.
What does this mean? We simply have to replace use-this-to-define-a-parent-theme--optional with the directory name of another installed theme—now called the Parent Theme—and we’re ready to begin.
A Framework Ready For Your CSS
Let’s make a WordPress Child Theme for one of the featured themes on the WordPress Theme directory, Fusion. We’ll call our new Child Theme, Fission. But first, a warning: this will be really easy.
We need to make an appropriately named directory in /wp-content/themes/ for our new Child Theme. That gives us /wp-content/themes/fission/.
In that /fission/ directory create a new file called style.css. Open style.css up in your favorite text editor.
Copy the following 5-line style sheet header into style.css and save the file. Pay close attention to line 4.
-
/*
-
Theme Name: Fission
-
Description: A Child Theme of Fusion
-
Template: fusion
-
*/
You just made a WordPress Child Theme for Fusion. Activate Fission from the Themes section of your WordPress admin. If everything went right … it should probably look wrong. That is, it should look like a brand new, valid HTML document in your browser, without any styling.
It might not look like much but if we look at the actual HTML skeleton of the the theme in Firebug we’re reminded that a lot of CSS design is simply a matter of manipulating containing divs and block level elements.
Here’s what this all means: you’re now ready to use the HTML output by this Parent Theme—a theme that has 19 PHP template files—as a framework, or canvas, for your design.
If you’re not a Theme developer you’ve just made yourself a fully functional blank WordPress Theme to start working with. You don’t have to know PHP. Just CSS and HTML. If you are a Theme developer, you can see what we did there. You can now easily reuse the same code base again and again, making room for easy updates to the code by untangling the presentation from the core of the theme as far as it will go.
Importing Parent Theme Styles
Of course, we’ll need to use CSS to make it look less wrong. For demonstration purposes, and for people new to making changes to a Parent Theme in this manner, we’re going to import the styles from the Parent Theme by adding only 1 line to our Child Theme style.css.
-
/*
-
Theme Name: Fission
-
Description: A Child Theme of Fusion
-
Template: fusion
-
*/
-
@import url(../fusion/style.css);
It should look … exactly the same as the Parent Theme, Fusion. This is not a mistake. This is revolutionary. What you’ve just created is a safe space to make changes to the Parent Theme without touching any of the original theme files.
Overriding Parent Theme Styles
Alright, now let’s say you want to make some simple changes to your Parent Theme. What do you do? Using something like Firebug you can find out where the offending styles are in the Parent Theme CSS.
Then just copy and paste the code into your Child Theme CSS where you can edit it safely (making sure to delete the reference to the filename that Firebug produces: “style.css (line 183)” in the example below).
-
/* Overriding the h2 styles from the Parent Theme */
-
h2 {
-
font-family:"Palatino Linotype",Georgia,"Tahoma","Century Schoolbook L",Arial,Helvetica;
-
font-size:250%; /* Increasing the font size */
-
font-weight:bold; /* Making the titles bold */
-
margin:0.6em 0 0.3em;
-
}
And when your Parent Theme is updated, your new Child Theme styles will still stick.
Overriding Parent Theme Template Files
Editing with CSS is great and it’s very easy to learn just enough to safely make changes to a WordPress theme but what happens when you really do need to make changes to a template file? When there’s something hardcoded in?
Easy. Copy the Parent Theme template file to your Child Theme directory and make the edits there. As of version 2.7, WordPress will look in the Child Theme directory first for template files. And if an alternate version of, say, footer.php, or single.php exists, WordPress will use that template file instead. This is simply awesome. WordPress will even accept category-XX.php (where XX is the ID of a particular category) in a Child Theme if you want to make changes to a specific category archive.
How To Modify WordPress Themes The Smart Way
This post is part of the series How To Modify WordPress Themes The Smart Way.
36 Comments
Wow! Thanks for the info. I had no idea. I’m a relatively new WordPress and using your theme framework. I’ll know to use this in the future. Very cool.
It’s all starting to sink in and make sense Ian, and I am REALLY starting to think of theme development different. If you were to take this one step further and discuss overriding theme template files a bit more, I think I would be sold forever.
Thanks man, this rocks!
Rich
I’m on it. This post is the first in a series that’ll turn you into an expert on the whole concept.
im stoked!
Ian, can I suggest that a ‘zeroth’ post in the series would be appreciated by at least one of your readers (and possibly many more).
I would love to read something in your intelligible style about what a WordPress theme does. Are they all functionally the same? Or are some simply a graphic ’skin’ whilst others offer greater functionality?
If, as you write here, all WP themes can essentially be considered a potential parent theme, what does Thematic offer that makes it such a popular (and appreciated) theme for many people to use as a basis for their own customisation?
As somebody who understands HTML and CSS, but nothing more, I feel one decent overview – written by somebody who understands WP and PHP, etc, and who can also remember what it felt like when they first encountered dynamically-generated websites – is all that stands between me and really understanding how WP works.
Thanks, Michael
Once we get through the series I hope it’ll be clear why Thematic is such a popular theme.
And once we get through the series you’ll have climbed from zeroth place to somewhere more near the front of the pack. Really. It’ll all come together.
Excellent. The series can’t come (and finish) quick enough!
Excellent explanations, it really shows how dead easy it is to fork a theme into a child. Great article!
Well done. I had no trouble following these directions.
John
I’m really enjoying and looking forward to more of these Ian, you do some great things with WordPress. Keep it up!
Excellent work Ian. This is a great reference for anyone who wants to learn more about child themes. Whenever we get questions about child themes from our members I always send them to one of your articles for a detailed explanation. This is a perfect example; packed with useful information, and easy to follow for beginners.
Keep up the good work!
I get how using an existing theme (and perhaps Thematic in particular) is a brilliant starting point for making a theme, but I’m not sure I entirely get the value of not having to edit template files. You don’t necessarily have to know PHP to confidently edit template files; it’s basically about replacing stuff and moving them around. I’ve read all the articles around here, and I’m asking myself: will I really prefer this to simply making a duplicate of Thematic and start editing the files? Will I really not need to edit any of the HTML (and PHP) to regardless of how I want to structure it?
In short: it depends. It all depends on what you want to do. I certainly think that for 99% of all blog design it’s easier—and better—to start designing with a Parent-Child Theme. Others might not.
Yeah, OK. I guess I’m a little nervous not to be in complete control of what I’m making — and that CSS inheritance can turn out to be a bit of a headache. I’ll play around with this for a bit get back to you
Ian, do you think this site will be fairly straightforward to build using Thematic?
http://www.synop.no/test
I think so. It’s a little hard to tell, not knowing what’s what. But, yeah, it should be pretty straightforward.
Hey, I’ve been looking more closely at the source code of Thematic, and I’m quite impressed. The extra classes in the body tag and post divs are particularly brilliant — enables loads of easy custom styling without messing around with php. Just the fact that they are there, and that they provide SO MANY ways to customize is making me think bigger and bolder in terms of what I can create. I’ll build my next site based on this, and if all goes predictably well, I’ll stick to it. As I touched on my first post I’ll probably edit the template files quite a bit, but then again, I use Wordpress more as a CMS than a plain blog platform. Good work!
Maybe I’m missing something but when I try to make the child theme wordpress says “broken theme, missing template and style sheet.” and near as I can tell I’ve followed the directions completely.
I have wp 2.7.1 running in MAMP … if that helps at all.
If you need more information to diagnose the problem just let me know I’ll do what I can to scrounge it up.
Hey awesome! Thanks for the post. Just learning Wordpress myself and want to update my site, and you have made everything that much more clearer. Chur!
Ok…so I am COMPLETELY new to this. I am following your instructions on how to make a child theme but how do I find my URI and the theme’s URI?
I am trying to create my child theme. WP is saying that I have stylesheet and theme missing. I corrected the case, made it all lower case but that still didn’t work. Here is what I have:
/*
Theme Name: Thematicoo
Description: Child Theme for Thematic
Template: thematic
*/
I created the directory and everything. It recognizes my thematicoo name but nothing else. And i created it in notepad. Please help!!!
same problem here.
if it is only style.css in there, in admin, it will say that
Broken Themes
The following themes are installed but incomplete. Themes must have a stylesheet and a template.
Name Description
Fission Template is missing.
any help?
I love this framework …!!! =)
Ian,
I knew that for my CSS styling over the original theme I just placed it under the @import statement. what I learning is I did not have to re enter all the lines again. say an ID has 4 lines and I wanted to change just the color. then all I need to do is put the title and my changes, like,
h2.postTitle. a {color: #xxxxxx}
As you said this is AWESOME, because I can see my changes all in one place. I wish this could be done for the Template files also.
JIM
This is an awesome tutorial! Just started researching the use of child themes and managed to come across this site. Great work!
Soooo useful.
Thanks!
Dear Ian,
I really like this tutorial and your Thematic theme. “I really like” is an understatement: I love it! It’s awesome. But I have a question: I made a child-theme and I want to post it on wordpress.org, so everyone can use it. If I want to post it I need to implement the parent-theme. How do it do that?
There’s currently no way to post Child Themes to the Repository. But if you give me all the info I can help you promote it.
Does the functions.php completely override the existing functions.php? Basically, if your parent theme has various important functions/tags/hooks in its functions.php, then it sounds like you’re limited to copying them across manually into your child theme’s functions.php?
This is truly awesome stuff! Many hearty thanks for making my design / development life easier and more satisfying.
How did u implement the “This post is part of the series” section? Did you use it inside the post code, or did you use a plugin for it??
This is awesome. Thanks Ian.
This is great! But, I guess I don’t fully understand. With this example, you can only overwrite the code for Fusion into your Child theme? Not, say, write entirely new CSS for it?
What if you wanted to mimic:
http://therewasrain.com/
and the CSS for it:
http://therewasrain.com/wp-content/themes/milkforcereal/style.css
If you copy that CSS into your new child theme, everything is messed up. As I have done:
http://jonschafer.com/blog/
Huzzah? Thanks for these articles! They are well written and incredibly easy to understand and follow along!
This is all great.
What I’m trying to do though is create a two column sidebar and can’t work out how I can do this?
Any ideas?
Thanks
THANK YOU x ∞!! I was using Vigilance and followed the steps they gave me, and it was all screwed up (as you describe before the import is done) and turns out they gave me the wrong import path and I didn’t know what to do but because of your webpage I figured it out.
Bless you!
Thanks for the info. I’m a relatively new WordPress and using your theme framework. I’ll know to use this in the future. Very cool.
21 Trackbacks
[...] Child Theme Basics [...]
[...] and the power of child themes. The first two parts of this guide are already online and covers child theme basics and modular CSS in child themes. Ian plans on covering the following topics in the [...]
[...] WordPress Child Theme Basics [...]
[...] on this topic, have a look at the Wordpress Codex. We would also like to thank the people over at ThemeShaper for the inspiration behind this article. No TweetBacks yet. (Be the first to Tweet this [...]
[...] WordPress Child Theme Basics Nice basics of child themes in wordpress themes (tags: design webdesign themes theme blog css webdev development tutorial web) [...]
[...] default Wordpress actions and filters which allows developers to use child themes. You can learn more about child theme basics here. As mentioned on Melvin’s site, here are some of the most notable of features of this [...]
[...] WordPress Child Theme Basics – [...]
[...] WordPress Child Theme Basics [...]
[...] WordPress Child Theme Basics [...]
[...] propose en particulier cet article qui est un bon début pour la création d’un thème enfant : WordPress Child Theme Basis. Je retrouve à priori dans Thematic toutes les fonctionnalités dont j’ai besoin pour mon blog, [...]
[...] Créer un thème enfant : WordPress Child Theme Basis [...]
[...] WordPress Child Theme Basics [...]
[...] And then, I read about child themes. [...]
[...] WordPress Child Theme Basics [...]
[...] Fight a Stranger in the Alps?" http://bit.ly/inthealps via @mrflip Hahahahaha [#] Shared WordPress Child Theme Basics ’bout to take off for a little barbecue trip to Lockhart for lunch at Smitty’s. [...]
[...] 8. Theme Shaper – When I began researching how to build a custom Wordpress site, I started looking at the Codex for documentation, which is all well and good, but it just wasn’t in depth enough for me. That’s when I StumbledUpon (Oh, yeah. Stumble Upon is probably one of my favorite add ons to Firefox. Get it!) the theme shaper Wordpress tutorial. I explains the whole template creation process very simply, which is the part that I had been struggling with. I can’ t tell you how invaluable this site was for me. Definitely worth a look for you would-be Wordpress Themers and schemers. Also, for those of you who focus on front end development or the design aspect of a website, read up on Theme Shaper’s Child Theme creation. [...]
[...] WordPress Child Theme Basics [...]
[...] WordPress Child Theme Basics [...]
[...] WordPress Child Theme Basics [...]
[...] WordPress Child Theme Basics [...]
[...] Wordpress Child Themes [...]