Creating a child theme for your WordPress theme

If you edit a theme's files directly, your work is lost with the next update of that theme. A child theme prevents that. It's a small theme that inherits everything from another theme, the parent theme, except what you add to it yourself. You can keep updating the parent theme as usual. Here you'll read when you need a child theme and how to create one with File Manager in DirectAdmin.

Do you need it?

Using a block theme? Then try the Site Editor first. If you want to save your Site Editor changes to files, the official Create Block Theme plugin can create a child theme for you.

Step 1: find your parent theme's folder

1. In DirectAdmin, open File Manager. See Opening File Manager: the folders in your package.
2. Go to domains/example.com/public_html/wp-content/themes.
3. Write down the exact name of your theme's folder, for example hoofdthema. It's the folder name that matters, not the name you see in WordPress.

Step 2: create the folder and style.css

1. In the themes folder, click New Folder and create, for example, hoofdthema-child.
2. Open that folder, click New File and create style.css.
3. Right-click the file, choose Edit, paste the header below and click Save.

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Eigen aanpassingen voor example.com
Version:      1.0.0
*/

/* Je eigen CSS komt hieronder. */

The Template: line is the most important one. It must contain the exact folder name of the parent theme, with the same capitals and hyphens. If it's wrong, WordPress will report that the parent theme is missing.

Step 3: functions.php or theme.json

Classic theme: in the same folder, create a functions.php that loads your stylesheet:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Whether the parent theme loads its own stylesheet differs per theme. Check your theme's documentation. If your site looks bare after activating, you also need to load the parent's stylesheet, using get_template_directory_uri() . '/style.css'. The child's functions.php doesn't replace the parent's: both are loaded, the child first. So never copy functions from the parent's functions.php, because duplicate function names cause a critical error.

Block theme: you usually don't need a functions.php. If you want a different colour palette, for example, create your own theme.json. WordPress merges it with the parent's, so you only include what you want to change.

If you want to modify a template, copy only that one file from the parent to the same location in your child and edit the copy. WordPress looks in the child first and then in the parent. Don't copy everything, or you'll stop receiving the parent's improvements.

Step 4: activate

1. In WordPress, go to Appearance > Themes. Your child theme is listed there. Click Activate.
2. Check your site: header, menus, widgets and colours. If needed, set up your menus and Customizer settings again.
3. Keep the parent theme installed and up to date. The child won't work without its parent.

Prefer to create the child theme on your own computer? Then zip the folder and upload it in WordPress under Appearance > Themes using the Add New Theme button and then Upload Theme. Or upload the folder to wp-content/themes with File Manager or SFTP, see Uploading and downloading files.

Back to the old theme

Under Appearance > Themes, activate the parent theme again. If an error in your child locks you out of the dashboard, rename the child's folder in File Manager, for example to hoofdthema-child-uit. WordPress will then fall back to a default theme, if one is still installed. More on this in Error 500 or "critical error" on your website (also after a WordPress update).

Further reading

• Child themes on developer.wordpress.org (English)

Want to learn more? Take the free WordPress course, lesson 5.2 Creating a child theme.