UPDATE December 2016: Please see the post Child Themes: Enqueuing the parent theme stylesheet instead of using @import
On a previous post I stated that it was very easy to create a WordPress child theme from an existing theme.
We also saw on that post that a child theme is a perfect solution to ensure that your modifications to the theme will never get lost after a parent theme update, no matter how heavy your customizations are.
On that post we didn´t get into the details of creating a child theme. As I said, there are lots of great posts explaining how to create a child theme. Just in case you´ve missed any of them so far, I´ve decided to write my own tutorial. And I´ll do it insisting on how easy it is.
That said, if you already know how to create a WordPress child theme, I don´t think you will learn anything new here. On the other hand, if you are not familiar with child themes, I hope this post will clarify concepts for you and will leave you itching to create your first child theme right now.
Don´t be afraid (1) – It´s much easier than you thought!
At the beginner level this subject is surrounded by an inexplicable mystery halo. I don´t really know what the reason for this is, but for somebody who doesn´t know the basics of child themes or how to create one, the whole thing usually appears like something to be done by an expert. Oh well, if that is so, you will become an expert after reading this basic tutorial!
So the first thing I would like to point out is how really easy is to create a WordPress child theme, and I want you to never forget that.
Don´t be afraid (2) – You can´t break it!
Just one more thing before we get into the details: no matter what you do, you can´t break anything. I mean, some methods can be easy (and believe me that creating a child theme is) and at the same time they can be dangerous, but that´s not the case when creating a child theme. I promise.
The simple explanation for it is this: since you will not be interfering with the original theme´s files, there is nothing to be afraid of. As a matter of fact, directly tweaking your theme would always be riskier. And that´s the second thing I want you to remember.
So, let´s go!
Now that we have lost our fears about creating a child theme, let´s get our hands on it. There are just a few steps involved, only three of which are really necessary:
- Create a new folder for your child theme.
- Create a new style.css file inside that folder.
- Edit the style.css file filling it up with your information and a couple of things which are needed for the child theme to work.
I am aware that, after reading this short list of steps, some less experienced WordPress users might say something like: “wait, wait, Luis, you´re cheating us! you just said that I couldn´t break anything and now you tell me to create folders and files, and that means accessing my server which scares me to death because I could screw something up, besides I don´t want to mess with ftp and all that stuff”. Or maybe somebody would not be afraid of those things but just wouldn´t know how to do them.
If that is your case, I´ve got good news: there is an even easier way for you to handle those tasks, directly from your WordPress admin area. So if you don´t feel like dealing with ftp or are just afraid of doing something wrong, you can jump directly to “The easier way”, where the number of steps involved in creating a WordPress child theme is even lower.
Once you had completed those steps, you would have technically created a child theme. You could go ahead and activate it, and it would work. It wouldn´t do or show anything different from its parent theme though, so if you want to customize your theme you will need to do some other things, like:
- (Optional) Add whatever CSS rules you want – this is optional in theory but otherwise, why would you want a child theme?
- (Optional) Add new functions
- (Optional) Add new templates
- (Optional) You can also add a screenshot so your child theme can be easily recognized
Now let´s get started with the regular (and easy) way of doing it (remember that you can always jump to the easier way):
Step #1: Create a new folder for your child theme
The first thing you need to do is to create a new folder inside the themes directory of your WordPress installation (“/wp-content/themes/”). You´ll need a FTP client such as Filezilla to access your site via FTP. Once you are connected and logged in, get into the themes directory and create a new folder, right at that level inside the themes directory. Note that your new folder will be side by side with whatever other themes you may have installed, including the one you are going to use as the parent theme for your new child.
For this tutorial I´m going to use a site called “Tutorial Test Site” and I´m going to create a child theme for the brand new Twenty Twelve theme. I´ll call it “New 2012 Child Theme”, so the name I´m giving the new folder is “new-2012-child-theme”.
You can use whatever name you want for that folder, but make sure to choose one that makes sense. The logical way to go is to use the name you will be giving your child theme, so that is what you should do. It is also a good idea to always use the word “child” within the name of any new child theme folder, and including the name of the parent theme as well would make everything clearer.
Step #2: Create a new style.css file
You will only need one single file to create a child theme, and that is its stylesheet. You may have more files as we´ll see later, but a style.css is the only one that is really required.
At the top of that file an information header must be present. The information header consists of some commented lines, some of them being absolutely necessary while others are optional.
There are two lines that should be in the information header for your child theme to work. Both are used to tell WordPress decisive things:
- The name of your new theme
- The theme that your child theme will be using as its parent
We´ll be dealing with those lines in the next step. So now open up any text editor such as Notepad++, create a new file, and save it as style.css inside the folder you have just created.
Step #3: Fill the stylesheet with the required information
On the top of your new style.css file, write a few commented lines which will form the information header:
The two lines that I´m calling out by means if the red arrows are the ones which must be there necessarily. On the “
Theme Name:” line you can write whatever name you decided to give your child theme. As for the “
Template:” line, it has to exactly match the directory name of the parent theme. Be aware that it is case sensitive.
The lines in between are optional, but it is a good practice to include them, filling them up with the URI to the site homepage, the author´s name, the author´s site URL and a brief description for the child theme. It is good to include a version number, which can be updated every time the theme is modified.
Remember that the the information header should be right at the top of your style.css.
Everything below the header will work as a regular stylesheet file, so there will be where you should put any new styling rules you want WordPress to apply.
And now comes a very important point. You may have noticed that I´ve already added one rule. Let´s see what it means and why it should be there:
A child theme’s stylesheet replaces the stylesheet of the parent completely, which means that WordPress won´t even load the parent’s stylesheet. So if you want to use the parent theme as a base and just make some modifications to its styling or layout, you will need to first import the stylesheet of the parent, and then make your modifications by adding the corresponding rules to your child´s style.css file.
That is why you need to include a line like the one you see under the information header. In this case, since I´m creating a child for the Twenty Twelve theme, I need to call the stylesheet for that theme, so the line should read:
@import rule should be put inmediately below the information header. If you put other rules above it, it will be invalidated and the stylesheet of the parent theme will not be imported. So always remember that there must be no other CSS rules above the
Go activate your new child theme!
Once you have completed the previous 3 steps, you end up having created a valid child theme, so let´s activate it. Go to “Appearance – Themes” on your site´s admin area and you will see your brand new child theme as one of the available themes to choose from:
You´ll notice that there is no preview image for the child theme. It doesn´t mean it is a blank theme (it is not, unless you forgot to add the
@import rule), it just means that there isn´t any screenshot image available for that theme.
Now go ahead, select and activate your child theme. I´ve already activated my new child, and added a nice picture for the header. Here it is:
By now my child theme looks exactly like its parent Twenty Twelve, but is a new and separate theme. I could start tweaking it as much as I want and, if at any future moment I update the Twenty Twelve theme, I will not lose any of the modifications I made or the functions or templates I added, because all those things will belong to my child theme only and will be in its own folder, not in the parent´s folder where the update will take effect.
That was easy, wasn´t it? I told you.
Now, let´s see the even easier way to create a child theme that I mentioned before:
The easier way: One-Click Child Theme
When I first started writing this post I suddenly realized that some people might find parts of the process either scary or out of their reach, while I was insisting on how easy it is to create a child theme.
Right away the creative part of my brain began flashing with an idea: Why don´t I make a plugin to automatically create a child theme?
Well, as usually happens in this our WordPress world, somebody had that very same idea before me. I checked the WordPress Plugin Directory and, sure enough, there it was. The plugin is called One-Click Child Theme, by Terry Chay.
Once you install and activate this plugin, a new “Child Theme” element will be visible on your “Appearance” menu:
The plugin is very easy to use. First you have to activate the theme you want to use as parent. Then simply fill out the name you want to use for your child theme, write a short description and your name, and you´re ready to go by clicking the “Create Child” button.
The plugin will automatically create a folder for your child theme based on the name you gave it, and a basic style.css file with a short information header and the needed
@import rule already included in it. It will even automatically activate your new child theme.
The plugin also puts a copy of the parent´s screenshot image into the child theme folder, so when you select the “Themes” option of your “Appearance” you are going to see this:
I don´t think it is a good idea that about the screenshot, though. Since you are creating a child theme with the intention of tweaking the original theme, the screenshot of your child theme should look different from the parent´s screenshot. But of course, you´ll need to add the modifications to your new theme before you can make a different screenshot of it.
You can view the content of the newly created stylesheet directly from your WordPress admin area, through the “Editor” option of the “Appearance” menu:
You can now use the editor to add your own CSS rules. Just remember to place them after the
@import rule. Click the “Update File ” button when you are done and go see your changes working. By using this editor you´ll avoid having to upload your style.css file to your server via FTP.
For example, I have modified my child theme just a little bit. I changed the blog title to a larger font size, made it normal instead of bold and changed its color to a navy blue. Then I used a light blue color for the navigation menu, adding also a little padding to it, and finally I also used a bluish color for the widget area background, where I had to add some padding too to make it look nicer. So this is how my stylesheet looks like:
So finally, this is how my Tutorial Test Site looks like after those changes (not a great design at all, but illustrative enough for the purpose of this post):
What do you think? That was even easier, wasn´t it? I promised you.
We have just seen how easy it is to create a WordPress child theme, and also that there is an even easier method. In many places you´ll find that all the tools you need to create a child theme are an FTP client (like Filezilla) and a text editor (like Notepad++). But if you don´t even want to mess up with those things, you´ve learned now that all you´ll need is just your WordPress and a plugin!
How about you? Have this post make you want to try and create your first child theme immediately? If so, what method would you choose?
Please let me know about your feelings and your progress through the comments!
Picture used for header of Tutorial Test Site courtesy of a great photographer, my brother Tete Alejandre