Today you’ll learn how to create a WordPress child theme for your site. Learning how to create a child theme puts you more in control of your WordPress website. So when would you need to create a child theme? If you want to make changes to your site, the best way to do that is to make a child theme that inherits all the code from the original or theme. But it also keeps all your changes in a safe place that won’t get overwritten when you update that theme. So for requirements, you want to have some understanding of HTML/CSS. You also want to know how to copy and paste some code for php. You also want to practice on a test site before doing this on your live site. You’ll need to be able to access files on your site by using an FTP client like Filezilla to connect and upload files to your site.
So getting started, I’m on a test site here and I am working with the 2013 theme that comes with WordPress. First, I’ll go to the wp-content/themes folder on my wordpress installation and create a new folder for the child theme. I’m going name it wpbdemo. Next, I’ll open notepad and paste this code inside. I’m going to save it as style.css in the wpbdemo folder. And basically, this file tells WordPress that I’m using the 2013 theme as a template and that this is a child theme here. Remember that parent folder name is case sensitive so we want to get that right. twentythirteen is the name of the parent theme, it’s also the name of the folder that this file is looking for. This last line and it shows how we import the parent’s stylesheet into the child theme. Now that’s all we need to do to officially create a child theme. I can save this file, go to my site appearance–>theme in the back end and I see my child theme here. I can activate it and start using it immediately. Even though I created child theme here, I haven’t added any custom code so my site is pulling in all the parent theme’s code right now.
Let’s look at how we can change that. Say I want to change some items on the nav bar here. I want to change the color of it. How do I find out what i’m using so I can change that? Chrome and Firefox have an inspect element built in to show you the code behind a site. Right now I’m using chrome so I’ll right click on the nav bar on my site and click inspect.
Now I have a split screen with code at the bottom and my site at the top. As I hover over different lines of code, the site area is highlighted to tell me where I’m at. I also have these triangles that are showing how the site is nested. If I click on one, it can expands to show more code inside that code. With the navbar I see this is highlighted and I can look over here to see the background color and what it is this is what I want to change. With this inspect area, I can click on the color here, test out the different colors for my site. When I type something in, I see it change over here immediately, which is cool, but it’s not changing the live site, it’s just showing me a preview of what it will look like. Its a pretty nice feature for testing things out. What I want to do to make it permanent is, I want to go in, copy this code right here and paste it in my styles.css file to make it live on my site.
I can click and highlight the code and either click ctrl+c or command+c to copy and go over here and put it and paste it. I need to save my file and go to my site, once I click refresh to see it live. You can do the same thing for all the other areas you want to change on your site. This can be used to change things like font sizes, fonts, background color, link color and so much more. Next, we’re going to look at how a page is setup. You see this as one page but the back end, there are several different template files that are being used and that make up this whole page.
We have a header template, content, widget area, footer area and more. If I want to change the footer area and remove the powered by WordPress, then I’ll need to deal with the footer template. Go to the parent folder for 2013, find the footer.php file, I want to copy it and go back to my child theme folder and paste it in there. Now I can open up this file and edit it. I want to replace the powered by WordPress area with a copyright notice. I’ll find the code I’m working with and replace it like this. Once I click save I can go to my site to refresh and see that I removed that part in the footer. In this next section, we’ll go over how to add some new functionality to your site. When making changes to your site, you often see tutorials telling you to add php code to your functions.php page. This is where a lot of your site’s functionality is kept. To make changes, we want to create a new file called functions.php in our child theme. I’m going to add some code that will change the default header image for my site.
I’ll add this code to my functions.php file and it tells my site that this will be the new default header and where to look for the images. I’ve already created the new header image along with a header thumbnail and I’ve uploaded them to my child theme area here. This mimics the 2013 parent theme folder structure. And now I can go to my appearance–>header and see my new function in action. There are a ton of function snippets that you can add to your site to change it up how you want. Over here’s a list of over 25 of the most useful functions you can add to your site to play with them and customize your site even further. Now let’s look at our site and see some of the changes we’ve made overall. You see we’ve changed the header image here, the nav color and down here we updated the footer to show copyright information. On the back end, we’ve copied all the files and folder structure over to create a working child theme that if there is an update to the parent, I can update the parrent and I won’t lose all the work I just did.
I hope you liked this video and found it helpful. If you did, click on the like button below and leave us a comment.
As found on Youtube