You don’t need to be a programmer or a WordPress theme developer to be able to do this. You’re not even starting from scratch. And if you hope to develop your own themes eventually, working with child themes is a good way to begin.
In this quick tutorial, you will:
- know what child themes are
- why they’re useful
- how to create your own child theme in just a few simple steps
Note that we assume that you are not a total beginner. You must be comfortable working with some code and have access to your local or remote server where your WordPress theme files are located.
All the tools you need are your computer, an Internet connection, and some design sense. Are you ready?
What is a child theme?
Photo Credit: ankakay via Flickr
First off, what is a child theme? The WordPress Codex defines it as:
“…a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.”
So basically, a child theme takes after the parent theme. It uses and adds to the parent theme’s attributes. It’s also not a full-blown, standalone theme. It needs the parent theme to work, so don’t forget to install the parent theme first.
Why use a child theme?
If you’re in the habit of tweaking themes to suit your requirements and aesthetic sensibilities, using a child theme will free you from the constraints of the parent theme, let you become more creative and save you hours of work.
Since you’re not modifying the original files of the parent theme, you don’t risk irrevocably messing it up. Instead, you work on a separate theme file that lets you safely make modifications and experiment. If something goes wrong, you can start over with your child theme or revert to the parent theme.
A child theme also preserves your customizations even when the parent theme is updated. There’s nothing more frustrating than to spend a sleepless night making your theme design unique, only to lose everything you’ve worked hard on in the next theme update.
Awesome. So how do you create a child theme?
There are a few ways of doing this. Some themes and theme frameworks come with ready-made child themes, and there are plugins that let you conveniently create a child theme based on your existing theme (though this does not work with all themes).
Here you’ll learn how to create a child theme manually, because that’s what’s fun, right? We promise it’s not rocket science. It won’t even take you an hour.
The fun part: child theme creation in just 5 steps
Let’s work with a default WordPress theme called Twenty Twelve. As of this writing Twenty Fourteen is the latest default theme, but we choose Twenty Twelve because it’s a very basic-looking theme.
Step 1: Create the child theme folder in your theme directory.
If your site is hosted on a remote web server, log in to your file manager or access your files via FTP. If you’re running WordPress using a local server like XAMPP, just navigate to the local directory where the theme files are installed. In wp-content/themes, in the same level where the parent theme is located, create a folder to contain your child theme files. You can name it any way you want, but be sure to not put any spaces in the folder name.
Step 2: Create the child theme stylesheet.
Next, create a file called style.cssin the child theme folder. Open the file and copy-paste the following:
Theme Name: Twenty Twelve Child Theme
Description: A Twenty Twelve Child Theme
/* =Theme customization starts here
Pay attention to these three:
- Theme Name – This will appear on your WordPress themes panel, so don’t leave this blank.
- Template – This is the template the child theme is based on. Copy the exact name of the parent theme folder. If you write “Twenty twelve” or “Twentytwelve” your child theme will not work.
- @import url("../twentytwelve/style.css"); - This references the path to the parent theme’s CSS stylesheet, which the child theme will load.
Here the information pertains to Twenty Twelve. If you choose another parent theme, change the lines accordingly. You can add the other details, but they are optional. This file will be the starting point of your customizations.
Step 3: Activate your Child Theme.
Go back to your WordPress admin panel and navigate to Appearance > Themes. You will now see your child theme among the themes listed. Activate your child theme. Note that you don’t need to previously activate the parent theme to make this work.
Step 4. Upload a screenshot or image for the Theme admin panel.
Did you notice that there’s nothing showing for the child theme on the Theme admin panel? Remedy this situation either by creating a screenshot of your child theme design (you can wait until you’re done with Step 5 below) or by creating a graphic to represent your child theme.
Fire up your graphics editor and create an image around 600 x 450 pixels. Name the image file “screenshot” and upload it to the child theme folder (where the style.css file is). Refresh your WordPress Theme admin panel. You should now see something like this:
Looks better, doesn’t it?
Step 5. Start styling!
You’re almost done! Now is the most important step – this is what you made your child theme for. You’re ready to add the customizations that will make your theme look unique. You can add your CSS tweaks directly using the Theme Editor in WordPress.
There you have it, that’s all you need to create your own child theme.
Examples: Twenty Twelve child themes
How your theme will look like is all up to you. The child theme is like your blank canvas – bring out your inner artist and get creative.
To show you what’s possible, here are some child themes based on Twenty Twelve. Can you do better?
- Deux Milles Douze - http://wordpress.org/themes/deux-milles-douze
- Just Pink - http://wordpress.org/themes/just-pink
- 2012C - http://wpsites.net/wordpress-themes/twenty-twelve-child/
- Blocomo - http://wordpress.org/themes/blocomo
- Polished - http://www.tipsandtricks-hq.com/twenty-twelve-child-theme-for-wordpress-polished-5167
- Crisp - http://www.tipsandtricks-hq.com/crisp-twenty-twelve-child-theme-for-wordpress-6389
- Accessible OneTwo - http://wordpress.org/themes/accessible-onetwo
- Harmony 2.0 - http://wordpress.org/themes/harmony-2-0
Child themes are a powerful way to make your theme design truly your own. We haven’t even explored adding templates and functions to further extend the capabilities of the parent theme, not just modify its looks. We’ll cover that in our future tutorials, so stay tuned!
Have you tried creating your own child theme? How did it go?