Enjoy upto
80% OFF

How to create a child theme in WordPress

How to create a child theme in WordPress

Do you want to create a child theme in WordPress?

child theme is a WordPress theme that inherits the functionality, features, and style of another WordPress theme, the parent theme. You can then customize the child theme without making any changes to the parent theme.

Child themes are the best way to customize a WordPress theme because they save time and effort. The parent theme already contains lots of formatting and functionality, so you don’t have to code everything from scratch.

They also make it safe to update your WordPress themes. Because you modified the child theme and not the parent, you won’t lose any customization when you update the parent theme.

In this article, we’ll discuss how to create a child theme in WordPress step-by-step guide, then we’ll discuss how to install and activate a child theme on your WordPress site.

What is a WordPress child theme?

A WordPress child theme is not a standalone theme. It’s a “child” of an existing parent theme, hence the name.

You’ll install it alongside your parent theme, but it gives you a chance to safely make changes to your parent theme without needing to edit the parent theme itself.

The child theme will pull most/all of its design settings from the parent theme. However, in situations where you make a change to the child theme, that change will override the settings in the parent theme.

Advantages to create a child theme in WordPress

At this point, you might be wondering why you can’t just make your changes directly to the parent theme.

The main reason why that isn’t a good idea is theme updates.

If you want to keep your WordPress site secure and well-functioning, you need to promptly apply updates as they come out, including updates to your theme.

If you customize your site by directly editing your theme (without a child theme), then that means you will overwrite all of your changes every time you update the theme.

That means you either:

  • Update your theme and lose your work. Not a very fun experience, right?
  • Don’t update your theme so that you don’t lose your work…which isn’t good for your site’s security and functioning.

With a WordPress child theme, you can make all of your changes in the child theme. Then, you’ll be able to update the parent theme without losing any of your work.

Beyond helping you safely update, using a child theme is also just generally convenient for making customizations. Because it segregates all of your changes in one spot, it’s easy to track all of your edits and tweak them as needed.

It also makes it easy to go in reverse. For example, if you want to stop using your edits and go back to the “vanilla” parent theme, all you need to do is disable your child theme.

Some off-the-rack WordPress themes even use this parent/child approach by default. For example, if you want to use the Genesis Framework, you’ll need both the parent theme (the basic framework) and a child theme to control the design.

When to use a child theme

Other than a few exceptions that we’ll list below, you should always use a child theme if you’re planning to make your edits to an existing WordPress theme.

When you don’t need to use a child theme

In general, using a child theme is a good best practice whenever you’re customizing your WordPress theme.

However, there are some exceptions to the rule where there might be a better option than using a child theme.

First, if you just want to make a few minor CSS modifications, it might be overkill to create a child theme just for a few tweaks.

Instead, you can add your custom CSS using the built-in Additional CSS feature in the WordPress Customizer. Or, you can use a free plugin such as Tom Usborne’s Simple CSS plugin.

Second, if you’re making changes that you want to be theme-independent, a child theme might not be the best option.

For example, if you’re registering a custom taxonomy or custom post type, you probably don’t want to use your child theme’s functions.php file (because you’d want to keep those even if you switch themes). Instead, you should just add the code outside of your theme entirely with a plugin such as Code Snippets or your custom plugin.

How to create a child theme in WordPress

To create a child theme, you should be aware that you will be working with code. You’ll need a basic understanding of HTML and CSS to understand what changes you need to make to the code to achieve your goals.

Some knowledge of PHP is also helpful. You should at least be familiar with copying and pasting code snippets from other sources.

We recommend you practice on your local development environment. You can move a live WordPress site to a local server for testing purposes or use dummy content for theme development.

Finally, you need to decide on a parent theme. You should choose a parent theme that’s similar in appearance and features to your end goal. The aim is to make as few changes as possible.

Manually create a child theme

For this section, we’ll assume that you know a little bit about PHP and CSS. If you feel overwhelmed by the instructions here, we would recommend sticking with the free plugin from the previous section.

To manually create a child theme, you need to create two files (these are the bare minimum for a child theme):

  • style.css – at the beginning, all you need to add is some boilerplate code.
  • functions.php – this lets you enqueue the stylesheet from the parent theme. Without this, your child theme wouldn’t be able to apply your parent theme’s CSS, which would make your site look super ugly!

1st, create a file named style.css and add the following code:

/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Next Addons Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

Make sure to replace everything that comes after the colons with your actual information:

  • Theme Name – the name for your child theme.
  • Theme URI – the website for your theme and its documentation.
  • Description – a short description of the theme.
  • Author – the theme author’s name.
  • Author URI: – the theme author’s website.
  • Template – the name of your parent theme’s folder (as named inside your wp-content/themes folder). This is the most important line as your child theme won’t work without this.
  • Version – the version number of your child theme.
  • Text Domain – this is used for internationalization. You can just append “-child” to the end of the template name.
  • License – leave this as the default.
  • License URI – leave this as the default.

Excluding the Template line, it’s not important what you enter, so don’t stress too much. Just make sure to properly enter your parent theme’s folder name for the Template.

If you want to add your custom styles in the future, you can add them to this stylesheet below the boilerplate code.

2nd, create a file named functions.php and add the following code:

Next, you need to create the functions.php file for your child theme. Again, this is what lets you enqueue the full CSS stylesheet from your parent theme.

In the functions.php file, add the following code:

<?php
/* Function to enqueue stylesheet from parent theme */

function child_enqueue__parent_scripts() {

wp_enqueue_style( ‘parent’, get_template_directory_uri().’/style.css’ );

}

add_action( ‘wp_enqueue_scripts’, ‘child_enqueue__parent_scripts’);

Finally, Upload files to your WordPress Site

Once you have your style.css file and functions.php file, you need to upload them to your WordPress site as a new theme.

To do so, connect to your WordPress site using FTP.

Then, browse to your site’s theme directory (wp-content/themes) and create a new folder for your child theme.

For example, if your parent theme’s folder is hello-elementor, you could name the child theme folder hello-elementor-child to help you remember it.

Then, upload your style.css and functions.php file inside of that folder:

Once you’ve uploaded both files, you can go to Appearance → Themes and activate your child theme just like you would any other WordPress theme.

How to install a WordPress child theme

We touched on some of this above in the specific methods, but let’s go through how to install a WordPress child theme one more time.

This will also be useful if you downloaded a pre-made child theme from your theme’s developer, rather than creating it yourself.

You can install a WordPress child theme just like you would any other WordPress theme:

  • Go to Appearance → Themes in your WordPress dashboard.
  • Click on Add New.
  • Upload the ZIP file for your child theme.

During the installation process, WordPress will detect that you’re uploading a child theme and check to make sure that the parent theme exists:

Once you upload the file, make sure to Activate it.

Remember, for your child theme to work, you need to install both your parent theme and the child theme.

Your child theme should be your active theme, but you still need to have your parent theme installed.

Here’s what it should look like:

  1. The child theme is the active theme
  2. The parent theme is still installed, but not active

How to customize a child theme

Just as with customizing a regular WordPress theme, you have multiple options for how to “customize” a child theme.

To be more accurate, you’re not customizing the child theme
— you’re using the child theme to customize the existing theme (the parent).

First, we’ll show you some ways in which you can use code to customize your child theme.

Customize a child theme with code

If you want to customize your child theme with code, you will need to have a good working knowledge of CSS, HTML, and PHP.

Here are some of the things that you can do:

Add custom CSS

To customize your child theme with CSS, you can add CSS directly to your child theme’s style.css file.

Add CSS below the existing code at the top of the file.

Any CSS that you add to your child theme will override your parent theme as long as you’re using the same selectors.

Override existing templates

If you want to override your parent theme’s templates, you can:

  • Copy the template file from your parent theme to your child theme.
  • Edit the template file in your child theme.

For example, if you want to edit single.php, you would first copy the single.php file from your parent theme to your child theme (making sure to preserve the same directory structure, if applicable).

Then, you can edit the code in your child theme’s version of single.php.

Add new templates

In addition to copying and editing your parent theme’s existing templates, you can also create new custom templates in your child theme.

For example, if you want to create a template for a custom post type that you added, you could add that template to your child theme.

How to remove a WordPress child theme

If you want to stop using your child theme, you can deactivate it just like you would a regular WordPress theme.

Following those steps to remove child theme:

  • Go to Appearance → Themes.
  • Activate another theme. Either the parent theme or a brand-new WordPress theme.

Just remember – if you deactivate the child theme and move back to your parent theme, all of the changes that you added via your child theme will no longer be there.

Instead, you’ll be back to the “vanilla” design of your parent theme.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

elegantthemes
Golam Mostafa
Written by

Golam Mostafa

I'm a senior plugin developer for WordPress. I have four years of experience working as a software engineer for ADB Bank, and in 2018, I started developing plugins and founded ThemeDev.

Table of Content

Table of Contents

LTD Deals: 10+ Pro Plugins

Limited Time Offer
LTD Deals: 10+ Pro Plugins

Offer ends soon! Don't let it get away this time!

(NO RECURRING FEES)

Trusted by 25,099+ Customers

30 days Money Back Guarantee