1.2 Customize Your WordPress Site With a Child Theme

[MUSIC] Hello, and welcome to this Tuts+ Coffee Break course on Creating Child Themes in WordPress. In this course, you're going to learn how to create a child theme, which will modify your parent theme. This is a really useful thing to do if you want to make changes to a theme that you've downloaded from the theme directory or that you've bought somewhere. It's a bad idea to directly edit the theme files, because then when the theme is updated in future, all of your changes will be lost. But what you can do instead is create a child theme. So let's have a look at how to do it. Here's a site that I've set up to demonstrate this. And this site is using the 2016 theme, along with some dummy data that I've imported using the theme test unit data. Now here's my WP content file. And if I click on Themes, you can see that I've got a few of the default themes already installed on my site. Now to set up a child theme, what I need to do is add a new folder to this directory for that theme. So I'll do that. I'm gonna call that tutsplus-childtheme. Now every child theme need a stylesheet, because it's in that stylesheet that you tell WordPress that this is a child theme. So I'm going to open my new folder and create a new file. And I'll call that style.css. Now I'll open that file, which at the moment is empty. So I need to add two things to this stylesheet. The first one is some commented out text that tells WordPress everything it needs to know about the theme. And the second is an import command that imports the stylesheet from the parent theme. Because your child theme will still use any styling from the parent theme, unless you decide to override it by creating styling in the child theme that replaces or is more specific than styling from the parent theme. So let's add the commented out text. So that's the commented out text. Let me add some tabs so we can see it a bit more clearly. So here you're including text that is common to all themes. So every theme you create will have a theme name, a URI, a description, an author, an author URI, and a version, and that tells WordPress all about the theme. But in addition, there's this template line here. And that is crucial for a child theme, because that tells WordPress that this is a child theme of the 2016 theme. You'll see that I've written twentysixteen all as one word here. The text you have to use here is the name of the folder that the parent theme is within, not the theme name from up here. So if we go back to here and we look at the themes, you can see it's twentysixteen, all one word, lower case. So that tells WordPress that this is child theme, but we also need to pull in the styling. So what this does, let me just correct that error there. What this does is it tells WordPress to import the stylesheet from the twentysixteen folder that's called style.css. So that will import all of the styles from that stylesheet into this stylesheet at this point here. So any styling you add to this stylesheet in your child theme below that will override any styling above it from the parent theme. So now you save this, and you go back to your site, and we're going to the dashboard where we can select the active theme. So you can see my new theme here creates a child theme in WordPress. It's listed under the themes. And I click on Activate, and now that's my theme. If I go back to my site and refresh the screen you'll see that nothing is changed. It's pulling in all of the styling from the parent theme. Now as well as the styling that it's pulling in using that import command that you added, it's also pulling in all of the template files from the parent theme. So if we go back to Coda and we take a look at the structure of twentysixteen, WordPress will use all of those template files from the parent theme to display the content to the site. Now that will only change if you make a file within your child theme that it uses instead. So that would be a file with the same name as a file in the parent theme, or it might be a file that's more specific to the type of content being shown. So for example, for a category archive, you could create a file called category.php and that would override the archive.php file in the 2016 parent theme. And if you want to learn more about that, follow the link to the template hierarchy information that I've included with this course. So if you want to change the way that one or more of the files in your parent theme work, what you do is create a copy of that file in your child theme. So going back to the site, let's have a look at an archive. And I'm gonna make a simple change to the archive template, which you'll see reflected on the site. Now at the moment it just says category, and then it gives you the name of the category. Let's change that in our child theme. I'm going to make a copy of the archive.php file, which is the file that 2016 uses to display all archives. And I've pasted that into my child theme. So here, if I open this archive.php file in my child theme, it is identical to the file in the parent theme. So at the moment, if I go back to the site and refresh the screen, it looks exactly the same. Now let's edit that file to make a change. So I'm gonna make a simple change here, which will be in the title. And now it will say archive for category, and then the name of the category. So I'll save that, go back to my site, refresh that category screen, and you can see that that change is reflected in my site. Now if I wanted that change to reflect just in category archives and not other archives, I'd create a file called category.php, which WordPress would just use for category archives and no other ones. So to demonstrate that it's the child theme doing this and not the parent theme, I'll change the active theme. So I'll go back to 2016 as the active theme, back into my site and refresh that screen. And you can see that my change no longer applies because the child theme isn't active. Let's activate the child theme again, refresh again, and there's my change. The other thing you can do is change the styling in your child theme. So let's do a little bit of that. I'm gonna change the color of this text up here. So firstly, I'm going to inspect it to see how that color comes through on my site, and it's site-branding and site-title A. So I am gonna copy that, open the stylesheet in my child theme. And I'll make it grey instead of black. So if I save that, go back to my site, I'll close down that code view and I'll refresh it, and you can see that's slightly lighter. Let's make it a lighter one still. So now that's more obvious. So you can see what I've done here is I've made a tweak to the styling in my parent theme without actually editing the parent theme itself. So that's how you use child themes in WordPress to tweak a parent theme. And if you're using a third party theme that you've bought or you've downloaded from the theme directory, this is by far the best way to modify it. You shouldn't be directly editing the code in your theme, because any changes you make will be lost when the theme is updated. I hope you found this course useful. Thanks for watching.