Skip to Main Content

How to create and customize a child theme on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

What is a child theme and why is it so important?

In this post, we are going to give you the answers to these questions and show you step by step how to create and customize your own child theme using plugins or code.

If you want make changes to the theme of your WordPress site,you've probably seen people tell you to use a child theme.

But what is a child theme, and why are child themes so important?

In this post, we're going to give you the answers to these questions along with an introduction to child themes and how they are perfect for you. 

Then we will show you step by step how to create and customize your own child theme using plugins or code.

But, if you've never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog

And then let's come back to what we are here for.

What is a child WordPress theme?

A child theme is not a stand-alone theme. It is 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 get most / all of its design settings from the parent theme. However, in situations where you change the child theme, this change will override the settings of the parent theme.

Benefits of a child theme

At this point, you may be wondering:  why can't you just make your changes directly to the parent theme?

The main reason it's not a good idea is WordPress themes updates.

If you want to keep your WordPress website safe and functioning, you need to quickly apply updates as they come out, including updates to your WordPress theme.

If you customize your website by directly modifying your theme (no child theme), which means that you will overwrite all your changes every time you update the WordPress theme.

This means that you:

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

Beyond helping you update safely, using a child theme is also generally handy for making customizations. Because it separates all your changes in one place, it's easy to track all of your changes and change them as needed.

It's also easy to go upside down. For example, if you want to stop using your changes and revert to the parent theme, just deactivate the child theme.

Some WordPress themes even use this parent / child approach by default. For example, if you want to use the Genesis framework, you will need both the parent theme (the base framework) and a child theme to control the design.

When to use a child theme

Apart from a few exceptions which we will list below, you must always use a child theme if you plan to make your own modifications to an existing WordPress theme.

When you don't need to use a child theme

In general, using a child theme is a good practice whenever you customize your WordPress theme.

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

First off, if you just want to do some minor CSS tweaking, it might be overkill to create a child theme just for a few tweaks.

Instead, you can add your custom CSS using the feature Additional CSS integrated into the WordPress Customizer. Or, you can use a free WordPress plugin such as Simple CSS.

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

For example, if you register a custom taxonomy or a custom post type, you probably don't want to use the file functions.php of your child theme (because you want to keep them even if you change the theme). Instead, you should just add the code outside of your theme with a plugin such as Code Snippets or your own custom plugin.

How to create a child theme on WordPress

Now that you know why child themes are important, let's get into how you can actually create a child theme for your WordPress website.

First, if you are using the Hello Elementor theme, we've already created a child theme for you - you don't need to do it yourself. You can grab the Hello Elementor child theme from WordPress.org. You can install it like any other WordPress theme (we'll also show you how to install a child theme later in this post).

If you're using a different WordPress theme, it's always worth taking a quick Google look to see if your WordPress theme developer is providing a child theme. For example, Astra, GeneratePress, and OceanWP all have tools / files to help you download a child theme.

If your WordPress theme doesn't already have a child theme, you can create a child theme for any WordPress theme:

  1. Use a free WordPress child theme generator plugin.
  2. Manually create your own child theme.

We will show you how to perform both methods.

How to use a child theme WordPress plugin

A child theme generator plugin allows you to create a child theme without leaving your WordPress dashboard.

The most popular option here is the free child theme configurator plugin, which is active on over 300.000 websites.

Child Theme Configurator not only helps you create the child theme files, but it will also analyze the theme you are using and the theme and font style sheets as needed.

It also includes other useful features if you are trying to create a child theme on a website where you have already added content. For example, it can copy your existing widgets and customizer options to the child theme.

However, if you plan to use the Plugin on a websiteoperational, we recommend that you make a full backup before proceeding. Or, ideally, set it all up on a demo website.

Once you have your backup ready, start by installing and activating the free Child Theme Configurator plugin from WordPress.org. Then go to the menu Tools → Child Themes to create your child theme.

In the list Select one drop-down parent theme, select the theme for which you want to create your child theme. Then click on Analyze:

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

The plugin will then analyze the parent theme for any dependencies.

Once done, you will see a few more options to configure how to create your child theme. If you're not sure what a specific setting means, you can just leave it as the default:

 

Once you are done making your choices, click the button at the bottom to to create a new child theme.

And that's all ! The plugin will then create the child theme for you. However, it will not activate NOT this child theme.

To activate it:

  • Go to Appearance → Themes.
  • Preview what your website looks like with this child theme (to make sure it works - if your website looks odd, it's probably because of a CSS issue).
  • Activate your child theme as you would any other WordPress theme. Make sure to leave your parent theme installed, however.

Once you've activated your child theme, the Child Theme Configurator plugin also offers other useful tools to help you manage the child theme. For example, if you go to the tab Files from plugin settings, you can view all associated files in parent theme and child theme.

Then you can copy files from the parent theme to the child theme.

For example, if you want to make some changes to single.php, you can copy this file to the child theme so that you can safely edit it:

You'll also find plenty of other tools to help you work with CSS.

We'll explain why these tools are useful later.

How to manually create a child theme

For this section, we'll assume that you know a bit more about PHP and CSS. If you feel overwhelmed with the instructions here, we recommend using the free plugin from the previous section.

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

  • style.css - at the start all you need to add is a boilplate code.
  • functions.php - this allows you to load the stylesheet of the parent theme. Without it, your child theme would not be able to apply the CSS from your parent theme, making your website super ugly!

style.css

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

First, 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: Elementor 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 anything that comes after the colon with your actual information:

  • Theme name - name of your child theme.
  • URI Theme - the website of your theme and its documentation.
  • Description - a short description of the theme.
  • Author - the name of the author of the theme.
  • Author URI: - the website of the theme author.
  • template - name of your parent theme folder (as named inside your wp-content / themes folder). This is the most important line; your child theme will not work without it.
  • version - version number of your child theme.
  • Text field - this is used for internationalization. You can just add "child" to the end of the template name.
  • Licence - leave this as default.
  • URI License - leave this as default.

Excluding the row Template, it doesn't really matter what you enter, so don't stress too much. Just make sure you enter your parent theme's folder name correctly for the template.

If you want to add your own custom styles in the future, you can add it to this stylesheet under the boilplate code.

functions.php

Then you need to create the file functions.php for your child theme. Again, this is what allows you to load your parent theme's full CSS stylesheet.

In the file functions.php, 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');

Upload files to the WordPress website

Once you have your files style.css et functions.php, you need to upload them to your WordPress website as a new theme.

To do this, connect to your WordPress website using FTP.

Then go to the theme directory of your website (wp-content / themes)and create a new folder for your child theme.

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

Then upload your file style.css et functions.php inside this folder:

Once you have downloaded both files you can go to Appearance → Themes and activate your child theme as you would any other WordPress theme.

How to install a child WordPress theme

We've covered some of these aspects above in the Specific Methods, but we'll go through how to install a WordPress child theme once more.

This will also come in handy if you downloaded a child theme from your theme developer's website, rather than creating it yourself.

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

  • Access to Appearance → Themes In your WordPress dashboard.
  • Click on Add new.
  • Upload the ZIP file of the child theme.

During the installation process, WordPress detects that you are downloading a child theme and checks that the parent theme exists:

Once you have downloaded the file, be sure to activate it.

Remember, for your child theme to work, you need to install at that timethe parent theme and the child theme.

Your child theme should be your active theme, but you should still 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 like with customizing a regular WordPress theme, you have several options to "customize" a child theme.

To be more precise, you are not really customizing the child theme - you are using the child theme to customize the existing (parent) theme.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

First, we'll show you a few ways you can use the code to customize your child theme. Next, we'll share an easier way to personalize things with Elementor Theme Builder.

Customize a child theme with code

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

Here are some of the things you can do:

Add custom CSS

To customize your child theme with CSS, you can add it directly to the file style.css of your child theme.

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

Any CSS you add to your child theme will replace that of your parent theme as long as you use the same selectors.

Replace existing templates

If you want to replace the templates of your parent theme, you can:

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

For example, if you want to change single.php, you copy the file first single.php from your parent theme to the child theme (making sure to keep the same structure).

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

Note: WordPress will use your child theme's template as long as it has the same name. Because of this, you pretty much hide the existing template in the parent theme.

If you are using the Child Theme Configurator plugin that we mentioned above, it can help you copy files to the child theme without leaving your WordPress dashboard.

Add new templates

In addition to copying and modifying existing templates from your parent theme, you can also create new custom templates in the child theme.

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

Customize a child theme with Elementor theme generator

If you are not familiar, Elementor Theme Builderallows you to customize part or all of your WordPress theme using a visual interface.

With Elementor Pro and Theme Builder, you can create custom templates for your website templates:

  • Header
  • Footer
  • Single (e.g. a single blog post or page)
  • Archives (e.g. the page that lists all your blog posts)

These templates will work with both the child theme and the parent theme.

With Elementor Theme Builder, you won't need to work with code directly. There is no adding custom CSS or copying your PHP template files - you do everything with drag and drop.

For example, suppose you want to customize the header for your child theme. Instead of needing to copy your file header.php on your child theme, then change the PHP, you can just design a new header using Elementor's visual and drag and drop interface. Then you can apply this header anywhere on your website or just specific parts of your website.

If you're new to CSS, HTML, and PHP, this no-code approach lets you customize your child theme. And even if you do, this visual approach can still save you a lot of time than with PHP in your template files.

When you create a new template with Elementor Theme Builder, you will be able to choose the template type. For example, a header.

Then you can either start from a blank slate or choose one of the Elementor Pro models:

From there, you can use the sidebar drag and drop options to control the appearance of your header:

Once done, you can choose exactly where you want to use this header template:

How to delete a child theme on WordPress

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

This is :

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

Remember that if you turn off the child theme and switch back to your parent theme, any changes you added through your child theme will no longer be there.

Instead, you'll be back to designing your parent theme.

Start using a WordPress child theme

A child theme helps you safely make changes to your WordPress theme.

Your child theme will inherit all of its styles from your parent theme, but any changes you make to the child theme will override the parent theme. This means that you can safely update your parent theme without losing any changes you made in the child theme.

To get started with a WordPress child theme, you can:

  • Check if your theme developer already offers a child theme. If you are using Hello Elementor, you can download a child theme for it from GitHub.
  • Use the free child theme configurator plugin.
  • Manually create your child theme.

From there, you can customize your child theme using CSS, HTML, and PHP. You can also skip the code and use Elementor Theme Builder to customize your theme using a visual drag and drop interface.

Discover also some themes and premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. AP Pricing Tables

AP Pricing Table is a premium WordPress plugin that allows you to easily create price grids rich in features and with intuitive interfaces. It offers 35 predefined models and an unlimited number of options.

Ap pricing tables responsive pricing table builder plugin for wordpress

With this easy-to-use WordPress plugin, designing a stunning price chart in just a few clicks will be very easy. It allows you to create unlimited price grids by providing the ability to add rows and columns, define the column border, the space between columns, the width of columns, and much more.

Read also How to customize the WooCommerce "Add to Cart" button

This plugin also allows you add audio content, video and Google Map.

DownloadDemo | Web hosting

2.wp Page builder

WordPress Page Builder is the ultimate builder for your WordPress website that comes with great tools to generate any custom post, custom taxonomy, or custom metabox. 

Wp page builder - wordpress plugin metabox

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

As features it has among others: a custom post typeCPT, a personalized taxonomy, advanced custom fields, drag and drop functionality, supported Google Map location, supported repeatable fields as well and much more.

Download | Demo | Web hosting

3. Rankie

Rankie is a very handy WordPress module designed with the aim of regularly checking WordPress rankings on Google while closely monitoring the position of each keyword.

Rankie wordpress plugin for SEO

As a ranking tracker plugin, Rankie will update keyword positioning daily and generate accurate reports.

 Read also our 6 regular questions related to SEO and redirects

It also incorporates a powerful research tool that generates valuable keyword lists. Google is already using it for research.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's it for this tutorial. Do you still have questions about the usefulness of a child theme on WordPress? Let us know in the comments section and we will try to help!

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

Do not hesitate to share with your friends on your favorite social networks

...  

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
1 shares
Share
tweet
Save1