How to create a child theme on WordPress

No mat­ter whe­ther you have your web­site crea­ted by an agen­cy, hired a free­lan­cer or take care of it yours­elf — you should defi­ni­te­ly crea­te a child the­me befo­re you start adding con­tent to your page.

Why should I create a child theme for WordPress? #

Word­Press the­mes are updated regu­lar­ly by the aut­hors. With a the­me update, all files in the fol­der are going to be over­writ­ten.

If you now make chan­ges yours­elf, which makes sen­se from time to time, the­se files will be over­writ­ten during an update.

Then I just stop updating my the­me? Sure, you could do that, but at some point you run the risk that your the­me is no lon­ger com­pa­ti­ble with the latest Word­Press ver­si­ons and errors occur.

The effort for crea­ting a child the­me is actual­ly mini­mal. Plus, you only need to do this job once. After that, ever­y­thing runs by its­elf.

How can I create a child theme? #

First sel­ect and acti­va­te the the­me of your choice for which you want to crea­te your child the­me. (Design> The­mes)

Create a folder for the child theme #

As soon as you have instal­led your the­me, you con­nect to your ser­ver with the FTP cli­ent of your choice. The­re you switch to the fol­der wp-con­tent > the­mes.

Now crea­te a new fol­der. How you call this is up to you. Usual­ly you take the title of the the­me and add “-child” to it.

For exam­p­le, “twen­tyt­wen­ty” beco­mes “twen­tyt­wen­ty-child”.

Create the style.css file #

Once you’­ve crea­ted the fol­der, crea­te a file cal­led style.css. Insert the fol­lo­wing tem­p­la­te and replace the texts after­wards:

/*  
    Theme Name:   Twenty Twenty Child  
    Description:  Mein Child Theme  
    Author:       Mein Name
    URI:          Meine Webseiten URL
    Template:     twentytwenty
    Version:      1.0  
    Text Domain:  twenty-twenty-child 
*/

Create the functions.php #

Now we have to crea­te the functions.php file in the child the­me fol­der. Pas­te the fol­lo­wing code as a tem­p­la­te.

function child_theme_styles()
{
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-theme-css', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));

}

add_action('wp_enqueue_scripts', 'child_theme_styles');

The code spe­ci­fies that the style­sheet from the ori­gi­nal the­me is loa­ded first. The style­sheet is then loa­ded from the child the­me.

Create a preview image #

You can now crea­te a pre­view image that will then be dis­play­ed under Design > The­mes. For this, you sim­ply crea­te an image with the name “screenshot.png” and save it in the child the­me fol­der. Alter­na­tively, you can also copy the image from the ori­gi­nal the­me.

Activate the child-theme #

Now all you have to do is acti­va­te the child the­me. To do this, switch back to your Word­Press dash­board under Design> The­mes and acti­va­te it.

The child the­me should now be acti­va­ted and you can start to add your con­tent.

Further adjustments #

If you only instal­led the child the­me after­wards, you have to app­ly a few cus­to­miza­ti­on set­tings. You can use the Cus­to­mi­zer Export / Import plug­in for this.

Summary #

That’s it alre­a­dy. You see, the effort for crea­ting a child the­me was rela­tively easy and quick to do. In addi­ti­on, it saves a lot of work as soon as the­re is an update.