How to make a child theme in WordPress?

Are you looking to make custom changes to your WordPress website without altering the core theme files? Creating a child theme is the solution you need! A child theme allows you to modify the appearance and functionality of your website while preserving the integrity of the parent theme. In this comprehensive guide, we will walk you through the process of creating a child theme in WordPress.

A child theme is a separate theme that inherits styles, templates, and functionalities from its parent theme. It’s a recommended way to make changes to your website’s design and functionality while keeping the parent theme intact.

What is a Parent Theme?

A parent theme in WordPress is a theme that is declared parent by another theme, child theme. This feature in WordPress allows theme designers and developers to take advantage of a larger and robust WordPress theme and make modifications to those themes by creating child themes.

What is a Child Theme?

A child theme is an add-on for your existing WordPress theme, child theme, as defined by the WordPress Codex, is a theme that “inherits the functionality and styling of another theme, called the parent theme.” Child themes are recommended to modify existing themes while still maintaining their design and code.

If you are doing extensive customization – beyond genres and some theme files – creating a basic theme may be a better option than a child theme. Creating a core theme will allow you to avoid issues with demoted code in the future. This should be decided on a case-by-case basis.

Advantages of Using Child Themes

• Preserve Parent Theme: Updates to the parent theme won’t affect your customizations.
• Easy Maintenance: You can update the parent theme without losing your modifications.
• Organized Code: Your customizations are neatly organized in one place.
• Fallback System: If a template file is missing in the child theme, WordPress falls back to the parent theme.

A Step-by Step Guide to Creating a Child Theme in WordPress

#01: Create a child theme folder 

First, create a new folder in your themes directory, located at wp-content/themes.
The directory needs a name. It’s best practice to give a child theme the same name as the parent, but with -child appended to the end. For example, if you were making a child theme of twentytwenty, then the directory would be named twentytwenty-child.

#02: Create a stylesheet file: style.css

Next, you will need to create a stylesheet file named style.css, which will contain all of the CSS rules and declarations that control the look of your theme. Your stylesheet must contain the below required header comment at the very top of the file. This tells WordPress basic info about the theme, including the fact that it is a child theme with a particular parent.

/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    https://example.com/twenty-twenty-child/
 Description:  Twenty Twenty Child Theme
 Author:       John Doe
 Author URI:   https://example.com
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentychild
*/

The following information is must required:

• Theme Name – needs to be unique to your theme
• Template – the name of the parent theme directory. The parent theme in our example is the Twenty Twenty theme, so the Template will be twentytwenty. You may be working with a different theme, so adjust accordingly.

Add remaining information as applicable. The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly (below).

#03: Enqueuing Parent and Child Theme Styles

In the functions.php file of your child theme, enqueue both parent and child theme styles. This ensures your customizations are applied.

If the parent theme loads both stylesheets, the child theme does not need to do anything.

If the parent theme loads its style using a function starting with get_template, such as get_template_directory() and get_template_directory_uri(), the child theme needs to load just the child styles, using the parent’s handle in the dependency parameter.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ), 
        wp_get_theme()->get('Version') // this only works if you have Version in the style header
    );
}

#04: Overriding Template Files

To modify specific templates, create files with the same names in your child theme. WordPress will use these instead of the parent theme’s templates.

#05: Adding Custom Functions

Use the functions.php file to add custom functions and features. This keeps your modifications organized.

#06: Testing Your Child Theme

Activate the child theme and test your changes across different pages. Ensure everything looks and works as expected.

#07: Best Practices for Child Theme Development

• Use Descriptive Names: Choose clear and unique names for your child theme.
• Comment Your Code: Explain the purpose of functions and modifications.
• Stay Updated: Regularly update your child theme along with the parent theme.

#08: Troubleshooting Common Issues

If something isn’t working, check for typos and ensure your file structure is correct. Disable plugins to identify conflicts.

#09: Install child theme:

Install the child theme as you install any other theme. You can copy the folder to the site using FTP, or create a zip file of the child theme folder, choosing the option to maintain folder structure, and click on Appearance > Themes > Add New to upload the zip file.

#10: Activate child theme:

Your child theme is now ready for activation. Log in to your site’s Administration Screen, and go to Administration Screen > Appearance > Themes. You should see your child theme listed and ready for activation.

FAQs

Conclusion

Creating a child theme empowers you to make personalized changes to your WordPress site without jeopardizing future updates. It’s a fundamental practice for developers and website owners alike.