When it comes to making changes to your blog’s design, most of us turn to editing the CSS. The problem is that editing the theme right from the stylesheet can be dangerous. You can lose your changes when the theme updates. The best way to avoid this is by learning how to create a child theme.Editing a blog theme right from the stylesheet can be dangerous. Click To Tweet
How to Create a Child Theme
What is a child theme?
Let’s simplify this as much as possible.
Think of your blog’s theme as a mattress. It probably looks fine when you get it–it’s clean, simple, and boring. To protect your mattress and make it look nice, you need sheets. The sheets would be your child theme. You can change out your sheets as often as you want, but the mattress will stay the same. What’s more, if you wind up needing to update your mattress, you can without anyone knowing…because of the sheets.
Have I lost you yet? I’m pretty sure this metaphor is dying, so let’s move on.
Why is using a child theme important?
If you don’t know much about themes, then the part where I mentioned updating your mattress probably lost you. But that is one reason child themes are important.
When you install a theme, you can make changes to it directly. There’s nothing stopping you. But if you make changes and then the theme’s creator updates the theme (which happens a lot. Updating the theme is usually done to fix bugs or security issues that can pop up on their own or when WordPress is updated), then all of those changes will be lost.
So then you have to go back and edit all the files all over again. Not a big deal if you only changed the stylesheet (though it still sucks if you didn’t save your changes elsewhere). But if you had to change any of the .php files, that’s going to be a huge pain.
Another reason using a child theme is recommended is so you don’t have access to all of your files. If you only need to edit the style.css file, then creating a child theme with only the style.css is a great way to ensure you don’t edit the wrong file and break your site. (I’ve seen it happen. A lot.)Using a child theme keeps your changes safe and keeps you from editing the wrong file. Click To Tweet
Is setting up a child theme hard?
No! If you’ve been directed to WordPress’s instructions for setting up a child theme, then it LOOKS hard, doesn’t it? But it’s actually incredibly easy! Most of the work is copying and pasting.
To be honest, I put off installing a child theme for two years because it looked like it would be a pain and I couldn’t figure out how to do it correctly. When I finally got around to it, it was simple. Let me show you how to do it.Creating a child theme is easier than you think! Check out this tutorial! Click To Tweet
How do I set up a child theme?
First, you create a new style.css file. The best way to do this is to open up a document editor like Notetab Lite. Create a new file and copy and paste in this code:
Theme Name: THEME NAME Child Theme
Theme URI: http://YOUR URL.com/themes/YOUR THEME
Description: This is the child theme to THEME NAME.
Author: YOUR NAME
Author URI: http://YOUR URL.com
@import url(“../THEME FOLDER/style.css”);
And then you insert your information where indicated. My file, for instance, looks like this:
It is VERY important that you add your information exactly how it appears in your parent theme. If my parent theme is Sugar-and-Spice with capital letters and dashes between the words, then that is exactly how it must appear in the child theme. It’s very important that you pay attention to the tiny details.
To makes edits to this, what I did was copy and paste the original style sheet into a new tab. Then I highlighted everything under all that introductory info (the stuff that looks a lot like what you just did). Like this:
The reason there are three places you can start is because the theme description (under “Start here”) and the Table of Contents (under “Or here”) are not necessary–they’re for your benefit. The only necessary parts are what you copied and pasted and everything under “Or even here” because that’s where the actual code starts. It may look a bit different for you, depending on the theme you’re using.
Anyway, highlight everything under the part I said to ignore and copy and paste it into your other style.css file, right under the @import stuff.
Now we need to save this file. First, create a folder called “YOUR THEME Child” (so mine is “sugar-and-spice child” because, as I said earlier, this is case sensitive). Save this new file in that folder as style.css. Then zip the folder. To do this in Windows, just right-click on the folder, roll over “Send to,” and click on “Compressed (zipped) Folder.”
Note: Before you do this, if there are other files you need to include in the child theme (such as header.php–anything you’re going to edit), add it before zipping. If you use an FTP, this isn’t a big deal, because then you can just drag and drop copies of files into the FTP folders, which is what I do. But if you don’t know how to use an FTP, then doing it through the WordPress Dashboard seems like it will be a pain.
Important: Do not edit .php files if you don’t know what you’re doing. ESPECIALLY the functions.php file. I can’t tell you the number of times I’ve seen panicked, “HELP MY BLOG IS GONE!” posts on blogging forums because people were editing the functions.php file when they should have been editing the style.css file. There is a huge difference. Do not make this mistake. If you do it by accident, it can be undone, but it will be a pain.
As I said earlier, that’s another reason child themes are great. If all you have in your theme files is the style sheet, you can’t possibly break your site by editing the functions.php file. 😀
Anyway, your zip file should appear right next to your folder (it’s the one with the lock over it)!
Now it’s time to upload your child theme! Go to Appearance –> Add New (at the top, in between “Themes” and the search bar). Then click Upload Theme (at the top next to “Add Themes”). Find your child theme’s zip folder and upload it.
Once it’s been successfully uploaded, you’ll be taken back to your themes. Hover over the child theme and click “Activate.” Now you can go to Appearance –> Editor and edit that style sheet to your little heart’s desire!
Now you never have to worry about losing your changes again. Which is really nice for those of us who like to do major overhauls of free themes!
One thing I recommend doing, though, is creating a sub-domain and editing your style sheet there, so you can play around with it and not worry about it looking weird on your site. Get directions on how to do that by reading this post, Create a Development Copy of Your Live WordPress Site on a Subdomain.
If all else fails and you’re still confused about child themes, try out this plugin called One-Click Child Theme. Supposedly, all you have to do is click on the theme you want to create a child theme for and you’re done. However, I find doing it myself isn’t difficult enough to warrant bogging my site down with another plugin.
Are you ready to tackle child themes? Do you have questions about setting one up? Let me know in the comments!