Trends

How to Future Proof Your WordPress Site With Child Themes

WP Child Themes
Once when I was having a chat with a developer about WordPress Themes, he mentioned something about child themes. I am guessing by the confused look on my face, he figured out that I have no bloody clue as to what he was going on about. That was my “Have you met Ted?” moment.

After our chat, I went on to Google to find more about this new thing called child themes, that would go on to save me hours of hard work and frustration in the future. Today we are going to look at what child themes are and why you should be using them.

What Is a Child Theme?

So what exactly are child themes? When you download a new theme, it is usually the main theme or what one would call a Parent Theme. A child theme is a theme that inherits the look and functionality of the parent theme.

At this point a few of you might be thinking, “Great, so how does this help me exactly?” Good question. Any changes you make to the child theme overrides the defaults from the parent theme. So now you can easily made edits to the child theme, and those changes will be visible on your website without touching any of the files in your parent theme.

Now imagine a theme update rolls out, and you need to update your theme. You download the new file and overwrite the existing theme file (parent theme). Lo and behold, you have updated the theme, and all those edits you made in your child theme still exist. ( ͡° ͜ʖ ͡°)

No more looking through the theme to find all the edits you have made to the original theme, no more manually updating the theme files before uploading them to the site. In short, updating themes are now a piece of cake.

How to Make a Child Theme?

Now that you are a big fan of child themes like I am, let us learn how to create a child theme from your parent theme. There are many ways to go about it. There is a WordPress plugin called Child Theme Configurator that will help you set up a child theme for your existing parent theme in a few simple clicks.

no plugin
Now some of you might be, like, I rather not use a plugin unless there is no other way. Don’t worry, we got you covered. If you prefer to do it manually, just follow the steps outlined below.

Step I

Navigate to your themes folder in your WordPress installation using your favorite FTP client – it should be under wp-content/themes. Create a new directory and give it a unique name. Please note that the name should not contain any space.

Create Child Theme Folder

Step II

Navigate to the new child theme folder you just created and create a file in there called style.css. The child theme’s stylesheet is included after the parent theme’s, so the child theme’s CSS will override those in the parent theme’s stylesheet.

For Theme Name: you can pick any name you want. For Template: you should add the folder name of your parent theme (as they appear in wp-content/themes).

Now there are two ways to load the parent’s style.css file:

a) The traditional way
Use @import to load the parent’s style.css.

In the child theme’s style.css file add a new line

@import url(“../folder-name-of-parent-theme/style.css”);

so that the style.css will look like the code bloack below. Replace folder-name-of-parent-theme with the actual folder name of the parent theme as seen in wp-content/themes.

b) The recommended way
It’s generally preferred not to use @import to load CSS because it might slow down page rendering. If your theme supports wp_enqueue_style() to enqueue stylesheet, you can load the parent’s style.css using an action hook in function.php.

To do this, navigate to the new child theme folder and create a file in there called functions.php. Add this to that file and save it.

That is it, your child theme should be ready. Now all you have to do is activate it.

How to Install Child Themes

Now I am going to walk you through the process of installing a child theme. For the purpose of this exercise we are going to download Newspaper, a theme that I really like and use on my blog.

Step 1

  • Download the theme files from the download area. I usually choose “All Files & Documentation” because it’s always useful to go through the Author’s documentation of the item.
  • But for the purpose of this exercise I am just going to download the “Installable WordPress file only” option, to quickly show you how to install a child theme.

Download Theme File

Step 2

  • Once you have the .zip file, go to your WordPress dashboard >> Appearance >> Themes.
  • Click on the Add New button to install the new theme.
  • Now select the Upload option and click on the Choose File button and select the zip file you downloaded in Step 1.
  • Click on Install Now, sit back and wait for WordPress to install the new theme.

Install Theme Files

Step 3

  • Jump into your FTP application, I use FileZilla in this example.
  • Go to your root WordPress installation folder, once you are in your WordPress root installation folder go to wp-content >> themes.
  • You should find your theme folder in there (in this case “Newspaper”).
  • Now create a child theme folder. We are going to call it “newspaper-child”.

FTP Child Theme

Step 4

  • Create a file called “style.css”. You can use any text editor for this – I use Notepad++.
  • Follow Step II to add the required content.
  • Make sure you add the correct name for the Template: field. In this case it’s “Newspaper”. It’s case sensitive, so make sure you add the name as it appears in your themes folder.
  • Save it as style.css.

Style CSS

Step 5

  • Create a file called “functions.php”. You can use any text editor for this.
  • Follow Step II : b) The recommended way to add the required content.
  • Save it as functions.php.

Functions PHP

Step 6

  • Open up FTP client.
  • Go to the child theme folder we created in Step 3, in this case newspaper-child.
  • Copy style.css and functions.php in to this folder.

Copy Files to Child Theme Folder

Step 7

  • Go to your WordPress Dashboard >> Appearance >> Themes.
  • You will find your new child theme in there, in our case “Newspaper Child Theme”.
  • Click on the activate button.
  • Give yourself a pat on the back. You just created and installed a child theme!

Activate Child Theme

So now that you folks are experts at creating and installing WordPress child themes, go ahead and try it. Let us know what you think of this “How to” style of article. If you found it to be useful, we can do more.

Create Child Themes


About the Author Saijo George

Saijo George works as an SEO Strategy Director for Melbourne based award winning marketing agency Supple. You can find him on Twitter and LinkedIn.