Over the years, WordPress has gone from being a simple blogging tool to a user-friendly Content Man­age­ment System (CMS). These days, it’s pretty hard to imagine the internet without it. Thanks to the tool’s pop­ular­ity, many WordPress pros now spe­cial­ise in creating WordPress themes as templates for websites.

These themes provide almost all the features that site owners are looking for and thanks to the huge number of choices out there almost everybody will find a design that they like. However, for a site to truly reflect a company’s corporate design, small tweaks usually still have to be made, for example, to the code or the structure. But what happens to these changes when the theme gets updated? Well, that’s where WordPress child themes come in handy.

What is a WordPress child theme?

To make sure that you don’t lose your changes when your website theme is updated, it’s a good idea to create a WordPress child theme. A child theme inherits its ap­pear­ance and functions from a main theme, which is known as – you guessed it – the parent theme. The two are linked. When you make changes in a WordPress child theme, they auto­mat­ic­ally override the relevant parts of the parent theme, but do not actually overwrite it. This means you can safely update the parent theme without losing any of your cus­tom­isa­tions.

Tip

While you’re making major changes or running updates, error messages may be displayed on your website. So that you don’t annoy your visitors, it’s best to enable the WordPress main­ten­ance mode.

What does a WordPress child theme contain?

WordPress child themes can have a number of different com­pon­ents. The important thing is to know which files to make your changes in. There are some files that all WordPress child themes need in order to work correctly. These are:

Let’s look at why a WordPress child theme needs these three files.

WordPress child theme com­pon­ents

A WordPress child theme will only work if you’ve created the three files listed above. The purposes of these files are as follows:

  • style.css contains all of the CSS rules and de­clar­a­tions that control the look of the theme. The most important part here is the header, because it gives WordPress basic in­form­a­tion about the theme and tells it which parent theme the child theme is related to.
  • function.php de­term­ines the order in which the style sheets of the parent and child themes will load. For the changes you make in the child theme to override the parent theme, the browser has to load the style sheet of the WordPress child theme after the style sheet of the parent theme.
  • screen­shot.png is an optional file, but it’s a good idea to create one so that you can instantly recognise your WordPress child theme in the backend. WordPress auto­mat­ic­ally displays screen­shot.png files in the theme menu of the relevant template.
Note

If you only want to make tiny changes to a theme, you might prefer a simpler solution, such as the Simple Custom CSS plugin or the built-in Cus­tom­izer tool (WordPress version 4.7 and later).

Ad­vant­ages and dis­ad­vant­ages of WordPress child themes

Using a WordPress child theme has lots of ad­vant­ages. Non­ethe­less, there are a few dis­ad­vant­ages too, and it’s important to be aware of these so you can decide whether it’s worth creating a child theme. This is all the more true if you only want to make a few minor changes.

Ad­vant­ages Dis­ad­vant­ages
Changes are not over­writ­ten when the parent theme is updated Updating the original template only fixes security vul­ner­ab­il­it­ies in the templates files in the parent theme folder. The vul­ner­ab­il­it­ies will therefore still be present in the template files in the WordPress child theme folder.
A WordPress child theme offers more flex­ib­il­ity than the built-in options in the WordPress backend. For example, you can customise the layout and structure of your site and add extra functions to your theme. You may see an impact on per­form­ance, because the browser has to load two style sheets.
When you make extensive changes to the CSS, these are visible in the style.css file (unlike with the built-in WordPress Cus­tom­izer).
WordPress child themes are ideal for beginners who want to learn more about WordPress, because if things go wrong, they can easily go back to the parent theme.
Using a WordPress child theme can help you develop your site faster.
HiDrive Cloud Storage
Store and share your data on the go
  • Store, share and edit data easily
  • ISO-certified European data centres
  • Highly secure and GDPR compliant

How to create a WordPress child theme: A step-by-step guide

Now that we’ve seen why WordPress child themes are useful, let’s look at how to go about creating one.

Step 1: Create a child theme folder

Using an FTP client such as FileZilla, log in to your server and locate the following folder in your WordPress in­stall­a­tion:

your-wordpress-installation-path/wp-content/themes/

In the themes folder, create a sub-folder for your WordPress child theme. It’s best to give the folder the same name as the parent theme, but with “-child” added to the end.

Step 2: Create the style sheet for the child theme

Create a style.css file and use a text editor to add the following in­form­a­tion to the header:

/*
 Theme Name:  [Name of parent theme] Child
 Theme URI:  [http://example.com/parent-theme-child/]
 Description:  [Name of parent theme] Child Theme
 Author:  [Your name]
 Author URI:  [URL of your website]
 Template:  [Name of the parent theme folder] 
 Version:  1.0.0
Text Domain:  [Name of the parent theme]-child
*/

In the example above, the parts in square brackets indicate places where you need to enter your own values. You don’t ne­ces­sar­ily have to include all of these lines. The ones the WordPress child theme actually requires to work properly are:

  • Theme Name: Every theme – parent or child – has to have a name. The name needs to be unique and must not be used by any other theme within your WordPress in­stall­a­tion.
  • Template: This in­form­a­tion tells WordPress which parent theme your child theme is linked to.

Once you’ve created the file and entered the necessary in­form­a­tion, upload it to the WordPress child theme folder via FTP.

Step 3: Make sure the style sheet loads correctly in function.php

In the ideal scenario, your parent theme will already contain an in­struc­tion for loading the style sheet of your WordPress child theme. However, not all themes do this. You, therefore, need to check how the parent theme is set up. There are three pos­sib­il­it­ies:

  1. The parent theme is set to load both style sheets. In this case, the WordPress child theme doesn’t need to do anything else.
  2. The parent theme loads its own style sheet via get_template_directory() or get_template_directory_uri(). In this case, the WordPress child theme only needs to load its own style sheet, using the handle of the parent theme style sheet as a parameter in function.php.
  3. The parent theme loads its own style sheet via get_stylesheet_directory() or get_stylesheet_directory_uri(). In this case, the WordPress child theme needs to load both style sheets in function.php. Make sure you use the same handle name as the parent does for the parent styles.

Here’s what the code will look like in the second of the scenarios listed above:

<!--?php</codesnippet-->
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'Name of parent theme style sheets'), 
        wp_get_theme()->get('Version') // This will only work if your header contains the Version line 
    );
}
?>

If the WordPress child theme needs to load both style sheets via function.php, the code will be as follows:

<!--?php</codesnippet-->
function child_theme_styles() {
wp_enqueue_style( 'Name of parent theme style sheets', get_template_directory_uri() . '/style.css'); 
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('Handle name of parent theme style sheets'));
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
?>

Put the function.php file with the style.css file in the WordPress child theme folder.

Note

You can also add a third file, called screen­shot.png, to the WordPress child theme folder. WordPress will show this image in the themes section of the backend to make it easier for you to identify your theme.

Step 4: Enable your WordPress child theme

Once you’ve created your WordPress child theme, you need to activate it in the backend just as you would with any other theme. To do this, log in and locate your child theme under “Ap­pear­ance” > “Themes”.

Note

If you’ve already made changes to the parent theme using the WordPress Cus­tom­izer, these will be lost when you activate your WordPress child theme. However, using the Cus­tom­izer Export/Import plugin you can export your Cus­tom­izer settings and then import them again once you’re ready.

Con­grat­u­la­tions! Your WordPress child theme is now ready to use. If you want to make changes to another templates file, first copy the file from the parent theme folder and paste it in your child theme folder. The path must match that of the parent theme. The modified file in the WordPress child theme folder will auto­mat­ic­ally override the file in the parent theme.

Tip

Why not try Hosting for WordPress with IONOS? You’ll get a hosting platform that’s specially optimized for WordPress, making it really easy to create your own WordPress website.

Go to Main Menu