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. Share on XHow 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. Share on XIs 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! Share on XHow 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
Template: theme-name-here
Version: 0.1
*/@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!
16 comments
This is really great stuff! Do you notice a difference in loading speed using a child theme rather than a plugin like Custom CSS? Or does it depend on how many changes you want to make to the CSS? Google gives me a fairly low score for mobile speed, partly due to my CSS, and I can’t figure out why.
I also use a Custom CSS plugin because I find it easier to use than trying to insert the code into a child theme. I mostly use the child theme to edit code that is already there. My score on mobile is higher than my desktop score because I use a mobile-friendly theme. But I just took a look at your site and it seems you do, as well. So I’m not sure why it’s giving you a low score! Sorry I couldn’t be more helpful. -_-
Though when I run PageSpeed Insights with Google, they tell me exactly what I need to fix to increase my speed. (Right now I’m trying to figure out how to get my javascript to load in the footer. Such a pain.)
Google is also dinging me for not optimizing my images, even though I have installed an image optimizer. 🙁
It does that to me, as well. My images are pretty huge, though. I think I’m not using the correct optimizer, though. Someone recommended a certain plugin and as soon as I remember where I put that post, I’ll test it and let you know how it goes. 😛
I’m using EWWW Image Optimizer, and I’m not sure it was the right choice. My mobile rating hasn’t improved at all since starting to use it for optimizing my images. Please let me know if you find a great plugin!
I agree. Now that I’ve been using it for a few weeks, it’s honestly just made life a bigger pain for me. The search continues! -_-
Pinning this for future use. I am going to, hopefully, move to Genesis soon. I know that I will be working with a child theme, I am sure that this will come in handy! I had a child theme with my old theme, when I switched it was not compatible with my theme and I have asked them which child theme to use and got no answer. Sometimes I frustrate myself. I should have went straight to Genesis. Arg.
You can use this with more than just Genesis, too! I’m glad you found it useful. Good luck with switching to Genesis! I hear it’s great for SEO, so I intend to switch to it in the future, as well. 🙂
This makes my head spin but I am pinning it for later. What parent theme do you use? I have Genesis and it is SOOOOO confusing. I swear I think my designer chose that one so I would be clueless and have to keep paying her to make updates for me! 😉
I use the free Sugar & Spice theme until I can afford something else. Though I keep hearing it Genesis built specifically for SEO. It wouldn’t shock me about your designer, though! I hear a lot of people complain about their designers doing the same.
Hi there! Visiting from Teach Me Tuesday. This is a great post! This is super useful for anyone using themes. I personally use the Childify Me plugin and really makes it a breeze.
I’m afraid that I think my head just exploded with all the tech, but I am pinning this for future reference! Really informative.
Thanks for linking up to Tuesday Tutorials.
Ha! That’s how I felt when I was first introduced to child themes, as well. Maybe one day it will come in handy though. 😉 Thanks for the pin!
Great post, I don’t like to talk about the number of times I’ve killed my blog trying to make changes 😉 Thanks for linking up to Tuesday Tutorials x
WOW this is impressive! I am not up to this skill set yet! Thanks for sharing on Monday Madness link party 🙂
Thanks for stopping by, Sharon!