How to Create a Child Theme in WordPress

If you do you any customization to your WordPress theme, then you should know how to create a child theme in WordPress. WordPress child themes are sort of a copy, or a descendant, of a WordPress parent theme. Child themes inherit all of the code of their parent theme, but they also retain their own custom coding. So child themes allow us to customize the appearance our WordPress sites without fear of our customizations being lost when we update the Parent theme. I always use child themes with WordPress, but sometimes I make mistakes. Here’s an example. (Jump to How to Create a Child Theme in WordPress if you don’t want to relive my pain.)

Missing banner images

Updating my parent theme broke my banner! Not cool at all.

How I Broke My Homepage

On this blog, there’s a sliding image banner on the home page. My WordPress theme uses default images for the banner. But I wanted to use my own images. So I found a few royalty free images at Pixabay. Then I used the theme’s configuration panel in WordPress to upload them to my web server. Doing this put the images into the parent theme directory on my web server.

I didn’t think anything about that until recently when the theme developer released an update. I applied it thinking I use a child theme, I’ll be fine. However, using the theme’s configuration panel to load the images put them in the original parent theme directory next to the default ones. The theme update replaced that folder and my awesome banner images were gone! So rather than nice images in the banner, I got big gray boxes with a loading spinner. Not cool at all!

How I Fixed My Homepage

If I used the theme’s configuration panel to upload my images again they would have just gone back into the parent theme folder and I’d be dealing with this again at some point. So to fix this problem I had to access my web server with my FTP program (File Transfer Protocol).  On my Mac, I use Panic’s Transmit. It’s a paid-for software but I use it so much it’s well worth the money for me. On Windows, I use FileZilla Client which is open source FTP program distributed free of charge under the terms of the GNU General Public License.

Wordpress home page sliding banner.

If you customize your theme then you should know how to create a child theme in WordPress.

Once I was logged into my web server via FTP, I created the same directories that my parent theme has for the slider images in my child-theme folder. Then I uploaded my custom banner images there. Luckily I had saved my banner images locally. Then I simply had to go into the theme’s settings and change the URL for the banner images to point at the child theme directory rather than the parent theme. That fixed the homepage banner. Now I’m going throughout my site and trying to figure out if I missed anything else that I’ll need to fix. But I don’t think I did.

How to Create a Child Theme in WordPress

If you don’t know how to create a child theme in WordPress, here’s a couple of methods.

Use a Plugin

The easiest way is a WordPress plugin. Child Theme Configurator a popular one. Here’s a video from Lilaea Media (the plugin’s developer) that shows how to install and use the plugin.

I tested this plugin on a sandbox site. It only took me six minutes to spin up a WP site, update it to the most current version of WordPress, install the Child Theme Configurator plugin, make a few customizations to the child theme, and then deactivate the plugin. My customizations stayed in place.

Child Theme Configurator is simply creating the child theme for you. Once the child theme is built then the plugin isn’t actively doing anything, so I guess you can deactivate it. No reason to delete it. But since it’s not really actively doing anything I don’t think there’s any harm or unnecessary server load in leaving it active.

Do It Manually

If you’re comfortable using a text editor, and the FTP options I mentioned above, you can manually create a child theme. You’ll need to be somewhat familiar with CSS (Cascading Style Sheets) and HTML (HyperText Markup Language). You’ll also be looking at PHP code, but if you can copy and paste snippets of code then you’ll be fine with that.

To learn this process I suggest using a test site. The folks over at WPBeginner have a great tutorial.

The Take Away

Hopefully, you’ll learn a bit from my experience and see the importance of using child themes in WordPress. What do you think? Now that you know how to create a child theme in WordPress, will you do it? Join me at The Super Affiliate Network and make it easy on yourself. Once you join look me up. I’d be glad to be one of your mentors there.

What ya thinking?

4 Comments

  • Glen

    Reply Reply September 19, 2016

    This article on WordPress child themes is very helpful. While I have used WP for a number of years, I have never used a child theme. I have always been afraid of “breaking” my websites.

    After reading your article, I see I have nothing to fear. While I am familiar with html, css, I will give the plugin a try. Thanks and best of success to you.

    • Darrel

      Reply Reply September 19, 2016

      I’ve broken my site a few times before I figured out how to use child themes. It’s not fun to fix that.

      Keep in mind though that if you use this plugin AFTER you’ve already made some customization to your parent theme, I think that those could still be lost if the theme is updated. I’ve not tested this though to see if the child theme inherits those customizations and keeps them when you update the parent theme.

  • Kien

    Reply Reply September 19, 2016

    Hi there! Your post is very helpful to me since this is what I have been wondering what if I want to change the original image to something else. I have not done it with my site since it did not want to mess it up the first place but i think I know how to do it now. I’m glad that I come across your post. I learn something new today:) thanks for sharing sir!

    • Darrel

      Reply Reply September 19, 2016

      Your welcome. Thanks for taking the time to comment.

Leave A Response

* Denotes Required Field