How to create a WordPress child theme safely
Do you want to make changes to your WordPress theme? Then a child theme is the safe way to do it. In this article I explain what a child theme is and how to create one.
What is a child theme?
A child theme is a theme that inherits the functionality of another theme (the "parent theme"). You can make changes in the child theme without modifying the original theme.
Benefits of a child theme:
- Your customizations are preserved after theme updates
- You can always go back to the original
- Easier to maintain than editing the theme directly
- Safer experimenting with code
- HTTP 404 Not Found: what does it mean and how do you fix it?
Step 1: create the child theme folder
Connect to your hosting via FTP or the file manager in DirectAdmin. Go to wp-content/themes and create a new folder.
Name the folder, for example: your-theme-child (replace "your-theme" with the name of your parent theme).
Step 2: create style.css
In the new folder, create a file called style.css with the following content:
/* Theme Name: Your Theme Child Template: your-theme*/
Important:
Theme Name: the name you see in WordPress (you can choose it yourself)Template: the exact folder name of the parent theme (must match exactly)
Step 3: create functions.php
Create a file called functions.php with this code:
<?php
add_action('wp_enqueue_scripts', 'child_theme_styles');
function child_theme_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_uri(), array('parent-style'));
}
This code makes sure that both the parent and child theme styles are loaded.
Step 4: activate the child theme
- In WordPress, go to Appearance > Themes
- You'll now see your child theme in the list
- Click Activate
Your site now looks the same as before, but it runs on the child theme.
Making customizations
CSS customizations
Add your own CSS to the child theme's style.css file, below the theme header:
/*
Theme Name: Your Theme Child
Template: your-theme*/
/* Your customizations below*/
body {
font-size: 16px;
}
.header {
background-color: #333;
}
Overriding template files
Do you want to change a template file (for example header.php)? Copy the file from the parent theme to your child theme folder and edit it there. WordPress automatically uses the version from the child theme.
Adding functions
You add extra functions to the child theme's functions.php. These are loaded in addition to (not instead of) the parent functions.
Common mistakes
Template name is wrong
The Template line in style.css must exactly match the folder name of the parent theme. Check this via FTP if your child theme doesn't work.
Styles don't load
Check that functions.php is correct and contains no PHP errors. Even a small typo can cause problems.
Customizations get overridden
Make sure your CSS is specific enough. Sometimes you need to add !important or use more specific selectors.
Child theme with a plugin
Don't want to write code? There are plugins that generate a child theme for you:
- Child Theme Configurator: automatically creates a child theme and helps with CSS customizations
- Child Theme Wizard: a simple wizard to generate a child theme
These plugins are handy for beginners, but creating one manually gives you more control.
When you don't need a child theme
A child theme isn't always necessary:
- For small CSS changes you can use the Customizer (Appearance > Customize > Additional CSS)
- If your theme itself already supports child themes with built-in options
- If you use a page builder such as Elementor for all customizations
Before you start, always make a backup of your site. That way you can always go back if something goes wrong.
Need help setting up your child theme? At Theory7 we're happy to help you.
Frequently asked questions
Will I lose my customizations when the parent theme updates?
No, that's exactly the benefit of a child theme. Your customizations are stored in separate files that are not overwritten.
Can I have multiple child themes?
You can create multiple child themes, but only one can be active at a time.
Does a child theme work with every theme?
Most themes support child themes. With some premium themes, support is limited or the theme comes with its own child theme.
0 van 0 vonden dit nuttig