How to Use a Child Theme in WordPress

When building a WordPress website, customization often requires altering theme files. However, directly editing the theme’s files can create issues, especially when the theme gets updated. When the theme updates, your customizations could be lost. This is where child themes come in—providing a safe way to make changes without risking your custom code being overwritten by updates.

In this guide, we’ll walk you through how to create, install, and use a child theme in WordPress.

What is a Child Theme?

A child theme is a theme that inherits the functionality and styling of its parent theme. It allows you to make customizations without modifying the parent theme’s files directly. When you use a child theme, all of your changes are stored in the child theme folder, ensuring that updates to the parent theme don’t overwrite your customizations.

For example, if you’re using a theme like Astra, you can create a child theme of Astra and make changes to it. Even when Astra is updated, the changes you made in your child theme will remain intact.

Why Use a Child Theme?

There are several benefits to using a child theme in WordPress:

Preserve Customizations: Updates to the parent theme won’t overwrite your customizations.
Safe Experimentation: You can try out new features and designs without affecting the original theme.
Better Organization: All custom modifications are contained in the child theme, making it easier to manage your custom code.
Easier Debugging and Maintenance: If an issue arises, it’s easier to troubleshoot because you can isolate custom code in the child theme.

How to Create a Child Theme in WordPress

There are two ways to use a child theme in WordPress: manual creation and using a plugin. Below, we’ll focus on manual creation.

1. Create the Child Theme Folder

To begin, you need to create a folder for your child theme:

Access Your Website Files: Use an FTP client like FileZilla, or go to your hosting provider’s file manager to access your WordPress files.
Navigate to the Themes Directory: Go to the /wp-content/themes/ folder.
Create a New Folder: Inside the themes folder, create a new folder for your child theme. Name it something recognizable, such as astra-child if you’re using the Astra theme, or twenty-twenty-one-child for the default WordPress theme.

2. Create a Style.css File

The next step is to create a style.css file in the child theme folder. This file will tell WordPress that this folder is a child theme.

Create a New CSS File: Inside your child theme folder, create a new file called style.css.
Add Header Information: Add the following code to the top of the style.css file, making sure to change the details based on your theme:
/*
Theme Name: Astra Child
Theme URI: http://example.com/astra-child/
Description: Astra Child Theme
Author: Your Name
Author URI: http://example.com
Template: astra
Version: 1.0.0
*/
Import the Parent Theme’s Stylesheet: Below the header, you need to import the parent theme’s styles. Add the following line of code:cssCopy@import url("../astra/style.css"); This imports the CSS file from the parent theme and applies its styles to your child theme. Make sure to adjust the path if you’re using a different parent theme.

3. Create a Functions.php File

Now, you need a functions.php file in your child theme folder to properly enqueue the parent theme’s styles and functions.

Create a New PHP File: Inside the child theme folder, create a file called functions.php.
Enqueue Parent Theme Styles: Add the following code to ensure the parent theme’s stylesheet is loaded properly:

<?php
function my_theme_enqueue_styles() {
// Enqueue the parent theme’s stylesheet
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

This function tells WordPress to load the parent theme’s stylesheet alongside the child theme’s stylesheet.

4. Activate the Child Theme

After creating the child theme folder, style.css, and functions.php, the next step is to activate the child theme.

Go to WordPress Admin Dashboard: Log in to your WordPress admin area.
Navigate to Themes: Go to Appearance > Themes.
Activate the Child Theme: You should now see your child theme listed. Click on the Activate button to activate the child theme.

Once activated, your child theme will inherit the parent theme’s styles, and you can start customizing it without worrying about losing changes when the parent theme updates.

How to Customize Your Child Theme

Now that you have a child theme activated, you can start customizing your WordPress site.

1. Customizing the Styles

Edit the style.css File: You can add custom CSS in the style.css file to change colors, fonts, and other visual elements.
Override Parent Theme Styles: If you want to change a specific style from the parent theme, simply add your custom CSS rules in the child theme’s style.css file. These rules will override the parent theme’s styles.

2. Modifying Template Files

Copy Template Files: If you want to modify a template file, such as header.php or footer.php, you can copy the file from the parent theme into the child theme folder and make your changes. WordPress will use the template file from the child theme instead of the parent theme.
Add New Template Files: You can also create new custom template files in your child theme folder and assign them to specific pages or sections.

3. Adding Custom Functions

Edit the functions.php File: If you want to add custom functionality to your site, such as new widgets, custom post types, or additional features, you can add them in the functions.php file of your child theme.
Use Hooks and Filters: You can also use WordPress hooks and filters to modify existing functionality or add new features.

How to Use a Child Theme with a Page Builder

If you’re using a page builder like Elementor or Beaver Builder, you can still use a child theme. The child theme won’t interfere with how you build and design your pages using a page builder. However, the benefit of using a child theme is that any custom styles or PHP modifications you make will be preserved during updates, while your page builder designs remain unaffected.

Conclusion

Using a child theme in WordPress is essential for anyone who wants to make customizations while maintaining the integrity of the parent theme. By creating a child theme, you can modify your website’s design and functionality without worrying about updates overwriting your changes. It’s a best practice for developers and beginners alike.

Remember, a child theme consists of at least two files: style.css and functions.php, but you can add more files (like template files) as needed. Always keep a backup of your child theme and regularly test your site for compatibility after updates. With a child theme, you have a safer and more organized way to customize your WordPress site!

How to Use a Child Theme in WordPress