How to create WordPress Child Themes
IONOS editorial team8 mins
Over the years, WordPress has gone from being a simple blogging tool to a user-friendly Content Management System (CMS). These days, it’s pretty hard to imagine the internet without it. Thanks to the tool’s popularity, many WordPress pros now specialise 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 appearance 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 automatically 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 customisations.
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 maintenance mode.
What does a WordPress child theme contain?
WordPress child themes can have a number of different components. 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:
- CSS style sheet file: style.css
- function.php
- screenshot.png (optional)
Let’s look at why a WordPress child theme needs these three files.
WordPress child theme components
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 declarations that control the look of the theme. The most important part here is the header, because it gives WordPress basic information about the theme and tells it which parent theme the child theme is related to.
- function.php determines 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.
- screenshot.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 automatically displays screenshot.png files in the theme menu of the relevant template.
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 Customizer tool (WordPress version 4.7 and later).
Advantages and disadvantages of WordPress child themes
Using a WordPress child theme has lots of advantages. Nonetheless, there are a few disadvantages 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.
| Advantages | Disadvantages |
|---|---|
| Changes are not overwritten when the parent theme is updated | Updating the original template only fixes security vulnerabilities in the templates files in the parent theme folder. The vulnerabilities will therefore still be present in the template files in the WordPress child theme folder. |
| A WordPress child theme offers more flexibility 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 performance, 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 Customizer). | |
| 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. |
- 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 installation:
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 information 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 necessarily 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 installation.
- Template: This information tells WordPress which parent theme your child theme is linked to.
Once you’ve created the file and entered the necessary information, 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 instruction 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 possibilities:
- The parent theme is set to load both style sheets. In this case, the WordPress child theme doesn’t need to do anything else.
- 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.
- 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.
You can also add a third file, called screenshot.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 “Appearance” > “Themes”.
If you’ve already made changes to the parent theme using the WordPress Customizer, these will be lost when you activate your WordPress child theme. However, using the Customizer Export/Import plugin you can export your Customizer settings and then import them again once you’re ready.
Congratulations! 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 automatically override the file in the parent theme.
Why not try WordPress hosting with IONOS? You’ll get a hosting platform that’s specially optimized for WordPress, making it really easy to create your own WordPress website.
