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
- How child themes work in WordPress
- How are themes modified without being modified?
- What you need to make a child theme
- Assembling a child theme: the framework
- Using Firebug
- Adding CSS rules to your child theme
- Putting it all together and activating the child theme
- Notes
- 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
- 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. - 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. - The
Templateline 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. - The
@importrule 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 directorybasic2col, get the content ofstyle.cssand@importit 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.
Similar articles and pages in op111.net
- Progressive enhancement of drop-down menus with the :not CSS selector
- WordPress: 20 answers
- Another three clean, minimalist themes for WordPress
- Five clean, minimalist themes for WordPress
[...] 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 [...]
[...] a more comprehensive tutorial on how to create a child theme try this article over at [...]
[...] How to make a “child theme” for WordPress. A pictorial introduction for beginners – op11… – [...]
[...] 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 [...]
[...] 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. [...]
[...] Read it over at Op111.net [...]
[...] 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 [...]
[...] Subthemes (a.k.a. child themes) are added using the little discussed “Template:” setting in style.css. Special thanks to Op111.net [...]
[...] 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. [...]
[...] 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 [...]
[...] How to make a child theme for WordPress [...]
[...] How to make a “child theme” for WordPress. A pictorial introduction for beginners [...]
[...] 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 [...]
[...] How to make a “child theme“ for WordPress. A pictorial introduction for beginners [...]
[...] to Wordpress’ child theme functionality, the reskin was a matter of mere minutes, in fact the long part was the graphic work [...]
[...] has put to together a pictorial for beginners using child [...]
[...] بود، میدونم. این پایینیها رو بخونید بهتره: How to make a “child theme” for WordPress. A pictorial introduction for beginners Creating WordPress Child [...]
[...] 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. [...]
[...] How to Make a “Child Theme” for WordPress [...]
[...] next, learn more about WP child themes. After that, kick one out. (Aggressive, I know.) This entry was posted in Web and tagged child [...]
[...] How to Make a Child Theme [...]
[...] “How to make a ‘child theme’ for WordPress” [...]
[...] 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 [...]
[...] How to make a “child theme” for WordPress (for beginners) [...]
[...] βάση/γονέα για τροποποιήσεις και επεκτάσεις μέσω ενός «child theme», δηλ. υποθέματος ή υιικού/θυγατρικού θέματος. Επίσης, γίνεται να χρησιμοποιηθεί όπως είναι, όπως [...]
[...] 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. [...]
[...] How to make a “child theme” for WordPress. A pictorial introduction for beginners – op111.net [...]
[...] [...]
[...] How to make a child theme for WordPress: A pictorial introduction for beginners – op111.net. [...]
[...] the way, for you techie types out there, this time I am attempting to create a child theme so this fatal error never happens [...]
[...] 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 [...]
[...] Tutorial link [...]
[...] 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 [...]
[...] How to make a “child theme” for WordPress. A pictorial introduction for beginners [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] Anleitung zum Bau eines Child-Themes für WordPress [...]
[...] 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, [...]
[...] 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 [...]
[...] 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“. [...]
[...] 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 [...]
[...] How to make a child theme for WordPress [...]
[...] How to make a child theme for WordPress [...]
[...] How to make a child theme for WordPress [...]
[...] 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 [...]
[...] How to make a child theme for WordPress… — great guide to creating a child theme, or just understanding how one works. [...]
[...] How to make a child theme for WordPress: A pictorial introduction for beginners [...]
[...] How to make a child theme for WordPress: A pictorial introduction for beginners [...]
[...] http://op111.net/53 [...]
[...] How to make a child theme for WordPress: A pictorial introduction for beginners [...]
[...] 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 [...]
[...] How to make a child theme [...]
[...] A very clear explanation on this subject can be found at http://op111.net/53. [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] you are using a thematic child theme, the css file should [...]
[...] 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. [...]
[...] and start those engines. For those who are still new and need some help, I recommend starting with these two [...]
[...] 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 [...]
[...] 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 [...]
[...] Browse Tutorial [...]
[...] and start those engines. For those who are still new and need some help, I recommend starting with these two [...]
[...] 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 [...]
[...] 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. [...]
[...] 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?) [...]
[...] bother you with a tutorial here, but if you want to learn more about how-to, the tutorial at op111.net is pretty [...]
[...] links are all you need to get started: OP111.net WordPress Codex This entry was posted in Themes, Wordpress and tagged themes, wordpress. Bookmark [...]
[...] How to make a child theme for WordPress: A pictorial introduction for beginners [...]
[...] 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 [...]
[...] and child themes* (separate [...]
[...] 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 [...]
[...] your customizations stashed in the child theme aren’t overwritten. There’s a detailed tutorial on creating child themes at [...]
[...] 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 [...]
[...] 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 [...]
[...] 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. [...]
[...] There is a child theme tutorial for beginners at op111.com. [...]
[...] For a detailed guide to child themes, see Child Themes or this great tutorial by op111. [...]
[...] are some good places to learn about creating your own WordPress child theme. This entry was posted in My Projects [...]