How to make a child theme for WordPress: A pictorial introduction for beginners

Given their power and how easy they are to use, “child themes” are a surprisingly little-known feature of WordPress. I wish I knew about them the first time I looked for themes. I found then a number of designs I liked but I ended up discarding them all because of a few issues I saw in each; things like small line height, justified text, or a careless selection of fonts.

Now, such issues are easy to fix: With an elementary knowledge of HTML and CSS and a reference at hand, you spot the rules in the stylesheet, change a value or two, then save your changes. But I never liked this option: it means that you have to keep track of your changes, remember about them, and reapply them every time the theme is updated. So I settled for a theme that got most of the details right but which I did not like that much... Then I learned about child themes!

If you have found yourself in a similar position, this introduction is for you. It will not teach you how to write CSS — it just explains, with a few examples, how to make a child theme and with it change small things in a WordPress theme you like.

With a bit of reading and experimentation, you can move quickly beyond the basic examples of this introduction and make drastic changes — at a more advanced level, and given a good parent theme, the style and layout of a WordPress site can be changed completely by using only the stylesheet of a child theme, without touching one line of PHP code or HTML markup!

CONTENTS

  1. How child themes work in WordPress
  2. How are themes modified without being modified?
  3. What you need to make a child theme
  4. Assembling a child theme: the framework
  5. Using Firebug
  6. Adding CSS rules to your child theme
  7. Putting it all together and activating the child theme
  8. Notes
  9. Links to tools and resources

1. How child themes work in WordPress

  • You make the child theme: just one directory and one CSS file in it.
    • You may also use a functions.php file (outside the scope of this introduction).
  • The child theme, in its CSS file, declares its parent, i.e., the theme whose templates it uses. It inherits all files of the parent except the stylesheet (which can be explicitly imported). Once everything is in place, the child theme:
    • Is activated like any other theme, via the administration panel.
    • Behaves exactly like its parent, in everything. E.g., if the parent has an options page, the child will have it too.
    • Looks exactly like its parent, plus or minus any changes you make: you can modify everything beyond recognition or just change one tiny, unnoticeable detail.
  • You don’t have to keep track of your modifications or worry about losing them the next time the parent theme is updated, since you haven’t touched the parent theme. Your changes live in their own file(s) within their own directory in wp-content/themes.

2. How are themes modified without being modified?

For styling, this is possible thanks to the way Cascading Style Sheets work. In this particular case, the stylesheet of the parent is imported (by an explicit instruction) into the stylesheet of the child. Then, you add your own rules to the child’s stylesheet. When a rule you added conflicts with a rule of the parent, here is what happens — quoted from the CSS 2.1 Specification:

[I]f two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself. — SOURCE

Let’s see an example. The parent stylesheet says:

body {
    color: #3f3f3f;
}

It means gray text (on white background) for the whole body of the HTML document. But you prefer black. So, into the stylesheet of the child you put:

body {
    color: #000000;
}

Now, obviously, the two declarations conflict. But, while they are equal in everything, they are different in this: The parent’s comes from an imported stylesheet, while the child’s is in the stylesheet itself. — The child wins!

SYNTAX OF CASCADING STYLE SHEETS

As you can see in the example above, the syntax of CSS is simple and the naming scheme intuitive:

There are rules. Each rule has a selector, for example body or p(aragraph), and a declaration block. The declaration block is enclosed in braces and it can contain several individual declarations, which are separated by semicolons. Each declaration has a property (in the examples above, color) for which a value is specified. That’s it!

3. What you need to make a child theme

NECESSARY

  • FTP access to your site (sites on wordpress.com don’t offer this) and an FTP client.
  • A text/code editor (like the Windows Notepad, but preferably better).
  • A parent theme. In the examples I use Basic2Col: wangenweb.com/wordpress/themes/basic2col — Most likely, you will be able to follow the examples by using any good theme as a parent (you’ll just have to adapt some names in the example stylesheet). You may also want to look at this review: Five clean, minimalist themes for WordPress - op111.net — all 5 themes work well with child themes. (All tested!)

RECOMMENDED

  • Firebug, a Firefox extension.
  • A reference on HTML tags and CSS properties. I use the ones by HTML Dog.
  • A CSS validation service to be sure that your CSS code is valid.

Before continuing, please look at the links at the end. They include recommended tools (for all platforms), resources, and a few good references. I find it essential having a couple of references open in tabs when I play with HTML and CSS.

4. Assembling a child theme: the framework

4.1. Step 1

Open your text editor, make a new file, and paste the following into it:

/*
Theme Name: Kid
Theme URI: http://op111.net/
Description: Child Theme for Basic2Col
Author: Demetris
Author URI: http://op111.net/
Template: basic2col
Version: 0.1
*/
 
@import url("../basic2col/style.css");

Adapt the two URIs (Uniform Resource Identifiers) and the Author’s name, and save the file as style.css somewhere convenient.

NOTES

  1. The name of the stylesheet —style.css— is important. The child theme will not be recognized by WordPress unless a file with this exact name is found in its directory.
  2. The part between /* and */ is how WordPress identifies the theme, in order to display it in the administration panel. This part is ignored by browsers, since everything between /* and */ is a comment in CSS syntax.
  3. The Template line is important, since it declares the parent theme. The parent must be declared by the name of its directory exactly as you see it, case-sensitively — not by the name of the theme. Often the two are different.
  4. The @import rule must precede all other rules. That is, any styling rules you add must be placed after it. (If you put rules before it, it will be invalidated, and the parent stylesheet will not be imported.) — What this rule does is giving an instruction to the browser when a page is viewed: “Go to the parent directory [the meaning of the double dot in directory browsing], get into the directory basic2col, get the content of style.css and @import it here.”

4.2. Step 2

Make sure that the parent you declared is present in your installation. If it is not, upload it to the themes directory.

In the same directory —wp-content/themes— make a new directory and name it “kid” — or anything you like; “kid” is just the name I use in the examples.

Technically, your child theme is ready. You can upload style.css to the directory “kid” and activate the child theme from the administration panel — but the child theme will look exactly like its parent, since it inherits everything from the parent without adding anything of its own.

Now you can start adding rules to the child’s stylesheet. Finding the rules and values that do what you want can be a pain sometimes, but there is a tool that makes all this a breeze. Let’s have a quick look at this tool:

5. Using Firebug

Install Firebug in Firefox: getfirebug.com — Now see the next 3 steps on how to use it to inspect CSS information and edit it live.

Right-click on an item on a page and select “Inspect Element”. Here I’m looking for the styling of some fixed-width text:

A panel emerges with all the information you may need. Now you can inspect:

Click on a value to edit it. Once you are satisfied with the result, copy the value and paste it in the stylesheet you are preparing.

Hitting Escape cancels editing, while Enter makes the change stick until the next page refresh. This means that you can inspect and edit items, one after the other, and have the combined result of your changes updated live the whole time.

6. Adding CSS rules to your child theme

The theme I use as a parent in the examples is Basic2Col. I selected it because it is one of the themes made with child themes in mind, and, for this reason, very easy to work with: wangenweb.com/wordpress/themes/basic2col

6.1. Changing the style of links

Suppose you want to change the dark red of hyperlinks in Basic2Col. You prefer green. Right-click on a link to inspect its styling:

Firebug reveals that this dark red is #660000 — that is, in decimal, rgb(102,0,0).

Stylesheets understand both hexadecimal and RGB chromatic notation. In RGB notation you can use either absolute values or percentages. They also understand some colour names. So, white and #ffffff and rgb(255,255,255) and rgb(100%,100%,100%) are all valid and equal in CSS syntax.

Right-click on the value and start typing. In the screenshot I’m starting from the green with the same saturation and brightness, that is, #006600.

Firebug automatically updates the display as the chromatic value is edited.

After trying all kinds of green, you finally settle for the one you started with: #006600. (Hypothetical here but happens all the time!) Add this to your stylesheet:

a:link, a:visited {
    color: #006600;
}

Now, you don’t know this yet, but, as soon as you activate the child theme, links will stop changing colour on hover. (If you are interested in a detailed why, see links at the end.) To preserve the setting of the parent for hovered and active links, find the rule the parent uses and add it to your stylesheet, after the rule for links and visited links:

a:hover, a:active {
    color: #666666;
}

6.2. Adding a font

The links are styled to your satisfaction now. Something else you will probably want to experiment with in any theme is fonts. Let’s see what fonts Basic2Col uses. Right-click on some text to inspect:

The first thing you notice is that paragraphs inherit some font styling, including font-family, from the body, for which ten fonts are specified, in order of preference. To try a different font, type its name before any other names, and then a comma. (If the font has spaces in its name, it is good practice to enclose it in quotation marks.) In the screenshot I’m trying a Microsoft ClearType font, one of the so-called “C” fonts:

If you are satisfied with the result you see above, paste this into your stylesheet and you are done with this part:

body {
    font-family: Candara, "Lucida Sans Unicode", "Lucida Sans",
        "Trebuchet MS", "Lucida Grande", "Bitstream Sans Vera",
        Verdana, Arial, Tahoma, Helvetica, Sans-Serif;
}

6.3. Hiding an element

Now let’s try something different. In the previous two examples we edited values of existing properties, to override declarations imported from the parent stylesheet. In the next example we will add a new declaration to a rule.

The search box in Basic2Col has a title above it: “Search”. This is not necessary. It’s obvious what that box does; it even has a button next to it saying “Search”. Is it possible to make this title go away, and reclaim the space it takes, without meddling with files in the parent theme? — It is!

By inspecting this element you find that the selector you want is:

#searchform label

... which means: label but only if it is within the division uniquely identified as searchform. Click on its declaration, hit Tab to start a new line, type display — then hit Tab again and type none — see the screenshot:

The title of the search box disappeared!

It did, but something is not right now! Without its title, the search box does not look properly aligned. It needs to be moved a bit to the left. This is not difficult to do, but let’s say, for the sake of brevity, that you didn’t notice it and that you are satisfied with the result. Put this in your stylesheet:

#searchform label {
    display: none;
}

You don’t see anything else you would like to change for the time being. (And if you see something later, you can always open your stylesheet, add or remove anything you like, and upload it again to the directory of your child theme.) Let’s see what we have by now:

7. Putting it all together and activating the child theme

In a few minutes you constructed 4 CSS rules: 2 for links, 1 for fonts, and 1 to hide something from display. If you pasted the result of each step into your stylesheet, it must look like this now:

/*
Theme Name: Kid
Theme URI: http://op111.net/
Description: Child Theme for Basic2Col
Author: Demetris
Author URI: http://op111.net/
Template: basic2col
Version: 0.1
*/
 
@import url("../basic2col/style.css");
 
a:link, a:visited {
    color: #006600;
}
a:hover, a:active {
    color: #666666;
}
body {
    font-family: Candara, "Lucida Sans Unicode", "Lucida Sans",
        "Trebuchet MS", "Lucida Grande", "Bitstream Sans Vera",
        Verdana, Arial, Tahoma, Helvetica, Sans-Serif;
}
#searchform label {
    display: none;
}

The visual result may be slightly different, depending on your editor. In Notepad++ I’m seeing this:

Now upload the stylesheet to the child theme’s directory and go to the administration panel, Design, Themes, to activate it. (The child theme will not have a thumbnail screenshot. You can add one to its directory if you want, and it will be detected by WordPress, but it is not of much use unless you intend to publish the theme.)

If in preview your theme looks exactly like its parent, empty your browser’s cache and retry.

If everything looks good in preview, you can now activate the theme. Congratulations! Your first child theme is on the air!

8. Notes

You really made it all the way down here? Thank you for reading!

9. Links

9.1. Parent themes

Almost any good theme can be used as a parent theme, but here are three more that are designed with child themes in mind:

plaintxt.org/themes/sandbox
Sandbox by Andy Skelton and Scott Wallick. The mother of all parent themes.
themehybrid.com/themes/hybrid
Hybrid by Justin Tadlock.
themeshaper.com/thematic-for-wordpress
Thematic by Ian Stewart.

9.2. Tools, Software

bluefish.openoffice.nl
Default editors in Linux distributions are more than enough for such tasks. If you want to try something else, Bluefish is good. Look in your distro’s repositories (Debian and Ubuntu have it).
cyberduck.ch
Cyberduck: Good, free, open-source FTP client for Mac OS X.
fireftp.mozdev.org
FireFTP: “a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers”.
getfirebug.com
A Firefox extension to “edit, debug, and monitor CSS, HTML, and JavaScript live in any web page”.
jigsaw.w3.org/css-validator
CSS Validation Service. To validate your CSS code.
mozilla.com/firefox
There is no escaping Firefox! — obviously, to use Firebug, you need Firefox.
notepad-plus.sourceforge.net
Notepad++ is a good, free, open-source text/code editor for Windows.
Notepad2, with the same basis as Notepad++, is simpler but fine for most tasks: flos-freeware.ch/notepad2.html
smultron.sourceforge.net
Smultron: good, free, open-source text/code editor for Mac OS X.

9.3. Tutorials, References

codex.wordpress.org/Theme_Development
Has a short section on child themes.
extralogical.net/2008/08/theme-inheritance
In WordPress 2.7 you will be able to do more things with a child theme. The creator of the theme Tarski talks about the possibilities opened.
htmldog.com
“The Best Practice Guide To XHTML and CSS”, by Patrick Griffiths. It really is the best!
htmldog.com/reference/cssproperties
“Information about all of the valid properties belonging to the CSS 2.1 standard”.
htmldog.com/reference/htmltags
“Information about all of the valid tags belonging to the latest version of strict XHTML”.
reference.sitepoint.com/css
SitePoint CSS Reference.
themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades
The author of the theme Thematic explains how to make child themes. — The alliteration is unavoidable!
themeshaper.com/functions-php-wordpress-child-themes
Another article by the author of Thematic: How to use custom PHP functions in your child theme.
wangenweb.com/2008/07/creating-wordpress-child-themes
Another how-to on child themes, this one by the designer of Basic2Col.

9.4. Further reading

meyerweb.com/eric/css/link-specificity.html
Eric Meyer explains why the order in which we add link rules to a stylesheet is important.
w3.org/TR/CSS21
The CSS 2.1 specification.

Changes

2010-12-16
Removed link to Italian translation. (Page has disappeared.)
2009-03-29
Replaced Stylegala CSS Rererence link with SitePoint CSS Reference link in 9.3. Several other edits.
2009-02-21
Added link to Italian translation. Thanks, Danny!
2008-12-22
Replaced Structure (Links, Parent themes) with Hybrid, the latest theme by J. Tadlock.
2008-09-01
Added links for parent themes, spell-checked, several other edits.

Responses (262)

Pingbacks (88)

  1. [...] been playing with the layout of the blog tonight. The Wordpress child themes actually work really well. Sort of inheritance for theme templates. Anyway, if anyone sees anything [...]

  2. [...] a more comprehensive tutorial on how to create a child theme try this article over at [...]

  3. [...] How to make a “child theme” for WordPress. A pictorial introduction for beginners – op11… – [...]

  4. [...] that’s where you need to read How to make a “child theme” for WordPress. A pictorial introduction for beginners (I like the simplicity of that blog’s permalinks… no obsession over [...]

  5. [...] final încă o recomandare: How to make a “child theme” for WordPress. A pictorial introduction for beginners. Ar fi cam greu să spun că e un material pentru începători, deşi ar putea încerca şi ei. [...]

  6. [...] you think to yourself, “how to apply this permanently? That tutorial at op111.net is great, but making a child theme for three tiny rules seems a bit too much. There must be another [...]

  7. [...] Subthemes (a.k.a. child themes) are added using the little discussed “Template:” setting in style.css. Special thanks to Op111.net [...]

  8. [...] Thord Daniel Hedengren ( who redesigned blogherald.com recently ) has announced that he will be using this feature on his upcoming “Notes Blog WordPress theme” If you need more information about how Child themes work, read this extremely helpful article. [...]

  9. [...] Demetris has written one awesome article on how to make a child theme in WordPress. This is one article which gives you a pictorial introduction, so if you are a beginner then you’ll find it extremely handy and can act as a good guide for you. Tags: child themes, Themes, WordPress [...]

  10. [...] How to make a child theme for WordPress [...]

  11. [...] How to make a “child theme” for WordPress. A pictorial introduction for beginners [...]

  12. [...] by Ian Stewart on ThemeShaper and a very good, for such a beginner like me, tutorial on op111.net. Those instructions introduced me to the basics of CSS code and (really very basic) programming in [...]

  13. [...] How to make a “child theme“ for WordPress. A pictorial introduction for beginners [...]

  14. [...] to Wordpress’ child theme functionality, the reskin was a matter of mere minutes, in fact the long part was the graphic work [...]

  15. [...] has put to together a pictorial for beginners using child [...]

  16. [...] بود، می‌دونم. این پایینی‌ها رو بخونید بهتره: How to make a “child theme” for WordPress. A pictorial introduction for beginners Creating WordPress Child [...]

  17. [...] How to make a “child theme” for WordPress This is the only guide you’ll ever need. It also has links to loads of other references that I need not rehash here. [...]

  18. [...] next, learn more about WP child themes. After that, kick one out. (Aggressive, I know.) This entry was posted in Web and tagged child [...]

  19. [...] How to Make a Child Theme [...]

  20. [...] “How to make a ‘child theme’ for WordPress” [...]

  21. [...] and among the first to propose a magazine-style layout. The 3.0 version allows users to implement child themes, has integrated support for WordPress 2.7 (paginated and threaded comments, stiky posts) and lots [...]

  22. [...] How to make a “child theme” for WordPress (for beginners) [...]

  23. [...] βάση/γονέα για τροποποιήσεις και επεκτάσεις μέσω ενός «child theme», δηλ. υποθέματος ή υιικού/θυγατρικού θέματος. Επίσης, γίνεται να χρησιμοποιηθεί όπως είναι, όπως [...]

  24. [...] How to make a “child theme” for WordPress. A pictorial introduction for beginners – op11… – The best instructions for creating a child theme for WordPress that I’ve found. [...]

  25. [...] How to make a “child theme” for WordPress. A pictorial introduction for beginners – op111.net [...]

  26. [...] How to make a child theme for WordPress: A pictorial introduction for beginners – op111.net. [...]

  27. [...] the way, for you techie types out there, this time I am attempting to create a child theme so this fatal error never happens [...]

  28. [...] means that the theme is really designed for creating child themes and give you a good staring point in doing so. My approach to the theme have simply been [...]

  29. [...] is a great post at op111.net explaining How to make a child theme for WordPress and rather than re-invent the wheel I would suggest a quick click and bookmark the article for [...]

  30. [...] How to make a “child theme” for WordPress. A pictorial introduction for beginners [...]

  31. [...] hen ad vejen, hvilke muligheder der var i den. Mine erfaringer er helt parallelle med andres (se fx How to make a child theme for WordPress). Dette indlæg prøver at forklare nogle af de begreber, jeg ikke forstod dybden af i [...]

  32. [...] any theme in WordPress can be a parent theme. You can read a tutorial about how to do this here. There are some limitations of how parent themes work in WordPress, so those are also shared by [...]

  33. [...] ThemeShaper forums are very helpful. These articles were just what I needed to get started : How to make a child theme for WordPress and How I used a WordPress Child Theme To Redesign My [...]

  34. [...] chose Hybrid for its overall feature list, its insistence on the use of child themes, and most of all, the robust support. There is a $25 annual subscription to the support forums, [...]

  35. [...] een andere map zetten om zo een ‘Child Theme’ te maken. Kijk voor een beschrijving op: How to make a child theme for WordPress. Op deze manier verander je het originele thema eigenlijk niet en krijg je geen problemen als je [...]

  36. [...] Using Wordpress can sometimes be really great, espessially as you can find so many plugins and themes, allthough somtimes the themes are great but the might just miss the one thing for you, insetead of going and customsing your own team a child theme can sometimes be the best way. To read about how you can make your own child them please have a look at “How to make a child theme for WordPress“. [...]

  37. [...] explain, I myself had no idea what a child theme was until I found an interesting article over at op111.  I wanted to create a theme that appealed to creatives, individuals and small businesses (or even [...]

  38. [...] themes. Child themes have been created from both of these themes; here’s a post that explains how to create a child theme (and why one can be so [...]

  39. [...] How to make a child theme for WordPress… — great guide to creating a child theme, or just understanding how one works. [...]

  40. [...] How to make a child theme for WordPress: A pictorial introduction for beginners [...]

  41. [...] How to make a child theme for WordPress: A pictorial introduction for beginners [...]

  42. [...] How to make a child theme for WordPress: A pictorial introduction for beginners [...]

  43. [...] handling client-specfic themes we will want a solid understanding of how to accomplish this. First, there is this tutorial which takes the Basic2Col framework as a starting point and walks you through how to build a child [...]

  44. [...] A very clear explanation on this subject can be found at http://op111.net/53. [...]

  45. [...] templates unchanged. Post has many interesting resources that can be useful for theme development. How to make a child theme for WordPress: A pictorial introduction for beginners – op111.net VN:F [1.8.0_1031]Rating: 0.0/10 (0 votes [...]

  46. [...] create a new custom theme, while building on top of a very sturdy foundation. And the addition of child themes to WordPress has made it possible to upgrade the framework, without having to change anything to [...]

  47. [...] found this really useful article on creating child themes which pointed me in the right direction. My test site is now working with that, and it all seems to [...]

  48. [...] otherwise your changes may get overwritten next time you upgrade your installation. There’s a simple guide to creating child themes here and check the Wordpress Codex for more thorough installation [...]

  49. [...] you are using a thematic child theme, the css file should [...]

  50. [...] Stattdessen erstellt man einen eigenen Ordner für das eigene Child Theme. Ein sehr umfangreiches englisches Tuturial zur Erstellung von Child Themes findet man bei op111.net. [...]

  51. [...] and start those engines. For those who are still new and need some help, I recommend starting with these two [...]

  52. [...] check out this blog post by WPTavern.Final, random thoughtsNote to self: Please start creating Child themes.Why isn’t After the Deadline built into WordPress.org?Genius Bar is incorrectly named. It is [...]

  53. [...] we go into the customizations, I encourage anyone who is modifying the theme to check out child theme-ing. By creating a child theme for your changes, you have the [...]

  54. [...] and start those engines. For those who are still new and need some help, I recommend starting with these two [...]

  55. [...] style.css, and add a comment to the new CSS file specifying the name of the parent theme.  You can read all about how to create a child theme here. Share and [...]

  56. [...] A lot of times you’ll really like a theme except for one or two things, and creating a child theme (in its most basic implementation) would allow you the change the things about your theme that you don’t like in an upgrade-proof manner.  If you are a developer, this is a great child theme intro. [...]

  57. [...] Un articolo dettagliato e “passo – passo” con tante illustrazioni. Ideale per iniziare anche se piuttosto datato. (dovrebbe esserci anche la versione italiana… ma non la trovo, mi date una mano?) [...]

  58. [...] bother you with a tutorial here, but if you want to learn more about how-to, the tutorial at op111.net is pretty [...]

  59. [...] links are all you need to get started: OP111.net WordPress Codex This entry was posted in Themes, Wordpress and tagged themes, wordpress. Bookmark [...]

  60. [...] How to make a child theme for WordPress: A pictorial introduction for beginners [...]

  61. [...] die das Verfahren verständlich machen. Eine hervorragende, detaillierte Darstellung findet man hier.) 1. Ein neues Verzeichnis im WordPress-Theme-Verzeichnis auf dem Webserver. 2. Dahin kommt [...]

  62. [...] add or subtract as much or as little as you want. To help you get there, check out this terrific step-by-step tutorial on creating a child theme and then tweaking it to suit your [...]

  63. [...] your customizations stashed in the child theme aren’t overwritten.  There’s a detailed tutorial on creating child themes at [...]

  64. [...] of observations about my initial experiences with the idea. For tutorials, please see for example How to make a child theme for WordPress: A pictorial introduction for beginners by Demetris at [...]

  65. [...] de departe cel mai complet tutorial și cu aplicabilitate generală este How to make a child theme for WordPress: A pictorial introduction for beginners. Ți se explică detaliat tot procesul, ai link-uri către resurse de frameworks și către [...]

  66. [...] Before we start it’s important that you understand what a child theme is. Read this guide from the WordPress Codex and also read a great explanation on the topic in this tutorial. [...]

  67. [...] There is a child theme tutorial for beginners at op111.com. [...]

  68. [...] For a detailed guide to child themes, see Child Themes or this great tutorial by op111. [...]

  69. [...] are some good places to learn about creating your own WordPress child theme. This entry was posted in My Projects [...]

  70. [...] are some good places to learn about creating your own WordPress child theme. tweetfacebookCategories: [...]

  71. [...] If you make changes the coding of your theme, chances are strong that those changes could be wiped by an update. A child theme is a mini theme that takes all the looks from the main theme but allows you to fiddle to your hearts content. But don’t be lazy. I used the One-Click Child Theme plugin because it was quick and easy. I paid for that when WordPress decided to punish me for my laziness and eat it for lunch. Do it properly. [...]

  72. [...] of the credit goes to two websites: Demetris’ How to make a child theme for WordPress tutorial and Es Developed’s Build WordPress Sites Fast with the Thematic Theme Framework [...]

  73. [...] deze op111.net voor de komende tijd onthouden. Voor jullie lezers niet interessant tenzij je nog eens wilt stoeien [...]

  74. [...] another theme which acts as its parent.For a detailed guide to child themes, see Child Themes or this great tutorial by op111.Theme StylesheetIn addition to CSS style information for your theme, style.css provides details [...]

  75. [...] my opinion, the best guide telling you all about how to create your child theme is over at op111.net. If you’re going to make a child theme, go there. It’s what I used primarily to get [...]

Comments (174)

  1. Moises says:

    I just started playing with child themes and something very funny is happening to me…

    After I activate the child theme, the WP headers at the style file (the comments defining the theme info) are disappearing.

    Has anyone seen something similar?

  2. demetris says:

    @Moises: That’s strange. The only way to change the contents of style.css is to open it in an editor. What are you seeing if you open the stylesheet in your browser?

    For comparison, here is the child stylesheet of op111.net: http://op111.net/wp-content/themes/dk/style.css

  3. Josh Wood says:

    I’ve been recommending this to almost everyone who asks a customization question about Simplish — since we update the theme pretty often it’s about the only way to keep up.

    Nice work, thanks for the resource.

  4. Marc says:

    Well done Demetris this is very helpful.
    Thanks a lot!
    Marc

  5. Juanan Ruiz says:

    Great, clear and very clever tutorial. Thanks a lot for all the effort you put in it. I blog with Wordpress and make little changes in some themes, but this is a very big (next) step to me.

    Greetings from Spain and thanks again

  6. brandon says:

    This is great to know. It doesn’t help me theme though, because I need to make changes to more files than style.css when I hack from an existing theme. Layout changes, etc. Is there a way to do that with child themes?

  7. Kerry says:

    This technique is getting more and more popular. Thanks for the tutorial. You have been bookmarked. :)

  8. Thanks, this was very helpful. I think I’m finally getting my head around it all!

  9. Drew Strojny says:

    Great tutorial.

    I used this method while designing a new theme before I ever saw this tutorial. To me this method just makes sense. It is a simple way to keep a “custom” stylesheet that will always override your imported stylesheets. As you said, this makes upgrading a breeze as well.

  10. laras says:

    what step to make thames in hand phone?

  11. Kim says:

    Thank you for this wonderful tutorial. It shed some light on the subject and finally made me understand how to make a child theme. I am currently working on my first one and not having many problems thanks to you!

  12. A very nice an indepth tutorial. Thank you very much

    regards
    Thinkjayant

  13. Great tutorial, I love how much detail you put into each step. Keep up the great work.

  14. Bill says:

    You have done a great job with this tutorial. Thanks for the step by step, well written guide. I like your layman’s approach to teaching. I hope you continue upgrading and adding to the tutorial.

  15. demetris says:

    Thanks, Bill! I’m planning on adding to the tutorial, possibly with a Part 2. Stay tuned! :-)

  16. Chiinook says:

    I’ve tried to use this technique to introduce a “grandchild” theme. I am currently running “Old School” which is a child theme of the “Hybrid” Template. I don’t like Old School’s styling but I love it’s functionality. But WP is telling me that I haven’t defined a template and therefore won’t recognize my stylesheet. I’ve rechecked names. Is this functionality limited to first-generation themeing?

  17. demetris says:

    @Chiinook:

    I think so. Because WP won’t recognize as a valid parent a theme without index.php.

    Here is what I’d do in this case:

    1. Make a CSS file with the rules you want to use to override the Old School rules you don’t like.

    2. Put this somewhere in your site. E.g.: http://example.net/wp-content/themes/chiinook.css

    3. Use a plugin that can modify the HTML head, to link to your stylesheet.

    At every page load your CSS will be loaded AFTER the parent and grandparent stylesheets, overriding any rules that come from them and conflict with its own rules.

    A very good plugin to use for this (linking to a stylesheet from the head element of HTML pages) is HeadSpace2. It has a module especially for this, called “Stylesheets”, and you can even use this module per page or per post.

    http://urbangiraffe.com/plugins/headspace2/

    If you try this approach, let me know how it went.

  18. daniel says:

    And another thank you. Great explanation. Just beginning to make changes, but the method makes sense now.

  19. Chris Reid says:

    Fantastic guide, I can’t wait to start playing around with a Thematic-based child theme. One small problem: I get a “template is missing” message from the wordpress admin panel when I try and activate my child theme. I copied the comment code exactly and all my directories appear to be in the right place. Does the directory for the child theme need anything other than a “styles.css” with the requisite code (and of course whatever changes I add)?

  20. demetris says:

    @Chris Reid:

    Chris, it might be the Template line. This must be the name of the template’s directory and it is case-sensitive. E.g., if you type Thematic instead of thematic, it won’t work and you’ll get the message “Template is missing” for your child theme.

    If it’s not that, can you paste the header of your style.css here?

  21. Chris Reid says:

    Thanks so much for taking the time to help. I triple checked the directories. Both thematic and my child theme (“iplj”) are in their own folders in the “themes” directory of my WP install. My child theme has just the “style.css” file in it and my thematic install is unmodified from whatever I downloaded from the official site. The thematic folder is titled “thematic” (definitely lower case “t”).
    Interestingly, WP seems to be picking up the “Theme Name:” field from my styles.css file, since the”Manage Themes” control panel displays the right name for my child theme even though it lists it under “broken themes: and says that the “Template is missing”. Anyway, what follows is the exact header of my style sheet (and again, thanks so much for your help):

    
    /*
    Theme Name: IPLJ Blog
    Theme URI: http://iplj.net/blog
    Description: 
    Version: 0.1
    Author: Chris Reid
    Author URI:
    Tags: 2 column
    Template: thematic
    .
    License: GNU GPL
    .
    */
    
  22. demetris says:

    Mystery solved! :-)

    It seems the file was edited in some rich-text editor—like WordPad—and was formatted in RTF (rich text format).

    See how it appears to a program that expects plain text:

    http://iplj.net/blog/wp-content/themes/iplj/style.css — UPDATE: Fixed now.

    Just use a PLAIN text editor that does not apply any formatting, like Notepad, or any of the others mentioned in the Links section.

  23. Chris Reid says:

    Of course! How silly of me (although I shouldn’t be surprised that Mac OS’s basic text editor defaults to rtf instead of plaintext). I saved as plaintext and it works perfectly now. Thank you so much for your help (and really prompt responses). Now time to get down to some coding.

  24. demetris says:

    @ Chris Reid: You are welcome, Chris. I’m glad we were able to solve this!

  25. aoda says:

    This is awesome. I finally get it, thanks to this step-by-step guide!

  26. Mags says:

    Wow!!! I can’t even begin to tell you how helpful this tutorial was. I am brand new on the blogging scene and still have so much to learn. This tutorial not only gave me the ability to “protect” the current theme I am using for my personal blog. But, also gave me a playground, so to speak, to begin learning CSS and start to understand the “guts” of a style sheet. I haven’t worked my way through this entire tutorial, I got seriously distracted once I installed firebug…what a powerful and helpful tool! Thanks so much for letting us know about it.

    I’m so excited, I want to share with you what I’ve been able to learn, simply because of the inspiration of this post. I, too, installed Basic2Col for my parent theme. Once I followed your instructions to make a child theme and started playing with firebug, this is what I was able to come up with! http://sandbox.frogforpeace.com/

    Thanks again so much for providing such a simple and accurate tutorial on making a child theme. Great stuffage!

  27. demetris says:

    Thanks, aoda and Mags, for the appreciation.

    @ Mags: Your frogs are delightful. And I agree about Firebug: it can be a serious distraction. :-D

  28. Alexa says:

    Hi – Thanks for this – it’s really helpful, but unfortunately, I’ve already put a theme live and made modifications to it already. Could you tell me how to basically take all I’ve got now and make that the child theme, and maybe then I can reload the original theme which I have in the original files? Thanks for your help –
    Alexa

  29. demetris says:

    @ Alexa: Alexa, I cannot think of an automatic way of doing this. Maybe you could use a diff/merge/comparison program (like WinMerge, Meld or KDiff3) to compare the original file with the modified file, see what your additions are and save them in a new file.

  30. Alexa says:

    Thanks for the reply. Can I not somehow just use my current files as the base for the child theme (copy or rename or something)? Then, reupload the entire theme to be the parent, back as the original? I’m just not sure if I need to start from scratch on the child when I already have what I want. Sorry – my first time at creating a child theme… thanks for any add’l help.

  31. demetris says:

    You can do that too but it’s not the best solution:

    Ideally, the child stylesheet should contain only rules you want to modify. If you include everything from the parent in the child stylesheet, even rules you don’t want to modify, then some of these rules might change (fixed/improved/etc.) in a future update of your parent theme, and then you will be stuck with the old rules, which will be in the child stylesheet overriding the changed/improved parent rules.

    What I suggested will take more time now but it’s better for future maintenance.

    Does this make sense? :-)

  32. Alexa says:

    Hi there –

    I gotcha. OK, I downloaded a trial of the Merge program from DeltaWalker (there is another one that’s a staff pic for Macs on Downloads but it’s out of my price range) – I’ll compare the code and pull out the differences. That should at least save me time and I don’t think I made that many outside the styles.css – just a handful in home.css, the carousel.css for my theme and then just a few minor on the php file.

    I appreciate the help – if only I had read FIRST! Well, now I know! :0)

    Alexa

  33. Missy says:

    Hi there. this is fantastic for the beginner! Thanks for doing this. I’m using the Thematic template for my blog and I want to change the link/hover/visited colors for the content body but when I change those, it ends up changing the colors for the entry titles as well. I can’t figure out for the life of me, how to select different color combos for the entry title and the content body. Could you share some insight? Thanks.

  34. demetris says:

    @ Missy: You can make a rule for all links and then make a specific rule for links in titles:

    .entry-title a:link, .entry-title a:visited {
        blah blah blah blah;
    }
    
    .entry-title a:hover, .entry-title a:active {
        blah blah blah blah;
    }

    Or, if you want to change only links within the article (post/page) content, you can just make a specific rule for that case:

    div.entry-content a:link, div.entry-content a:visited {
        blah blah blah blah;
    }
    
    div.entry-content a:hover, div.entry-content a:active {
        blah blah blah blah;
    }

    Does this work for you?

  35. Αflets says:

    Thank you really much. It really helped! At least i finally understood what was going on!

    (Φοβερός φίλε!)

    With respect,
    aflets

  36. Missy says:

    oooh. that definitely worked! thanks very much. i was missing the div. part.

  37. Alexa says:

    Hello again! I’m back for just a tiny clarification. Thanks to you – I was able to successfully create a child theme (I used DeltaWalker’s Merge software – worked fantastically) – so that’s great. But, I’m unclear what other “child” theme pages I can have. I’ve also made changes in this theme to:
    - home.css
    - nav.css
    - carousel.css (it has a carousel that auto pulls images and posts)

    and just a few in index.php about comment behaviors.

    Can you tell me if I just make copies of these like I did with the style.css for the CSS files? Or what about the index? Just trying to get back to my original designs. Thanks!

    Alexa

  38. Michael says:

    Best explanation of the way child and parent themes interact that I have come across in four hours of clicking around the web.

    I read it and said ‘of course’ as I slapped myself on the forehead. But I hadn’t had an ‘of course’ moment until now …

  39. uwiuw says:

    yeah, i think child theme is a great approach if you don’t want to create just a minor version of your theme. but is it make your theme load time longger cause you have to create two styleshette and make more http request to the server ?

  40. Hi. Per Demetris, Feb 23 post, I am having the same problem. 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!!!

  41. demetris says:

    @Marlita: What happens if you type the CSS URL in your browser. Do you see the file?

    The CSS URL should be something like: http://example.net/wp-content/themes/thematicoo/style.css

    @uwiuw: That’s right. But I think that one HTTP request is a small price to pay for the convenience and flexibility of a child theme. You can avoid the extra HTTP request by copying all rules of the parent stylesheet into the child stylesheet, and then adding your own rules. But then you lose some of the convenience and flexibility.

  42. Demetris, yes, I am able to see it in my browser. Now what do I do? Why won’t WP recognize it?

  43. demetris says:

    I just made a child theme for Thematic exactly like the one you have:

    http://op111.net/wp-content/themes/thematicoo/style.css

    … and it works fine. Try saving that and dropping it in you Thematicoo directory, to see if it makes any difference.

  44. Demetris, I think I’m retarded. I tried it and it is still telling me that it is incomplete.
    Could it be my directory structure:
    …net/blog/wordpress/wp-content/themes/thematicoo/styles.css?

    I see yours was shorter. I copied exactly what you typed. I set up my blog in a folder because I already have a site that I want to leave that up while I fix this one

  45. demetris says:

    @Marlita: I tried the exact same structure (/blog/wordpress/etc.) on a test installation, and it worked for me. So, in theory, yours should work too.

    Either we are missing something obvious or, perhaps, it is something to do with the version of WP used? (I’m using the latest beta of 2.8.) I’m afraid I can’t be of more help without access to the site and files.

  46. Great information all in one place. Thank you for taking your time to put it together. Parent/Child theme structures are becoming things of import for my next theme idea(s).

  47. Timo says:

    Hi Ho
    Is the “Workaholic” template not compatible with child templates? Child theme shows up in Wordpress but thumbnail is blank and theme has no styling. I’ve checked and double-checked everything! Using XAMPP on Mac OS 10.5

  48. demetris says:

    Hello, Timo!

    Is this Workaholic from Graph Paper Press? If it is, it works OK for me. Try this minimal stylesheet to see what happens:

    /*
    Theme Name:     Workaholic/Child
    Template:       workaholic
    */
    
    @import url("../workaholic/style.css");
    
    *   { color: red !important; }
    

    (It’s supposed to make all text red.)

    About the theme preview thumbnail:

    The blank thumbnail you see is normal. Preview thumbnails for themes (and child themes) are not generated automatically. If you want to have one displayed, you have to make one yourself, name it “screenshot.png” and drop it in the main folder of your (child) theme.

  49. Timo says:

    Thanks for the quick response Demetris!

    Unfortunately, still the same problem after adding your stylesheet. It shows up in WP as a new theme, but when previewed there is still no styling.

    Could it be an xampp issue?

  50. Timo says:

    I’m wondering if there’s a problem with my WP installation on xampp.

    Example: If I click on the About page link, on any of the themes, I get a 404 error. (I have edited and published the page)

    The path it is looking for is http://localhost/wordpress/about/

    Same with any of the posts.

  51. demetris says:

    It seems then that there is a problem with the XAMPP setup or with that particular WP installation on XAMPP.

    For what is worth, the Workaholic child theme works OK on my XAMPP (for Windows) setup.

  52. Timo says:

    Thanks again, Demetris. I also have a MAMP installation. I’m going to try installing WP and kid there. I will let you know how it goes.

    Cheers

  53. Timo says:

    Success! Thanks for hangin in with me, D

  54. AnotherAndrew says:

    So, I can’t get this to work. I know it is easy, but I am stuck.

    I am trying to activate my own child theme and I am getting the “template is missing” message. All the references to the parent is ok, case-sensitive, linked to, etc.

    I am testing locally using MAMP. I am starting to wonder if that might be a problem.

    Any clues?

  55. AnotherAndrew says:

    BTW, I can get some child themes to work, like monochromatic, but not catdrop.

  56. demetris says:

    Hello, Andrew!

    You could try a couple of different approaches to troubleshoot this.

    First, you could make a basic child theme and see what happens, or even make a completely bare child theme. Supposing the parent theme is Thematic, put into the CSS file of the child theme just this:

    /*
    Theme Name:     Thematic/Child
    Template:       thematic
    */
    

    Does it work? (The result should be a completely unstyled WordPress site.) If it works, you can start adding from there.

    Alternatively, you could make a copy of a child theme that works for you, like Monochromatic, and start from there, modifying, adding, removing etc.

  57. AnotherAndrew says:

    Demetris,

    Gracias! I tried that and it works.

    Apparently this:

    Version: 0.1
    .
    All Rights Reserved
    .
    

    was messing it up. Thanks again!

  58. jereerej says:

    Enormous…

    Great, great rich and very well done tutorial !

    Thanks a lot!


    jere

  59. Andy says:

    Superb tutorial, and not just for childs themes. I picked up a lot about all themes from this tutorial

  60. Duncan says:

    I am using thematic as a parent theme, they have a guide wiki http://themeshaper.com/thematic/guide/ but it is really thin on content. This tut is excellent so I wanted to add it as a link but they do not allow registration? it is a wiki?!?

    Thanks for getting me started

  61. demetris says:

    Hello, Duncan! Glad the tutorial was useful to you.

    The Thematic guide is indeed a wiki (I think it uses a wikification plugin) and, you are right, registration seems to be disabled at the moment. Maybe you could ask a question at the Thematic forum. Folks there are always helpful and responsive.

  62. visaap says:

    Thanx a lot for this reading.
    I saw the subject ‘WP Child Themes’ pass by many times but did not have the time to dig in to it. But now I had some, and it amazes me how easy it is and how this makes everything much easier to maintain!!!

  63. jeremyclarke says:

    hey man, you should turn your tutorial into a wiki page about child themes, the general one about theme development isn’t specific enough. It would be great to have somewhere to link to about child themes.

  64. demetris says:

    Hi, Jeremy! You mean adding it to the Codex? I don’t know… I think it’s too long and too detailed for the Codex. Maybe I’ll make a shorter one just for the Codex: 500 to 1000 words, a quick explanation of what a child theme is and how to install one, a sample child theme with a couple of CSS rules, and then half a dozen of selected links.

    Now that I think about it, I must do that. The Codex needs a page dedicated to child themes. Thanks for reminding me!

  65. jeremyclarke says:

    Perfect! Thanks man! If you’re looking for a model I think the ‘API’ style pages would make sense for this: “Child Themes API” See

    http://codex.wordpress.org/Shortcode_API

    and

    http://codex.wordpress.org/Widgets_API

    Good luck :)

  66. alvin says:

    I have a question. I’m planning to create a child theme for an existing blog, what about the existing plugins that were installed in the parent theme. does this mean that I have to install the themes again in the child theme?

    sorry if my question doens’t make any sense…im new to this…

  67. demetris says:

    @alvin: No, you don’t have to reinstall you plugins. A plugin that works OK with a parent theme will work OK with its child themes too.

  68. alvin says:

    @demetris

    thanks for your response. I’m currently trying to comeup with a child theme now. I’m having some confusions though coz my theme has 7 css files. I only created style.css in my child theme folder and have this lines

    /*
    Theme Name: Massive News
    Theme URI: mydomain.com
    Description: Child Theme 
    Author: Alvin
    Author URI: mydomain.com
    Template: massivenews
    Version: 2.4.5
    .
    This work is released under the GNU General Public License 2:
    http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    .
    */
     
    @import url("../massivenews/style.css");
    @import url("../massivenews/style-reset.css");
    @import url("../massivenews/style-text.css");
    @import url("../massivenews/style-grid.css");
    @import url("../massivenews/style-nav.css");

    Is it correct or do I only have to import the style.css?
    I assume it is (but still in doubt) coz my css codes are the one shown in the site however when I tried editing the navigation menus and the grid style by putting the codes still in the style.css (of my child theme) it is not working.

    Do i have to create those other css files in my child theme folder ? Do I need to put the same line (the first few lines in the beginning of the css file ) that I have for my style.css to the other css files ?

    need your expertise on this…
    hope this won’t be a hassle…

    thanks.

  69. demetris says:

    @alvin:

    If the extra styles are already imported in the stylesheet of the parent theme, you don’t need to re-import them. Just import style.css, and they will be imported along with it, since they are a part of it.

    (That said, re-importing the extra styles should not break anything. It would just increase the total size that visitors have to download.)

  70. alvin says:

    @demetris

    so if ever i need to do some changes in the style-nav.css of the parent theme, i will just put the ccs codes in the style.css (child theme folder ) and that will work ?

    i’m currently trying to do some changes now…
    thanks again demetris…

  71. demetris says:

    @alvin: Exactly!

    Rules in your child theme’s CSS will override rules of the parent CSS as well as rules of stylesheets that are imported into the parent CSS.

  72. Richard says:

    If only all tutorials were as well written and comprehensive as this one.

  73. alvin says:

    If ever you wanted to post a javascript ( analytics ) in the body of your blog. where will you place the code in the child theme? using functions.php?

  74. Malin Fabbri says:

    Great article, thanks. I’m trying to find Sandbox that you recommend. Can only find 2 column, but need 3. Where can i find this?

  75. demetris says:

    Hello, Malin!

    You will have to modify the @import rule in the Sandbox stylesheet. Sandbox comes with several alternative column layouts (they are in the the “examples” directory), and you can import into its main CSS the one you prefer. By default it imports 2c-l.css, that is: 2 columns, sidebar on the left.

  76. Malin Fabbri says:

    Hi Demitris,
    Thank you… that was almost TOO easy! I was looking for a more complicated solution. Thank you. I’ve got a good start here, but i’m stuck on one thing, I can’t seem to change the width of the columns. I would like the left column to be 210px and the “middle” 230 px… i do this in my child stylesheet:

    #container {
    margin:0 0 0 -440px;
    	 }
    
    #content {
    	margin:0 0 0 440px;
    	 }
    
    /* The left sidebar */
    #secondary {
    	width:210px
    	 }
    
    /* The middle sidebar */
    
    #primary {
    	width:180px
    	 }
    

    Though, no luck… i can’t get them to go all the way to the edge, and all the way to the top either… no matter what i do with margins and padding. Take a look here and you’ll see what i mean:
    http://www.alternativephotography.com/wp/?p=1
    Really appreciate any expertise advice!

  77. demetris says:

    Oh! You did it! Nice work!

    To the issue:

    div#container, div#primary { margin-top:2em; }

    These are the margins you need to override. Note that, since Sandbox uses div before the hash signs, you will need the div in your rules too, in order to override the Sandbox rules.

  78. Malin Fabbri says:

    Thank you! (Blushing!)
    Thanks for the code, that got rid of the space.

  79. Malin Fabbri says:

    Back again! Hope you don’t mind. I would like to make a submenu, with the same structure as NYT:
    http://www.nytimes.com/pages/sports/index.html
    I.e. when you click on “sport” you get the list of sports underneath on one line. Is that possible in Sandbox?
    This is how far i got (i.e. not very far):
    http://www.alternativephotography.com/wp/?page_id=46
    Is there someone I can pay to help me out here? :-)

  80. demetris says:

    The wp_page_menu() function of WordPress adds a class to the current menu item, and that could help you achieve a result like in the NYT menu. However, wp_page_menu() was introduced after the last version of Sandbox. Maybe you can achieve the same with Sandbox’s menu function, or maybe you will have to change to a theme that is up-to-date.

    But I’m afraid we are veering off-topic now. :-)

  81. Malin Fabbri says:

    Ok, I’ll ask the Sandbox designers to see if they know any tricks! Thank you so much for your help and time…!

  82. demetris says:

    @Malin:

    CORRECTION. The class I was talking about, current_page_item is generated in Sandbox too. Try playing with it to see if you can do something.

    I apologize for the misinformation. Cheers!

  83. karen lynn says:

    Thank you for writing a tutorial that is easy to follow! You saved the day.

  84. dot says:

    Hi!
    I’m trying to make a new child theme (I’ve made them before but it’s been a while).

    But I’m having a weird problem.

    When I refresh the page, there is a brief flash of the page as it would be with no style sheet, then it shows as expected.

    This happens even with nothing in the child style directory but the style.css with the header info and import statement.

    Am I doing something wrong? Any ideas what to do to avoid this? If I can’t fix it I’m going to have to modify the actual theme files, and I’d prefer not to do that.

    The test site that shows the problem is here:
    http://dabbledstudios.com/prototype/

    Thanks so much!
    Dot

  85. demetris says:

    @dot: I’ve seen that before, but your page loads without any flashing for me, in all browsers I tried: Fx 3.7, Safari 4, IE8, Opera 10.5. Is it OK for you now?

  86. dot says:

    I still see the issue on refresh in Firefox, but I hadn’t thought to try other browsers – it loads fine in Chrome for me. I wonder if it is my add ons to firefox (firebug, yslow, etc) causing the issue.

    That makes me feel better..

  87. demetris says:

    An extension like Firebug or YSlow could be the cause, yes, if it interferes with the cache in some way. An example would be the Firebug setting in the Net tab that disables the browser cache.

    I think you don’t need to worry. The page is OK.

  88. Ryan says:

    Hi Excellent tutorial. I am wondering if you can help me with my child theme? I am trying to change the background of a template that i am working on.
    The theme’s code is

    #container  { background: #d9f5d6 url(green/bgtile.jpg) repeat-x top left; }

    Is there any way of disabling the background-image url(green/bgtile.jpg) repeat-x top left?

    Your help would be most appreciated.

  89. demetris says:

    Hello, Ryan! You can disable the image, while keeping the background color, by putting this in your child theme’s stylesheet:

    #container { background-image: none; }

    For the relationship between the background property and the background-image property, see:

    http://htmldog.com/reference/cssproperties/background/

  90. Ryan says:

    Hi Demetris, thanks for responding to my question.
    I have already tried your solution with no success.
    I think the problem is that the theme i am using has multiple style sheets, which seem to override my child theme style.css. Is there a way to disable the style sheets?
    (The style sheets for the theme give various colour options)
    Thanks again.
    Ryan

  91. demetris says:

    That’s a very plausible explanation; that is, the additional stylesheets of the parent theme are loaded after the child theme’s stylesheet, overriding its rules. You can get around that by adding an !important declaration to your rule:

    #container { background-image: none !important; }

    If I were you, I would also ask the theme authors. Such complications are not uncommon in themes that have several stylesheets for skins/colour schemes/etc., and probably the theme’s author can suggest a better way to do what you want.

  92. Ryan says:

    Hi Demetris, You rock!!! The !important declaration just saved my sanity.

    Thanks!!

  93. melissah says:

    hello Demetris!
    i am using this as the parent.(see below)
    i made a folder called babyzack, and installed a file named style.css as you say to do.

    if you look below at the parent, it doesnt have a template line. i tried adding a template line but it doesnt work.
    in wp in themes it says i have “babyzack” but that its incomplete and must have a template.
    any ideas?
    best,melissa

    /* 
    Theme Name: Zack 990
    Theme URI: http://andreamignolo.com/zack-990/
    Description: A photoblog theme inspired by The Boston Globe’s The Big Picture.
    Author: A. Mignolo and Joshua Weinberg
    Author URI: http://andreamignolo.com
    Version: 1.1
    Tags: one-column, white, blue, fixed-width, threaded-comments, photoblogging
    
    License: GNU General Public License (GPL) version 3
    
    */
  94. melissah says:

    ok while i wait moderation, i figured it out.
    there isnt a theme: name you have to hand put it in exactly as it is in your root directory.
    in my case the directory that the parent lives in is spelled differently than the name of the theme.
    err!
    all in all a wonderful tutorial.
    ive spent 2 hrs and i have a theme wp recognizes!
    although it shows it as a blank page ;-)

    thx so much demetris! you do rock!
    melissa

  95. demetris says:

    Hello, Melissa! You are correct: WP recognizes parent themes by the directory name, which very often is different than the theme name. Maybe I should emphasize that a bit more (it is mentioned now in Section 4.1, Note 3).

    Glad you figured it out!

  96. Extensive introduction, glad I found it through Cozmolabs post. I will definitly give a shot at Wordpress Theming with the Thematic Framework as I’m really happy with it!

  97. Pali Madra says:

    Hi,

    Thank you for the great post.

    I was wondering if one can create a child theme of an existing child theme. What I’m trying to create a child theme of an existing studiopress child theme of Genesis theme. Somehow I cannot get it work by using
    Template: enterprise

    The folder of the enterprise theme on the website is enterprise.

    Thanks in advance.

  98. Anna B. says:

    If only all tutorials were this clear and concise – thank you so very much for an excellent guide to this process!

  99. demetris says:

    @Pali Mandra: In a way, it is in some cases possible to make a child theme of a child theme, but it is tricky. In general, however, it does not work for a simple reason: The theme that a child theme declares as its parent must have PHP templates, and most child themes don’t have templates of their own. (Or they may have a couple of templates but not the one that is required for a parent theme: index.php.)

  100. Doug says:

    Thanks for this!

    I’ve been looking for an easy way to add some flexibility to a theme I’m working on. You explained everything in a nice, easy to understand way. It must be easy to understand… I got it (I think)!

  101. Randall says:

    Thanks very much for the very informative tutorial! Your tutorial was very clear, and being able to create child themes will be very useful. I do have a question however. I came across your tutorial when I was searching for a way to change the existing unordered list bullets in the theme ‘Titan’. The original bullets are .gif files that look like an ‘x’. I wanted to change then to solid grey dots. I made a new gif image of a grey dot and uploaded it to the same directory as the original bullet gif. I was able to see the css code that related to the list item by using Firebug (which is great by the way). When I changed the image file name in the css code to my new bullet image using Firebug, I was able to see the change to the new bullets in the browser. I then created the child theme with this code:

    /*
    Theme Name: Kid
    Description: Child Theme for Titan
    Author: Randall Knox
    Template: titan
    */
     
    @import url("../titan/style.css");
    
    .entry ul li, .c-body ul li {
    background:url("../images/bullet1.gif") no-repeat scroll 0 0.3em transparent;
    display:block;
    margin:5px 0;
    padding:0 0 0 17px;
    }

    ‘bullet1.gif’ is my new bullet image. It seems that I uploaded and activated the child theme correctly, because I can see it the Themes window of the WordPress dashboard. However, when I activate the new child theme, the list changes, but to a list with no bullets. Is there some css coding that I’m missing? I was able to work-around this by changing the file name of my new bullet to the original bullet filename, and taking out the new css code. However, I’d like to know how to change the bullets just by using css. I’d appreciated any help, and thanks again for the great tutorial.

  102. demetris says:

    Hello, Randall!

    Put your bullet1.gif into the directory of the child theme. Then, in your stylesheet, specify the URL like this:

    url("bullet1.gif")

    The URL you were trying was pointing to an non-existing directory (themes/images), but, in any case, placing the image in the parent’s directory is a bad idea: The image will be deleted the next time the parent theme is updated, which is exactly what we want to avoid by using child themes.

  103. Francine says:

    Thank you!! This was very helpfull, i’m going to give it a try with my own first wordpress blog. :)
    best regards from Argentina,
    Francine

  104. Brian Reich says:

    Oh man, I’ve been doing this the hard way for so long :( I always created a new theme by copying and modifying the one that I wanted to change, or I’d just make my tweaks from within the Wordpress theme editor and lose them every time I updated the theme. This is going to save me a lot of headaches. Thanks so much!!!!

    Brian

  105. Jeremy says:

    Fantastic tutorial Demetris!

    I’ve been doing some major modifications on a theme for the past few years and they’ve never updated it (lucky for me), but I’ve been doing modifications to some of the PHP files as well (Header, Footer, Index, Search, etc.). Is there a way to modify those files in a child theme just as I can with the CSS files so I don’t mess up the parent theme?

  106. demetris says:

    Hello, Jeremy!

    A child theme can contain templates as well, which have priority over the templates of the parent. So for example, you can add a footer.php in your child theme, and it will be used instead of the parent’s footer.php. (Of course, overriding a parent’s templates makes sense up to a point; if you are going to override most or all of a parent’s templates, then you would be probably better making your own (parent) theme from scratch.)

    A child theme can also provide templates that the parent does not have. For example, if the parent uses a generic archive.php for all archive pages (tags, categories, authors, etc.), you can add to the child, say, a tag.php template, to have a more specific template for your tag archives.

    I plan to publish a couple of howtos dealing with child themes and PHP, so, if you are interested, remember to subscribe to the site’s feed. :-) You can also have a look at the WordPress Codex page, which explains the basics of child themes and PHP: http://codex.wordpress.org/Child_Themes

  107. Bradford says:

    Great tutorial! Thank you.

  108. Peter says:

    If only all tutorials were as comprehensive as this! Thanks Demetris.

    I have this working fine for the basic2col theme.. however I haven’t managed to get it working for the Berlin theme by Graph Paper Press.

    Any Ideas why? My child theme is recognised, and Berlin’s stylesheet seems to be importing fine but no changes I make in my child theme stylesheet (via the sites wp editor panel) are having any influence on the referenced Berlin theme.

    Any help would be greatly appreciated!

  109. demetris says:

    Hello, Peter, and thank you for your encouraging words!

    I had a look at Berlin and saw that it loads its stylesheets in a way that does not allow a child theme to register its own stylesheet. The only thing you can do about that is ask the developers at Graph Paper Press. (I know that some of their themes, like Modularity, support child themes, so maybe they can make that work for Berlin too.)

    Cheers!

  110. Peter says:

    Thanks for checking!

    Sure it’s a shame the Berlin theme is great, and perfect for a project I’m currently working on, so I may just edit the theme files for this one.

    Thanks for your help

  111. demetris says:

    You are welcome!

    If it’s only the style that you want to modify, you can also use a plugin like Safe CSS:

    http://wordpress.org/extend/plugins/safecss/

    In this way, you will be able to keep your custom rules separate and, most importantly, you will be able to upgrade without any trouble when a new version of your theme comes out. Give it a try and let me know what you think.

  112. Gouri says:

    Thanks for such a detailed tutorial, Demetris.

  113. Speedy says:

    Nice blog post. I’ve made changes to the CSS stylesheet and header.php and functions.php. I’ve created a child theme, placed the CSS file there, and it works OK.
    Two Questions: 1) After I copy the header and functions.php files to the child directory, how do I tell WordPress to use them?
    2) Why does it matter if the parent directory also has the modified files for a while? Once I update the theme they will be overwritten, right?
    THANKS!

  114. Thank you very much for you clear explanation, that’s exactly what I was looking for my site

  115. Claire says:

    Hi Demetris

    Thanks for such a helpful and clearly written tutorial. I am a Wordpress novice and was having problems creating a child theme before (didn’t realise that the Template field needed to be included) but now everything works perfectly!

  116. arturo says:

    Hi Demetris Tanks you I get created my Child themes, thank you. But now when I try to make some change by
    Write some css tags after @import url(’/../twenty ten/style/.css’) and nothing happen .
    I created a twentyten-child just on themes directory via my cpanel and created a style.css file (its format is text/css).I activated the child theme and I can read: Child Theme for twentyten
    The template files are located in /themes/twentyten. The stylesheet files are located in /themes/twentyten-child. twentytenchild uses templates from Twenty Ten. Changes made to the templates will affect both themes.Could you help me?

  117. demetris says:

    Welcome, Arturo!

    I had a look at your child theme and its CSS at cubaconf.com and it works correctly. Did you fix the problem?

    By the way, you don’t need to copy all CSS rules from Twenty Ten into the stylesheet of the child theme. Leave the Twenty Ten CSS untouched, and then add rules to your child theme’s CSS only for the things you want to change.

  118. Doug C. says:

    I followed along on how to make a child theme – created a new folder in “themes”, named it, inserted a stylesheet, added the correct heading and the @import line (with correct URL). But no other theme appears in Themes, except the Twenty Ten theme.

    Also, when I updated Twenty Ten it reverted everything back to the defaults. So having that other folder with the stylesheet really didn’t do anything.

  119. Doug C. says:

    I did manage to get the new theme to appear on the Theme page on a client’s site. However, it says, “The following themes are installed but incomplete. Themes must have a stylesheet and a template.”

    Description 2011-Weaver Stylesheet is missing.

    I have triple checked everything I wrote in the head of the child stylsheet and everything is correct. So I have no idea what is happening. As for my own site I don’t even get the child theme to appear on the Theme page. Still a mystery that one.

    Any help would be appreciated.

  120. demetris says:

    Doug, see what happens with this sample child theme for Twenty Ten:

    http://op111.net/u/twentyten-111-0.0.1.zip

    And let me know.

  121. Doug C. says:

    I’m not sure what to do with that. Do I make a new folder to put it in? What do I name the new folder?

  122. demetris says:

    Just install it via WordPress:

    1. Download the zip file to your desktop.
    2. Go to the dashboard of your site.
    3. Go to Themes, Install Themes, Upload.
    4. Install the theme and then activate it.

  123. Doug C. says:

    I tried installing it like you said and got the following:

    Incompatible Archive. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

  124. Doug C. says:

    I finally got my own child theme to appear on the Theme page, but it says “Broken Theme” just like my clients.

  125. demetris says:

    Doug, I sent you an email. Check your inbox.

    Cheers!

  126. Doug C. says:

    Ok, this is really interesting. I changed the name from 2011 to twenty-eleven and changed it in the stylesheet and now it appears on the Theme page. I guess WP can’t handle themes with numerical names. Now to figure out how to make the screenshot and if I need to have any more files inside the child folder (like functions, index, etc.).

  127. demetris says:

    Doug, it seems you were bitten by this bug:

    http://core.trac.wordpress.org/ticket/15306

    The report above is from a few weeks ago. The fix did not make it into 3.1. I suppose it will be in version 3.2.

    I will add a note to the tutorial.

    Cheers!

  128. Doug C. says:

    Demetri, thanks for your help. You stand above all the other places I’ve been because you actually respond to your comments. I appreciate that.

    Another question: now that I have the theme appearing on the Themes page, what other files (besides the style.css) should I have in there?

  129. demetris says:

    You are welcome, Doug. Thank for your kind words.

    About the extra files you can use in a child themes, I tried to answer your question at the thread you started on the WordPress forum.

  130. Ahnaf says:

    Thanks buddy. Can you please post a tutorial on function.php configuration and sidebar register.

  131. demetris says:

    Hello, Ahnaf. I will. The tutorial is almost ready. Subscribe to the site feed to get it right away when it’s ready:

    http://op111.net/feed/

    There is also a feed just for WordPress articles:

    http://op111.net/category/wordpress/feed/

  132. John Lortz says:

    Demetri… wonderful tutorial. I’m really new to this topic so it was perfect. One question… how do you think Thesis would be for a parent theme? Most consider it a “framework” but I suppose that’s a fancy name for just a powerful theme. I’ve tweeked Thesis, but never created a child theme for it. It seems like that should be my next step.

  133. Thanks for the concise – non-techy – approach to writing these instructions. Very helpful!

  134. demetris says:

    @John Lortz: I agree about the term “framework”. It is often used to mean exactly what you describe. About Thesis, I haven’t tried making a child theme for it but I would imagine it supports child themes. Have you asked at the Thesis forum?

  135. Joseph says:

    I’m wanting to re-install my blog in the “child” form, so I can further edit so I don’t run into any trouble when updating……

    is there anyway to take the settings I already currently have on the blog and change it to a child theme , or do I have to start ENTIRELY from scratch?

    Thanks so much !

    blog:
    http://www.pridefulengagements.com/blog

  136. demetris says:

    @Joseph: Hello, and welcome to op111.net! Have a look at my discussion with Alexa, who wanted the same thing: http://op111.net/53/#comment-1492

  137. Tom says:

    Hi Demitris. I developed my website a couple of years ago with an HTML editor and css editor. I would like to move that website into a WP environment. Researching the WP Codex uncovered the fact that I can upload my css file to a WP installation but not my index.html file and other page files. If I start with the basic WP Twenty Ten theme to create a child theme, how do I create/insert the same HTML code as my index.html file so that it can work with the css file?

  138. stella says:

    Hi, I have the problem that I already have a modified Theme and that’s why I do not dare update to the new released Theme… It was a while ago when I modified it and I just forgot which files have the modifications.
    Can I solve the problem with a child theme now or do I still have to figure out where the changes are and update the theme and then create the child theme? The modifications involve not only the stylesheet but a custom header and some others I think. I hope I could make clear what my problem ist… Thanks for any hint

  139. Carla says:

    Ugh, creating a child theme seems complicated. Can you please clarify the following for me? I’m new to WordPress. Updates to newer versions of WP and the Twenty-Ten theme are only done manually, correct? So I have control of when this happens? I’m thinking of simply adding /* XXX */ to the templates and CSS to help me find any changes I’ve made, backing everything up, and not bothering with the child stuff. The instructions confuse me, but I do love your website!

  140. Nick C says:

    Thank you for taking the time to write this. Seriously. It has, and will, save me so much time from the ol’ hack-every-version method.

  141. Hector says:

    Great explanation!! I am very new to this but love the challenge. So far I have a domain hosted by Bluehost – downloaded wordpress and will be working in the Cpanel. My next challenge is to down load the Theme Twenty Ten. I have also set the stlye.css aside for use. Here is where I get confused – Do I download the theme first then insert the stlye.css? And I insert the file Stlye.css in the Dashboard under editor? Thank you in advance.

    Hector

  142. Jan says:

    @Stella

    Got the same problem. Had to copy all manual changes to child style.
    My approach. I checked the date and MD5 values to identify which files where changed compared with a default installation I did in another directory. Once you know your files you can use Windiff or any other diff/patch creater to isolate your own modification. If you do copy enough lines before and after the change.
    With a little rework you now can recreated all your style definition and can put them in the child style.
    Once done, you can update all the templates you used without fear to lose your own changes.

  143. Great post! This will save me a lot of trouble and pain! I just wish I knew about it before I lost all of my tweaks from the recent upgrade ;-)

  144. Aditya says:

    Thanks a lot for this post! You’ve made it really clear and easy to follow. I end up customising the CSS of themes a lot, and every time there was an update, poof, customised CSS gone! This should be very useful. If only I’d known about this earlier.

  145. Cole says:

    This is a super helpful tut. I actually followed the link on the WP Codex because they did a poor job of explaining how to link the child and original themes (re: template).

  146. Ekendra says:

    Indeed very nice tutorial. Wish there was an extension on using functions.php for child theme.

  147. **EDITED**
    Very informative. If I understand correctly, as long as you add the appropriate code [@import url("../basic2col/style.css");] in the child theme, Wordpress will still run the original stylesheet but give priority to classes in the child theme.

    I have a question:
    Let’s say I have previously heavily modified the original stylesheet of a current theme and that it would be a pain to go through the whole stylesheet to figure out what I changed.

    Is it possible to just take the modified stylesheet and use it as child?

    If that works, it means all the classes will be repeated, will that cause noticeable delay in rendering the page?

  148. Sven says:

    Thanks for a great tutorial. This helped me create a child theme in no time at all.

  149. ryan says:

    thanks for this tutorial i feel like im getting somewhere and its well written than non-technical people like me can understand! so thanks. thefirebug tool is great by the way.

    i was just wondering, is there any more advanced tutorials you could recommend? for example stuff to do with layout etc… or should i just learn more about css instead?

    thanks again

  150. medhat says:

    How many Child themes i can create for one Parent theme???

  151. T. Brown says:

    I’m following the how-to instructions very closely but my child themes aren’t working. I got it work the first time but for other themes I attempt, they don’t show up in the Dashboard.

    Any suggestions?

  152. Nitin Chauhan says:

    Thanks for the great explanation, it’s very helpful :)

    Cheers!

  153. eric says:

    Great tutorial. Very well written thanks for taking the time….I have been looking for a way to show files in thumbnail thats clickable to blow up and print …what plugin are you using to do that? thanks again

  154. changing it says:

    THANKS

  155. Jen says:

    Gee, thanks so much for this! My theme came with no borders on my tables, which made for some messy data reporting. Got borders now, thanks to you!

  156. Eli Peters says:

    I get disappointed with tutorials that are frippant when it comes to the important “how to” stuff… eg. below

    “You can upload style.css to the directory “kid” and activate the child theme from the administration panel”

    This is an important step and needed to be explained in detail!

  157. Hi demitris, In your tutorial you’re using hex colours no? can you suggest me some good colour to hex converter? (online or tool) Thanks.

  158. Tom Nicholson says:

    If you’re getting the broken theme message:
    ‘The parent theme is missing. Please install the “Whatever” theme.’

    Use

    Template: xyz

    where xyz is the case sensitive name of the DIRECTORY of the theme, not the theme name!

  159. Jamien says:

    Thank you so much Demetris for writing from an exoteric perspective!!! Regarding post 106, I’d look forward to a tutorial on Child Themes and PHP—How to change some layout in PHP while leaving the rest open to updates. Your teaching style is human-friendly.

  160. pas irvanus says:

    Hi, I have problem with Twenty Eleven themes. I try to make wordpress child from this theme, but It seem wordpress refuse to recognize it. Here is the css
    /*
    Theme Name: Twentyeleven Child
    Description: Child theme for the twentyeleven theme
    Author: Your name here
    Template: Twenty Eleven
    */

    @import url(“../twentyeleven/style.css”);
    @import url(“../twentyeleven/rtl.css”);

    #site-title a {
    color: #009900;
    }

    Please help..

  161. demetris says:

    @pas irvanus:

    You have the Template line wrong. As I note in the tutorial, the template must be declared by the exact name of its directory. In the case of Twenty Eleven, the name of the theme directory is: twentyeleven.

    So, change that line to:

    Template: twentyeleven

    … and let me know if it works for you.

  162. pas irvanus says:

    Cool, thanks demetris. It work fine now

  163. Guy says:

    Thanks for the tutorial – comments provided a couple of solutions too, that import line was frustrating me.

    One thing for voting answers/comments – helps you find it when there’s so many.

    Cheers again :)

  164. diane says:

    Hi
    I have been trying to find out if changing wordpress themes through creating a child is ‘allowed’ with any theme.
    Are there any restrictions on using someone’s work to create something else? I want to make quite a few changes to the css which completely changes the look of the site I am creating. Do I need to keep the wordpress theme credit (when it looks so different – and maybe worse!). I did try and read one of those very long legal pages about it, but got lost.
    Thanks

  165. Eli says:

    This seems to imply you cannot create a child theme without ftp access to your site. However, you can just create a childtheme directory, put your stylesheet in and zip it. Then upload the zipped theme through the dashboard.

  166. demetris says:

    @Eli: That is correct. I am making a note to add instructions on how to zip and upload your childtheme folder. Thanks!

  167. Brad says:

    Thanks for the awesome tutorial. I feel really dumb for asking, because everyone else seems to understand.

    Section 1 of your tutorial says:
    “Is activated like any other theme, via the administration panel.”

    Umm. How do I do this?

    If I go into Appearance > Themes my child doesn’t appear.

    It’s definitely in the directory wp-content/themes/twentyelevenchild

  168. Brad says:

    I tried the refresh button, but my theme didn’t show.

    So I logged out of Wordpress and when I came back, my theme was there!

    Thanks again for the tutorial!

  169. monk says:

    can you please clarify this for me. lets say I want to modify a theme file… if I create the new child folder and make the css and tell it is a child of another theme, then will that trigger it to look in this folder for any modified template files too? I just can’t figure out how it would know to replace the modified theme file with the ones from the child folder, unless it gets that from pulling the css of the new child theme and that tells it to look in that folder first for any modified template files.

    thanks so much!

  170. demetris says:

    @monk:

    Exactly!

    When the active theme is a child theme, WordPress knows that it has to use files from two themes: the child and its parent. So, it makes a note of all the files of the two themes. Then, when WordPress needs a file, say a PHP template, that exists in both themes, it simply uses the file of the child theme and ignores that of the parent.

  171. Rachel says:

    Thank you so much for this tutorial, I have a much better understanding of how to create a child theme as a result. I’m using a new WP theme, Mon Cahier, which the developer suggested I create a child theme for. Mon Cahier only displays the full content of a post, and I want it to show an excerpt and then a ‘Read More’ link.

    This is the style.css I wrote following your instructions:

    /*
    Theme Name: mon-cahier child
    Theme URI: http://thenorthernist.com/
    Description: Child Theme for mon-cahier
    Author: The Northernist
    Author URI: http://thenorthernist.com/
    Template: mon-cahier
    Version: 0.1
    */

    @import url(“../mon-cahier/style.css”);

    Then I followed the developer’s instructions to copy the original content.php file into the child theme then make the following edits:

    Code snippets edited out by demetris.

  172. demetris says:

    @Rachel:

    What you want to do is relatively easy, even with no prior knowledge of PHP, but I am afraid you will have to ask the developer again as I am not familiar with Mon Cahier.

    One thing I notice though that may cause problems—but may also be innocent in this case—is a space in the child theme name in your CSS. Personally I avoid spaces in such places, and always use hyphens instead. So, for Mon Cahier, I would make certain both the child theme name and the name of the child theme directory name are spelled exactly like this:

    mon-cahier-child

    Cheers!

  173. Rachel says:

    Thanks for your reply. I’ll edit the name of the child theme and directory now as you’ve suggested then see if the developer has any further suggestions.

  174. sal says:

    Thank you – very clear!

Write a comment

Your email address will not be published. Required fields are marked *