You’ve heard of child themes and that you should be using them – but what is a WordPress Child Theme? In this video – Jason Merrell will walk you through a better understanding of what a child theme is and if / why you should be using them and How to Make a Child Theme.
A child theme (according to WordPress Codex) is:
A child theme is 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 best, 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.
ummm – an easier way of explaining a child theme would be this:
If you make any modifications or customizations to your WordPress theme, they could all be lost when you click update on your theme. AHH! You don’t want that to happen. This is why you can create another folder inside of FTP and place one file in it to create a “Child Theme.”
This folder and the files inside are what will always override your theme’s default settings – securing your changes!
Did you know that it really only takes 1 file to make a child theme? One css file. This is the file that can have all of your color, font, spacing, styling changes listed in it. It overrides your main (parent) theme’s stylesheet. Well – it can override or accompany it. I explain this more in the video.
Step 1 –
You’ll need access to your hosting cpanel or an access point via FTP.
- Drill down to this folder wp-content/themes
- Inside of the themes folder make a new folder called “Child Theme”
- Click on that folder to go inside of it
Step 2 – Create a new file in that folder and name it style.css
- Paste the following code into that file
- Modify the lines of code to better fit your theme. The only required lines are the Theme Name, the Template and the @import line.
- Watch the video for full detailed instructions
/*
Theme Name: Sparkling Child
Theme URI: askkori.com
Description: My child is going to grow up big and strong
Author: Jason A. Merrell
Author URI: askkori.com
Template: sparkling
Version: 1.0
*/
@import url('../sparkling/style.css');
/* =Theme customization starts here
-------------------------------------------------------------- */
You’ve just created your first child theme! Now any customization that you’ll do to your theme goes in this file.
Step 3 – Last step – Activate
- Log in to your site’s dashboard
- Go to Administration Panels > Appearance > Themes
- You will see your child theme listed there. Click Activate.
Build a Child Theme with a Plugin
Video Transcript
Hey, Guys, how’s it going. My name is Jason Merrell, and I’m the lead developer here at WebTegrity. In this week’s video, I am going to show you guys how to do a child theme from scratch. Now if you watched last week’s video, you know how to do it with a plugin. Plugins are great. I’m not going to be one to diss them. Plugins allow you to do things that you otherwise couldn’t because you don’t have the time or the know-how to do it from scratch.
There are a lot of plugins out there. In fact, I had never seen the plugin that allows you to do a child theme. It does give you a lot of really robust capabilities that could be a timesaver if you didn’t know how to do this. The thing is this is really simple. It is something that you could do on your own and safe your website the workload of having another plugin. That is what we are going to cover in this video.
To do this, all you need is FTP access. Here we are using GoDaddy’s FTP access that they allow through a browser, which is really nice. I’ve already navigated to the theme’s folder within our website. You’re also going to need a text editor of some sort. I love using Sublime as an example. Sublime is free, it’s beautiful, it’s very easy to use, and did I mention it is free? It’s great for really simple jobs like this, but it doesn’t offer the FTP access you might see in more robust text editors. But, it is what we are going to use here and it’s what I recommend for somebody that maybe doesn’t have one up until this point. You can download that. Just go to Google and type in Sublime Text Editor. We are going to be using that to edit the singular file that we need to start our Child sheet.
So to do this, just to demonstrate how simple it is, we’re just going to get into it. You need a folder, and you need to name that folder really whatever you want. (Let me shrink my face down so that we can focus on the folder over here.) I’ve named this “Sparkling Child” because if we look at the theme that Kori was using for WordPress Wednesday, it is titled “Sparkling.” Now we don’t have to do that; we can name this folder whatever we want. We can name it YOLO Child if we wanted to and we could still make WordPress recognize that this is the child of the Sparkling theme. But, in order to save yourself the trouble and more importantly anybody that comes in behind you the trouble of finding what child belongs to what parent, it’s best practice just to name it the name of the parent theme, and in this case it is the “Sparkling,” and then “Child.”
Inside of here we need to put one file: style.css. That is where this text editor is going to come in handy. We already named it style.css. In Sublime you can choose over here on the lower right what the context of your file is going to be. In this case we have chosen “.css,” and we are going to put an open comment. Just like that. And, then we are going to close it so we don’t forget. We don’t want to forget to close this comment out. We are going to put a series of designations within this common block that WordPress actually reads. Some of them are more important than others.
First we are going to start with a theme name, and again we can name this whatever we want. We can call this theme name “Yolo Bob,” and it wouldn’t be a big deal. But again, help yourself, help people that come behind you; it’s just best practice. So, we are going to name it “Sparkling Child.” We can put the theme URI, which is going to be the…I do not know why it’s trying to add that semicolon in there…which is going to be the URL of the location of where the theme is, not necessarily where it is implemented; but let’s say, if you are a developer and you host this theme somewhere, you could put your URL in here somewhere. Again, this isn’t terribly necessary, but it’s great information to have at the beginning of the style.css.
Then we are going to put the description. This is all located inside of the area when you’re choosing your themes. So, we could be incredibly descriptive and say, “This is the child theme of Sparkling parent theme,” or it could be silly, “My child is going to grow up big and strong.” Then we could put the author. I think it’s putting in a semicolon because it is contextual .css and it wants to help me, but it is not necessary within the comment. We could put the author URI, but again not necessary.
Here is the most important part of this entire process within this comment block. This is what WordPress is looking for as far as the parent theme. You need to type “Template:” and then type the exact folder name of the parent theme, not just the parent name itself. For example, if “Twenty Fourteen” were our parent theme, yes, that’s the name of our parent theme, but that’s not going to be what you put here because you want it to be the exact folder name. When it comes to themes like “Twenty Fourteen,” their exact folder name is all lower case and all one word. It would be “twentyfourteen.”
Now this isn’t our parent theme; I am just using this as an example, especially because most people that work with these themes and they come across that problem where they type in the exact theme name and they are having issues. It’s the name of the folder itself. In our case, it is “sparkling,” and then you can put a “Version 1.1” if you really wanted to. This is all you need, Guys, for your child theme.
If I were to save this…let’s go ahead and do that. Let’s hit “file” and “save as” and let’s navigate to that folder that we just created for our child theme, which was “Sparkling Child.” And, if we saved it inside of here…so, we are going to go there. Let’s go ahead and close that out. We took this— also, another good practice, let me go ahead and get this out of the way now—when you are naming your folders, it is good to go ahead and put that dash in there. Don’t leave any spaces. It’s just good practice.
So, we’ve got “Sparkling-Child.” This is our folder that we are going to upload into our theme’s folder on our website. To do that, let’s open up that GoDaddy browser FTP access that we have. And, to kind of show you guys how we arrived at this point, you go to WP-Content, you go to your theme’s folder, and this is what is going to be located inside your theme’s folder: all of your themes. You are going to take that folder that you just created and you are going to drag it right in there. If you are using GoDaddy, if you are using FileZilla or one of those robust text editors, you just copy and paste it in there. And now—see, there it is, Sparkling-Child—now when we go to “manage themes,” which is under “appearance,” and then “themes,” and we reload this, now we have—woo, I have even misspelled it! We have “Sparling Child.” It should be called “Sparkling Child.” But, that’s irrelevant. It just comes down to that template, that one template code inside the common block.
We are going to activate this child. We are going to see a problem right away. Let’s go ahead to the front of the website, and I am going to walk you guys through this process to kind of explain what everything is doing. If we look at it right now, it’s completely without style. That’s because that style.css that we uploaded up into our child theme folder is completely replacing the style.css sheet of our parent theme. Now there are a couple of different ways you can remedy this. You could go to your style.css in your parent theme, copy and paste the whole thing into your new style sheet, but that is not the best practice. If for some reason you update your theme and the developers of that theme change style names or add new styles in there, that’s not going to be present in your new style sheet because it’s only going to have what you copied and pasted to begin with. It just so happens that there is a piece of code that you can put that pulls the entire stylesheet dynamically, and that’s what we are going to add in here.
So, we are going to go to “appearance” and we are going to go to “editor.” This is going to give us the same access that we would have inside of our text editor, and we are going to put that code that we were just talking about. We are going to hit the @ symbol, type “import URL,” open parenthesis, single quote: @import url (‘. And, we are going to go back one folder, dot, dot. We are going to name the folder of our parent theme which is “Sparkling.” So, we’re coming out of our child theme folder and going into the parent theme folder, and saying pull that style.css, pull the whole thing. Then we are going to hit “update file.”
Now I am going to have all these snippets for you guys in the description; so, that will save you guys some time, but now we are pulling the exact style sheet that we were working from before, as you can see here. Don’t mess with me! If it didn’t work, that means we didn’t call it correctly. So, we went back one folder, went to “Sparkling,” style.css. Maybe we just need to give it a second…, or maybe I need to move that closer to that. We are going to update that again. Maybe there doesn’t need to be a space between URL. We are going to reload that. Now we are pulling that appropriately.
So, anything that we pull or put after this, let’s say we want to change the name of our…or the background color of our little header area. Let’s go ahead and grab whatever that container is. It looks like it is “navbar.” So, we could, since we are pulling all of the styles, all the styles from our parent theme are like they are being loaded dynamically all the way down the page on our new one. But, anything that we add after that is going to override it. So, if we were to go here and do dot, “navbar,” and say “background color” (oops, let’s use the right property) and make it white and update that, that’s going to override our old style sheet. It should, anyway. You’ve got to make sure you’re pulling the right class and everything. So, here…okay. It wants me to put an important tag on it, but it’s probably because I am not pulling it correctly to begin with. It looks like that is the correct syntax we were using before. We are going to use that again, and we are going to hit “update.” This should work.
You’ve got to make sure you are using it the same way that they’re using it in the previous style sheet. It is working appropriately now. It was “navbar.navbar-default.” This is just an example. You don’t need to use important tags. You just need to be sure you are using the same names and in the same way that you are in this original style sheet and everything works dandy. Any updates that she does now to the Sparkling theme will pull in appropriately and any custom updates that she has done for the purpose of branding this website for WordPress Wednesday will work great.
I really hope this helps you guys out. I really hope it helps you understand just how simple this is. If you have any question, Guys, put it down in the comment section, and we will happy to address it. Thanks, Guys, for letting me host this first WordPress Wednesday. It was a pleasure, but I will see you guys later.
