How to Create a Child Theme for WordPress
Before you start putting hours of hard work on your WordPress site, STOP! If you are going to follow a single tip when using WordPress, please make sure it is this one. All of your hard work can go down the drain if you update your WordPress website and you haven’t created a child theme. In this tutorial, we discuss the difference between parent and child themes and the function of a child theme for your WordPress site.
Today on UV Design Tips and Tricks we show you how to make a child theme, so you don’t lose all your customizations.
So you just found that perfect theme for your WordPress site, and you’re all happy to get started with it, and make your site look beautiful. First things first, you choose your theme. You uploaded it, and it’s ready to go, right? Incorrect. You wanna make what’s known as a child theme. There are multiple reasons why you wanna make a child theme and the number one reason is so you don’t lose what you did to the theme.
What I mean by that is let’s say you spent a lot of time on it, customizing this theme, making your site look beautiful, and then a month from now, two months from now, six months from now, your theme comes up with an update. You wanna make the update because it has features and security and just functionality on the theme. You click update and after you update you go back to your site and all your customization is gone. Why is that? Well, it’s gone because all of the customization that you have done has been overwritten by the update. And for instance I’m using Divi Theme so all these customizations that you would do inside here, well, let’s see.
When you do inside here to the theme, you know, under customize, you know, maybe you’ve edited the footer PHP file and all that stuff. Well, when the theme updates it’s going to overwrite all the files that are associated with that file, so all of these, all the changes that you make inside of here, this screen and other pieces up here. You’ve got the editor inside here, all these changes that you make will get overwritten back to the default and they’re gone forever.
Well, maybe not forever, ’cause you can restore back to how it was before the update. So to prevent that we are going to create what is called a child theme. Again, there’s other reasons why. That’s the number one reason why. I guess the second reason why is to kind of start understanding how WordPress works and themes work inside your WordPress site. If you just Google Child WordPress theme, or I’m sorry, what was that? If you just Google child theme WordPress, WordPress has a very good article that explains a little bit more in depth of why you want to do this and other steps on how to create one.
Well, we’re gonna show you the steps for you because that’s what we’re here to do, show you tips and tricks, right? And I would say out of all the tips and tricks I have for WordPress this is the number one. This is the one I’ve seen where more people don’t understand what happened, why they don’t start off with it. I see developers whose customers pay them a lot money and the developers don’t even do this. I don’t know why. Well, there might be reasons why, but I don’t understand why. So anyways, we’re going to show you how to make this.
Now I use FileZilla as my FTP program. I like it. It’s simple. It’s easy to go. You don’t have to use FileZilla. You can use whatever you want. You can even use something as easy as a file manager to do this. Let’ just go inside file manager. It’s under public HTML that you can create files and everything like that in here. But we’re gonna use FileZilla, ’cause that’s what I use, and it’s what I like, and so be it. So, we’ll go back over to FileZilla and let’s start from the beginning. Of course taking forever today.
So log into FileZilla. I’m inside the public HTML and here’s my WordPress core features, or core install, all the folders and files, and everything. Basically everything in here is what comes when you install WordPress. For the most part the only two files you’re really ever going to edit that comes with WordPress is your htaccess and any fold, folders inside wp-content. Admin includes all these others WPs. Probably never going to touch. Maybe the config file, but that’s for another day, not today.
So let’s dive right on in into the WP content folder. Here you have everything separated. What plugins you have installed, well not, yes, installed, what themes you have, what uploads, like images, MP3, videos, whatever. So we’re gonna go inside here, themes. Now we assume that you’ve already uploaded your current theme that you purchased from somewhere, from some third party site. Again, we’re using Divi. I prefer that, but whatever your heart desires. These steps follow for any theme. Then you have the default WordPress theme.
First things first is let’s just go ahead and clean this up a little bit, ’cause again I am all about keeping stuff minimal. So I’ll go ahead and go back to 2017. We’re gonna delete this theme, and we’re going to delete eeny, meeny, miny, moe. Oops, Eeny, meeny, miny, moe. All right, 2016, you’re gone. Delete. The reason why I’m deleting them is I will never use them and you need, well, you don’t need. I tell people you should keep your WordPress install as minimal as possible. The reason why I keep one default WordPress theme is in case you have issues with your main theme and you need to switch back for testing purposes, you have that in there.
Let’s go on back to FileZilla. We’ll go ahead and refresh this and we’re down to two themes plus the index file. So we’re gonna create a folder. We’re gonna create this folder, well, a directory. I guess we’re gonna call it Divi child. Pretty easy stuff, and inside this, inside the child theme two files you need to create. You need to create what is called a style.css. Create file style.css, and you need to create functions.php, and minimally these are the two files that you need for a child theme.
I guess I should explain what a child theme is. A child theme is the child of the parent. The parent theme is going to be your main theme, the theme that you love, the style, the look for, and you wanna make your website resemble that theme. Again, we’re using Divi. There’s multiple ones out there. The child theme keeps minimal content in here and only keeps your customizations that you’ve done. Change fonts, change looks, you know, hack, you know, code, change the code, you keep it all inside here.
The reason for it is the child theme will reference the parent theme and so if it’s missing any files or folders it will just pull from the parent theme and that’s important to add the functionality. But then when the parent theme has an update and you update that the core features of that theme in the Divi folder would update, and not the child theme. So then those would stay the same. Again, it’s all about customization, and keeping that hard work that you spent a lot of time on.
So now let’s make these files reference the parent theme. The function themes, we’re gonna start around that, the function themes. The function.php file we’re gonna go ahead open that up and we want to view edit that, and here is that, I don’t know what that is. Well, I do, but that’s for another video. Here’s the function.php file. There’s no, nothing in here. Not a problem. We are going to fix that right now. Oops. Grab my code. And there you go. So basically what this says is that you are going to use the parent style, reference the parent to pull all the functions from the parent theme, which is Divi. So now you’re just gonna go ahead and save this file, and I just do control S, or obviously you can come up here to file, save, and it’s going to start orienting back, back to upload to FileZilla. Just click yes, ’cause you’re gonna reupload the new sheet and you can tell it’s already been uploaded ’cause now the file size is bigger than zero.
So now we wanna edit the style.css sheet. The style.css sheet is what keeps any customizations that you want to do for like you want to change, you know, color, sizes, fonts, text, you know, any div tags, you know, anything that involves the look of the things. That’s the dumbest description, a way to describe it. But it basically references any customizations that you want to do to your WordPress site and basically the code is pretty simple to use. I’m gonna go over each one.
Basically you have your theme name, and that is the name of the theme that we’re going to use. You can call this anything you want. We’re gonna call it Divi child. The theme URI, we don’t really care about that. That doesn’t even have to be in there, because that is if we had, let’s say this is a theme that was selling and people wanna know the website address of that theme. That’s what that’d be there for. So we can go ahead and delete that. The description is a Divi child theme. The template is Divi and the text domain is Divi-child. These two are probably the most important things out of here. The reason is the template. Where do want me to get all missing information that I need to pull from to make the child theme function correctly? Well, you get it from right here, the name of the folder. So however this is spelled, anything that’s capital, capitalized, lowercase, spaces, symbols, you need to have it exactly like that in here, under the template, and then the text domain, again is going to be exactly what the folder is called on here. And then you save that. Reupload, yes. Wait a second. Or wait forever. I think we’re gonna wait forever today. I swear when I do these tutorials everything just runs so much slower. I don’t know why. There we go.
Now it’s in there, and now this is completed. And that’s it. You’re done with the child theme. Take it easy. Just kidding. I should stop kidding. So now you go back to your WordPress site and you want to see that new child theme. So you just go to appearance and click themes again and then now it’s in there, and there it is, Divi child theme. Let’s go to theme details. Look, Divi child theme by this wonderful company, and Divi child, and see it says right here, this is a child theme of Divi. It tells you exactly what it’s for. Perfect, right? Go ahead and activate. Go to view site and our site looks exactly the same.
We’ve been using the same website since tutorial number one and as you can probably guess we’re gonna start developing this, making it into an actual website, because a diner with food goes exactly with Fix It in Post films. Those two are very related, right? Just kidding. By the end of this we’ll have a website for FixItinPostFilms.com. If you’re wondering where I got this domain from, my brother and friends and I we have a, a film gang, a film group, a film fill in the blank, whatever you wanna call, and our group name is called team FIIP and FIIP stands for Fix It in Post, and basically we fix everything in post that we didn’t get correctly done the first time. So yeah, that’s where we came up with this, and I’m gonna show you how to build a website with this, with different tutorials, so you can watch and learn. And so now any customizations that you do will be built inside the Divi child theme.
So any, again, anything customized here will be all done inside there, and everything like that, and that is the bare minimum on how to get your child theme up and running so your main parent theme will not lose any of that beautiful customization that you do to your website. ‘Cause that’s what we don’t want. We don’t want that. We want it to stay beautiful forever. Now, there’s a lot of other things you can do inside here to make it more customized and to add all those beautiful looking stuff, beautiful looking edits for your site to make it look great. We’re gonna go over those in later tutorials. Like I said, we’re gonna turn this FixItinPostFilms.com into an actual website that doesn’t look like a diner, ’cause that diner was just a, whatchamacallit, a demo, yes, from Divi. So, yeah, we’re gonna make that look different. So that’s it. That’s how you make a child theme.
We are going to leave this code and this code for you on our site, on our website, so go check that out, UVDesign.media under tips and tricks and look for how to create a child theme. What I’ll do, well here’s another tip for you, I guess. Let’s go back.
Let’s step back for a second here. Let’s say you wanna build multiple sites for people, yourself, or just for whoever, and you know you’re gonna be doing a lot of child themes. Well, you should be doing a child theme with every WordPress install. I would recommend on your computer somewhere on a lovely little folder make a little folder called themes. Open it up and inside that themes folder download everything that’s on your site. Well, let’s minimally save the Divi child theme and the parent theme. If you’re gonna use this combination for every website why not save it to your computer, just so you don’t have to make these two files ever again, and then you just upload every brand new install.
Makes life simple. What I’ll do is leave the code on the website, and then I’ll leave a ZIP file you can download of the Divi child theme. Again, you can edit this to be for whatever theme you want. Aveda, Aveda, avoda, eveda, however you say it. What else is out there? I can’t even think right now. Anyways, there’s tons of parent themes out there you can buy. They’re all great. They all make your sites look great. Some of them actually come with a child theme which is great. Use it, use it, use it.
If they don’t come with it, that’s why you’re watching this tutorial, and that’s how we are helping you make life easy. So yeah, so there will be a couple different versions on the site you can get from it. And that’s it. You just now created a child theme and now you’re on your way to building the most awesome site in the world, most beautiful, crush everyone else, because you’ve made a child theme. You don’t have to worry about losing all that beautiful work that you’ve done.
All right, so next week we’re going to go over three or four different tips for your database. There are some common ways, common ways, common things you should know about a database, how to disable your plugins, how to reset your password, in case you lose your password and your password reset’s not working. Very common things that you need to do that seems a little scary, but we’re here to walk you through, and making sure that everything’s okay. That’s what we here do. That’s what we here, are, jeez. That is what we do here for you. Make your life easier and simple.
So all right. So that’s gonna be it for today. If you love this video, or even just smidge like it, click the like button below. If you wouldn’t mind subscribing that would be awesome and send a link in the comments to show us your site. I would like to see your beautiful site, and see what it looks like, and tell me what theme you’re using. It’s always great to learn about new themes. There’s obviously a million of them out there that we use. We use, I use, like I said, I use Divi. It’s a personal thing. Use whatever your heart wants. What you want, you want. What? Ugh. I just need to shut up. Okay, so subscribe. That would be great, and then come check out some of our other videos that we have. They’re all great. Well, we think they’re great. Hopefully useful to you, and that’s it. See you guys. Take it easy. Later.