Create a Child Theme in WordPress

Instructor: [0:00] A WordPress theme is a group of files that work together to create the design of your site, control how your site behaves. These files can include style sheets, template, JavaScript files and other assets.

[0:10] There's a huge selection of themes in the WordPress panel to be able to install, 8,200 in this latest section alone. There are also paid marketplaces, where you can purchase a theme and upload it manually. If you're adding custom code to your WordPress instance, then managing that code in your own theme is the best approach. This allows you to share your changes across other sites.

[0:36] Also, if you have based your theme on a parent theme, it keeps your code safe if the parent theme is updated by the developers. How do you create a child theme? To create a child theme, one that inherits the behavior of its parent, we only need to create a single file.

[0:55] We'll create a folder to contain that file. The file we need to create is style.css. We use a comment block at the top of this file to configure our theme. The single configuration key I need to use is template.

[1:12] I need to parse in the parent theme that I am going to base this theme off. In my case, I'm using the 2020 theme, but whichever theme you use, it has to be installed in your WordPress instance before you can do this.

[1:26] If I refresh this page, I'll see my child theme has appeared. WordPress has named my theme based on the folder I created, child theme. I have no version number. It's created by someone anonymous. The single piece of information I have is this is a child theme of 2020, all because of this template comment.

[1:43] If I want to add some more useful information to this screen, maybe my name, maybe a name for theme and then maybe a description of my theme, I could also add a version number so that I can keep track of versions and inform my users of a change.

[2:03] When I refresh this page, all that information is being filled in as you'd expect it. There's a large gap up here, which is left for a screenshot of the theme. To be able to use that, I need a screenshot.png or screenshot.jpg in my folder.

[2:22] Let's take a screenshot of Eggo, name the file screenshot.png, and when I refresh the page, you'll see that that image is being used in my installation page. If I activate my child theme and view the frontend of my site, you'll see that it doesn't look great. Got a lot of information, but not a lot of style, and that's not surprising, because our child theme has a style.css, which is superseding the style.css that ships with the 2020 theme.

[2:56] What I could do in the first instance is copy the contents of the 2020 style.css and below my definition comment, paste it into here. Refreshing the page returns the styling, so it looks much better. Any file in the child theme supersedes the same file in the parent.

[3:21] In my theme, if I was to create a footer.php file, all PHP files have to start with a PHP tag, and if I echoed "Hello," let's refresh the page. Now, when WordPress calls the footer, it's getting the "Hello" from my footer.php. Removing my footer.php, I get the actual footer that is generated with the theme. This way, we can replace the functionality of a parent theme piece by piece without having to replace it all at once.