Creating WordPress child themes is a slick way to make your own theme. All it takes are a few easy steps. Here’s an example using the standard Twenty Ten theme as the parent theme:
- modify the child-stylesheet to make things look how you want
- create child-directory for new child theme
- add template files to child-directory, if you wish
- upload child-directory to /wp-content/themes/
- activate new child theme
The child-stylesheet must be saved with the name “style.css” in the child-directory. The child-stylesheet header (which has to be at the top of the sheet) must contain a few lines that identify its parent theme, like so:
/*
Theme Name: Twenty Ten Child
Description: Child theme for the Twenty Ten theme
Author: Your name here
Template: twentyten
Version: 0.1.0
*/
@import url("../twentyten/style.css");
{put new style rules here}
You can add a line for the Theme URI: and Author URI:, if you like. Only the Theme Name: and Template: lines are required, the others are optional.
The @import rule indicates the directory of the parent theme and the location of the stylesheet. All you have to do is put in the new css rules below the import line.
That’s it!
If modifying the stylesheet doesn’t quite get all the changes you want, realize that you can add any template file to the child-directory and that will over-ride the parent file with the same name. For example, say you want to stick in a block for an advertisement right under the header image. Copy header.php and add a new <div> at the bottom of the page just below <div id=”main”> and stick the ad code in this division. Upload this new header.php into the child-directory and it will replace the one from the parent template.
Activate your new child theme and see how it looks!
Hi Liz,
Google thinks that you can answer my question 🙂
I was just wandering about and got thinking about child themes again. I have avoided it thus far as the release of the ‘new generation’ of wordpress and themes with functioning menus like twentyten, means that my endless ‘tweeking’ days are nearly over.
However…….should the urge prove too strong and I do follow your advice and set up a child theme, what happens during an update? My understanding is that the only the core files are altered and your personal mods are safely stored in your own child theme = no work needed. Upgrade and your site with its mods still works.
Is that right Liz or have I (yet again!) got the wrong end of the proverbial stick.
Thanks to you if you have time to say yeah or nay!
Stay well
Ian
Ian,
You’ve grabbed the right end of the stick!
When it comes time for WordPress to be updated, I can tell you for sure that everything will be updated smoothly with a child theme. Make no adjustments to the parent theme and instead place your design bits in the child theme. Maybe the only tricky part is to make sure to use the import function on the first coded line (after the comment header) in the stylesheet of the child theme. That way, you bring in all the css for the parent theme so nothing is lost.
I like the less-tweaking-required child themes, too. Let us know how you do!
thank you for this very useful blog hope to see it grow bigger soon
Thanks Tommy! Stop by again!!
Very useful blog hope to creating wordPress child themes Thank you for your sharing..
Welcome ads! Let us know how you succeed with creating your child theme.
Hey Liz,
Thanks for the post. I have a question though. I’ve set up my child theme and activated it. Everything seems to work fine. But when I go into my child theme stylesheet and make an update, as soon as I click ‘update file’ I get redirected to my homepage and I see no changes have taken place. I go back to the same source code (in Editor) and see that my changes didn’t take place – it went back to the original file. I did this a few times for a few different things and it’s always reverting back to the original.
How do I get around this??
Thanks!
Srdjan
Hi Srdjan,
Did you select your child theme from the drop down list of available themes at the top right of the theme editor? All installed themes will be in the drop down list. When you select a different theme in this list, the right side of the page will be updated to show the files in the theme you selected. That would be the most obvious thing to check, but I’m unsure why you’re being redirected to the homepage. Once an edit is made to a file using the editor and having clicked on ‘update file’, the editor should come back and say that the changes were made instead of going to another page of your site.
Let us know!
I made sure that my Child Theme was selected but it’s still redirecting me to the homepage without any changes being made. I’m not sure what’s wrong. Are there any other settings I should be looking at?
Thanks
Are you running the WP Firewall plugin? If so, this link will help:
whitelist IP for WP firewall plugin
Finally!!! Thank you so much. I’ve been searching the WordPress Forums forever and even posted my own ticket but nothing helped.
The firewall was the problem. I whitelisted my IP and the problem is solved 🙂
THANK YOU!
You’re very welcome, Srdjan! Glad to be of help. It would be great for others looking for this solution if you could post an answer to the boards where you posted a question. Thanks!
Good luck and keep bloggin’!