Wordpress - How - To create a child theme from an unmodified parent theme

Hi welcome to this Pen Publishing Interactive WordPress Video. In this video I'm going to show you how create a child theme from an unmodified parent theme. Before we get started, what is a child theme? A child theme inherits functionality and styling of another theme. We often refer to this as the Parent Theme. But why use a child theme? If you make modifications to a theme directly, when it is updated your modifications may be lost. That is not ideal. So in this video I'm going to show you how to create the child theme not using a plugin, but using the file manager on the server and how that all works. So let's get started. So I'm already logged in to my WordPress site. Now I'm under appearances and themes and you can see the themes I have installed right here. We're going to be working with the twentyseventeen theme. This is one of the standard themes that comes with WordPress. I'm also logged into my file manager. My website is hosted on the Plesk Platform, so that's what I'll be using, but if you're using something else like C-Panel the process is still the same. So in order to create a child theme you need to do three things. You need to create three things. First thing we need to create is a new directory and for my purposes I'm going to use a twentyseventeen theme. I'm just going to create a directory that is named twentyseventeen-child. This just keeps things more organized. So I'm going to do that now. Once we create the child directory, we need to create two files. The first file is the style.css file. This file will hold any modifications to the style sheet that we deem necessary to make modifications to our child theme. The second file we to create is a functions.php file. And again different themes have different functions. One other thing I'm going to add on here is I'm going to add snapshot or a screenshot of the child theme and you'll see what that does here in a bit once we get going. Before I move forward I want to rename this because it has to be named screenshot.png so it shows up in WordPress. Ok now we created styles.css, functions.php which you must create. The screenshot it's not necessary but it is nice and you'll see why. Those screenshots are these little pictures you see here are looking through themes. So I want to make sure I don't confuse my child theme with the parent theme and make customization on accident on the parent theme. So that's why I included that screenshot myself. So the next step we need to do is open our style.css file and I'm going to edit in code view. So what needs to happen first is we need to use this header and we're going to include links to the codex WordPress article that all this information is coming from, obviously if you are familiar with WordPress codex is your friend, so that's where this information is coming from and obviously that is best practices because that's where WordPress keeps all of their documentation. So the first thing is you need to name the theme. So ours is twentyseventeen-child. I'm not going to worry about this, but anywhere you see example, you can change that to the website that you are using. The second this is description, obviously this a child theme of twentyseventeen, I can change this to my name, again same website for the author. Now the key to this is, this is very very important, if the template is not named like the parent theme is, so in this sense this twentyseventeen is something else, this would not work. This has to be exactly the name of the parent. So in our sense it's twentyseventeen exactly how it's written there. I'll take that out before I forget. But if this is not in the template, is not named just like the parent's name is, the child theme will not work and it will not render. So again very important there. So now that I have that in there I'm just going to hit apply and all that does is save it. The next thing I'm going to do is I'm going to open the functions.php file and I'm going to edit here. Again this code is coming from codex WordPress and we will have a link at the bottom of this video so you can see that. Once you get the code and paste it in here. So very important, the parent style, this again needs to say twentyseventeen-style. So we're going to, all that is adds the parent style and the child styles together. The child style here is going to overwrite the parent once that, once any modification to any class or anything else that's in the parent style sheet. So once we do this again this code is on the codex, I'll put the link on the description here and we're going to hit apply. Once we hit apply, now we've done the three things that we needed to do when we created a directory. Which you can see here twentyseventeen-child. We created a function file, we created styles.css. In the functions file we, the parent and child. So now let's go back to our WordPress site and I'm just reload here and we should have, and there it is. Twentyseventeen-child and you can see the screenshot that we put in there, that says child so that helps. So I'm going to activate, but before I do that I'm going to show you how the site looks currently. Let's do that real quick. So pretty standard twentyseventeen theme, no modifications done at all, there's hello world. Now I'm going to activate the child theme and I'm going back to visit the site. Again nothing has changed at all because I haven't made any modifications. So now to test this out I'm going to modify the child theme and I'm going to go back in here and edit code to edit code in the code editor. I'm just going to come down here. I'm going to change the color of the entry title link to red and I'm going to hit apply. Once I do that and reload this page, that changed it. So that modification is done in the child theme, so if the parent theme WordPress decides that they need to update the twentyseventeen theme, and I go in here and I update it. That modification will stay. So it's very important that I did it in the file manager of the server, but you can also, if you have access, you can go here and go to editor and you gota be careful. WordPress will warn you, if you mess with this you can break stuff, which is fine so I understand that and again it's the same file. You can see styles and functions now. You can go in here and make modifications to the parent as well, but again it's not recommended. So you can make these modifications within WordPress or if you have access to your file manager on the server or if you prefer FTP, you have files on your local machine, you can do that as well. So that's how to create a child theme from a parent theme that has not been modified. It is highly recommended that as soon as you install a new theme, you create a child theme to avoid issues down the line with modifications or customization's you've done to the theme. So that's all for this video. Hope you learned something. As always if you have questions please contact us at penpublishing.com. You can call us at 316-651-0551. We're on social media, look us up on Facebook, Twitter as well and if you're watching this on YouTube we would appreciate if you subscribed to our channel and share some of our videos. Thank you for watching and hope you learned something. Until next time.