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.
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
Pingback: Child Theme Basics | WPLover
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.
Pingback: Smarter Theme Development | The Latest Headlines
Pingback: Theming links round-up by Free WordPress Themes Blog
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.
Pingback: What is a Wordpress Child Theme | Web Services and Tools
Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
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?
Pingback: Why I Use The Free Buffet Framework Wordpress Theme | Code My Own Road
I love this framework …!!! =)
Pingback: Enlaces en mi del.icio.us, 15 06 2009 | Vectoralia
Pingback: Wordpress ile ilgili takip edilesi 10 muhteşem blog | MSN Sözleri | Güzel Sözleri | Özlü Sözler | Sevgi Sözler | Diziler | Filmler | Oyunlar | Yavaş | Sağlık | Sanat | Spor | Haber
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
Pingback: Wordpress ile ilgili takip edilesi 10 muhteşem blog « Bay Bedava – Netten Başlıklar
This is an awesome tutorial! Just started researching the use of child themes and managed to come across this site. Great work!
Pingback: Utiliser un Framework WordPress | Eiffair
Soooo useful.
Thanks!
Pingback: Structure du framework Thematic | Eiffair
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.
Pingback: 10 Most Helpful WordPress Design Blogs | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money
Pingback: A Better Way to Modify WordPress Themes | listen to...
Pingback: Build WordPress Sites Fast With the Thematic Theme Framework | Es Developed - Fresh Website and Graphic Design
Pingback: Weekly Digest for October 12th » Alex Jones
Pingback: 10 Resources I Use When I Build Any Website.
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?
Pingback: Details on the 10 Most Helpful Wordpress Design Blogs | Arbenting
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
Pingback: A Comparison of 6 Popular WordPress Frameworks | Pro Blog Design
Pingback: A Comparison of 6 Popular WordPress Frameworks » WordPressURLs
Pingback: iThemes and Child Themes – introduction : iThemes : Business WordPress Themes, WordPress CMS Themes
Pingback: Duh! Wordpress Themes…Defaults! « Juanitas Web Spot (www.jack-in.com)
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.
OMG! This is just what I was looking for. You’ve really made this easy to understand for a newbie in the WP theme design. Bookmarking now!
The problem with overriding parent theme template files (if you need to change something that’s hardcoded) in your child theme is that whenever the parent theme gets updated, you have to go through and redo all of your overrides in the template files you’ve copied into your child theme. Is there a way around this?
Pingback: Comparison of Popular WordPress Frameworks | MikeCapson.com | A Saint John Web Designer
Pingback: Child Themes – Plantillas Hijas | Ayuda WordPress
Pingback: Details on the 10 Most Helpful WordPress Design Blogs » Arbenting - The Act of Being Creative
Pingback: Web Analytics for Humans
Wow thanks a lot for this post! Very useful information.
Pingback: 10 Things You Need to Know About WordPress 3.0
Thanks for the great information. We’ve created our own “blank theme”, however, it’s not as comprehensive as your thematic theme. Thanks for putting this information together, it’s a great help to see what others are doing!
Hope the job goes well with Automattic, I hear great things about working for them!
Fantastic! Thanks.
What about overiding functions!
TIP FOR THEME DEVELOPERS. The fact that a child theme’s functions.php is loaded first means that you can make the user functions of your theme pluggable—that is, replaceable by a child theme—by declaring them conditionally. E.g.:
if (!function_exists(‘theme_special_nav’)) {
function theme_special_nav() {
// Do something.
}
}
However, whenever I try to redeclare a function in a child theme functions.php that is already decalred in the parent theme, I get a fatal error ‘Cannot redeclare….etc’.
This happens whether or not I wrap the redeclared function in
if (!function_exists
or not.
Is the Codex wrong?
Should I report this as a bug for WP 3?
Or have I misunderstood?
I am running WP 3 Beta 2.
Many thanks.
Hi Ian
This is great and just in time to help a newbie like myself.
I am not seeing the desired result from your instructions. Don’t get me wrong. They are absolutely clear but something seems to be breaking somewhere.
Would this have to do maybe with my WordPressMU/BuddyPress installation?
I followed your instructions exactly but my page elements are scattered all over the place and I am not sure if it’s because of my above setup BP /WPMU.
My theme’s been working fine for (the most part) but until now that I created the child element and the @import now things are scattered all over the place. As a process of elimination, I even tried a new theme by simply changing the @import to point to that new theme’s dir but same problem.
Could it be BP /WPMU is breaking my codes somewhere?
What could possibly be causing this problem?
Any help appreciated
Thanks
Pingback: 1 – KoronkowaEuforia.pl
Pingback: 2 – KoronkowaEuforia.pl
Pingback: Polaraul » WordPress Child Theme Basics
Pingback: Those Darn Kids: WordPress Child Themes - CogDogBlog
Utterly confused-this is not for beginners or anyone over 40, hahaha . I wish someone would develop a platform like blogger that you could use with wordpress for those untechnical people like me.
I would love a plain page option without a sidebar to display pictures with link to different pages but I have no idea how to do this.
Jana
Hi Ian
thanks for the pointers….I was almost giving up on wordpress after a frustrating learning curve. Many themes do not suit my needs and even some of the premium themes I would have to tweak so this child manipulation may work for me. What I am looking for is a very clean, minimal site for a portfolio with nav on the left and a lot of gallery space. often photo themes are too widescreen. I hope to work on a child for thematic so if it’s up and running and looks good I’ll post it.
best,
Maeve
Hey Ian,
great tutorial!
I just trief it out, but when I upload my child theme, it doesn’t show up on the WordPress theme selection. Any idea why that could be?
Thx!
WP is rather new to me, I thought its a new idea to have a child set of codes superceding the parent and to my surprise, it not new at all. Its already happened even before I started web design, it’s me that need to do some catching up with times – lol.
Thanks for the awesome infomation.
Great tutorial for a semi-newbie.
I’ve been using WordPress for about a week – totally new to php but know a very little css – and I’d made a few tweaks to the default twentyten style.css.
A few tweaks too many because I lost track of what I’d changed and it was starting to get messy. Agghhh.
This child theme business is what I should have done from the start! All my tweaks would be there waving at me!
Thanks so much for writing this info! I had been struggling to figure out child themes and this set it down so that I was able to make my changes. I’ve forwarded this on to a friend. I really appreciate it!