Creating a Child theme in WordPress

Creating a child theme will help you avoid a nightmare scenario of losing your custom changes made to the theme.

There might be cases when you’re going to want to tweak and customize elements of the layout of your site to better suit your needs. In this case, you’ll need to modify the theme.

When to use a Child theme

A child theme is an addition to your existing WordPress theme. 

When planning to make heavy changes to the parent theme, such as modifying templates files, you should definitely use a child theme. 

It allows you to customize your theme without losing your changes when the theme updates are made.

However, if you are planning to do just a few style changes then it is totally optional to use a Child theme. 

Custom code snippet

Adding code snippets to your WordPress site can help you extend functionality of your site. The process of adding a code snippet is not rocket science, but even a small mistake could crash your site completely.

If need to add a code snippet to your site then there is no need to use a Child theme. It can be done using a WordPress plugin.

For instance, you can use Code Snippets plugin, which provides a simple way to run PHP code snippets on your site. Theme updates won’t affect your custom code added via this plugin.

Custom CSS

WordPress 4.7 comes with the Additional CSS feature that allows you to write custom CSS and make your styling changes with live previews in the Customizer.

Note, this is a theme specific feature, meaning you won’t have to remove the custom CSS if you switch themes. Your styles stay with the theme where they were added.

Use plugin

If you want to display your custom CSS even when the themes are switched then you need use a 3rd party plugin that comes with custom CSS functionality.

For instance, you can use Simple Custom CSS which provides such functionality. You may also check other plugin with same functionality.

How a Child theme works

A child theme cannot function on its own. That is why both the child theme and the parent theme must be installed on your website, and the child theme has to be activated.

Once the child theme is activated, WordPress will look for the template files in the child theme folder first. If the file does not exist in the child theme then it will go to the parent theme folder.

For example, if your child theme has the footer.php file then WordPress will use that file. Otherwise, it will use the footer.php file that is located in the parent theme.

Create a Child theme

Don’t worry if you have never made a Child theme before. The process of creating your own Child theme is not that hard.

By the way, if you are using a premium theme developed Themes Harbor then you do not need to worry about creating a child theme. Our premium themes include a blank child theme.

Define styles

First of all, you need to create a folder where you are going to keep all the files needed for a Child theme. Thus, create a new folder under the themes folder ( wp-content/themes).

Then you need to create a new CSS file in the child theme folder and name it style.css. Otherwise, WordPress will not be able to locate your child theme.

Your next step is to add some information to that style.css file so WordPress knows that you have a Child theme.

/*
Theme Name: My Child theme
Theme URI: https://themesharbor.com/
Description: This is a custom child theme.
Author: Your Name
Author URI: https://themesharbor.com/about/
Template: parenttheme
Version: 1.0
*/

Good way of loading parent theme styles

The recommended way of loading parent theme styles through using wp_enqueue_style(). This is a proper CSS inclusion inside WordPress.

If you are using a premium theme developed Themes Harbor then you do not need to worry loading the parent theme styles. Our themes take care of it.

To learn more about this functionality in WordPress, please see an official documentation page.

Bad way of loading parent theme styles

There are cases when people use @import in CSS to load additional style files on the site. Try to avoid this method.

It’s a bad practice to use @import to load multiple stylesheets on your site, and as from a page speed standpoint, it should almost never be used on the site.

Simply because it can prevent stylesheets from being downloaded concurrently.

Below you can find an example of bad method of loading theme styles:

/*
Theme Name: Bad Child theme
Theme URI: https://example.com/
Description: This is a custom child theme with performance issues.
Author: Name Here
Author URI: https://example.com/
Template: parenttheme
Version: 1.0
*/

@import url("../parenttheme/style.css");

At the moment, it’s recommended to avoid this method when possible. The situation might change in the future when @import get improvements.

Parent theme styles not loading

In WordPress, there are cases when a Child theme is not loading a parent stylesheet. Thus, your site looks completely broken which can lead of start losing your audience.

Learn more on how to fix a missing parent stylesheet in a WordPress child theme, and prevent of making your site looking broken.

Customize theme in WordPress

Once you have a Child theme you are ready to make custom changes to your parent theme templates.

If you want to override template files of your Parent theme then you have to make a copy of original template file, and paste that copy to the Child theme folder.

The file should have the same file name as original template file, and the folder structure should be the same as in the Parent theme.

When you are done with your Child Theme you have to activate it. To do so, go to Appearance → Themes in your WordPress admin area. Find your Child Theme and activate it!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.