WordPress child theme

January 18, 2013

By

Taras Dashkevych

Avoid a nightmare scenario of losing custom changes made to a WordPress theme by using a child theme.

A child theme is a WordPress theme which inherits and overrides the styles and templates of the parent theme. It allows to change the functionality of the theme without modifying the parent theme’s files.

When use child theme

A child theme is an addition to existing WordPress theme.

When planning to make heavy changes to active theme — such as modifying the templates files — it is recommended to use a child theme.

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

Custom styles (CSS)

When planning to make just style changes to a WordPress website then using a child theme is optional.

Since version 4.7, WordPress comes with Additional CSS feature to add custom CSS and to live preview the changes.

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

When need to display custom CSS even when the themes are switched then use a 3rd party plugin 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.

Custom code snippet

Adding code snippets to a WordPress website helps to extend functionality of the website. The process of adding a code snippet is not rocket science, but even a small mistake could crash a website.

When need to insert a custom code snippet to a website then using a child theme is also optional. Instead, use a WordPress plugin to add code snippet in WordPress.

How 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 a website, and the child theme must be activate.

When child theme is activate, WordPress looks 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 child theme

The process of creating own child theme is relatively simple:

Create a folder under the themes folder (wp-content/themes) to keep all the files needed for a child theme.
Create a new stylesheet file and name it style.css .
Add required header comment in style.css file.

/*
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
*/

The last step is to enqueue the parent and child theme stylesheets, if needed.

Good way of loading parent theme styles

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

Note, when using a premium theme by Themes Harbor then no need to load the parent theme styles. Our themes take care of it.

Bad way of loading parent theme styles

There are cases when websites use @import in stylesheet files to load additional CSS.

Try to avoid this method.

It’s a bad practice to use @import for loading multiple stylesheets, and as from a page speed standpoint, it should almost never be used on the website since it prevents stylesheets from being downloaded concurrently.

Below is 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

When a child theme is not loading a parent stylesheet, the website might look 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 a website looking broken.

Premium themes by Themes Harbor

When using a premium theme developed Themes Harbor you do not need to worry about creating a child theme.

Our professional WordPress themes include an access to blank themes. Use the list below to download a child theme for the theme from Themes Harbor:

Customize WordPress theme

When wanting to override template files of a parent WordPress theme then 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 done working on a child theme, activate it:

Go to Appearance → Themes in your WordPress admin area.
Find a child theme in the themes list.
Activate the theme.