How to Create a WordPress Child Theme

Last Updated February 28th, 2021 · WordPress

How to Create a WordPress Child Theme

Welcome to our definitive guide on WordPress child themes. Our company, Link Software, has been working with WordPress for nearly ten years. One of the more common requests our clients ask for is modifying their existing WordPress site’s design. This process often requires a WordPress child theme to be done right but it’s an area of website design and development that is often misunderstood.

First, it’s important to know what a WordPress theme actually is. A theme is a folder of static files that dictates your website’s layout and functionality. There are thousands of WordPress themes available to download, each of which offers a different, customizable design. After choosing the perfect theme, though, you should consider creating a child theme for it.

What is a WordPress child theme exactly, and why should you create one?

We have written this article to help educate WordPress users on what a child theme is, how you can create your own, and how child themes work for most of the major premium WordPress themes on the market today.


What is a WordPress Child Theme?

A child theme is a WordPress theme that inherits the properties of another theme. It features the same layout and offers the same functionality as its parent theme. A child theme is simply a customizable copy of another theme.

All child themes require a parent theme. When you install a child theme, your website will receive its layout and functionality from a parent theme. The difference is that child themes override their parent counterparts.

By default, a child theme is an exact copy of its parent theme. You can customize a child theme, however, by editing the code. Maybe you want to change the font type, or perhaps you want to add a new sidebar menu. You can customize nearly any aspect of your website’s layout or functionality by editing the theme’s code. Any changes that you make to a child theme’s code will override those of its parent theme.


The Benefits of Using a WordPress Child Theme

Using a child theme will allow you to perform updates more easily. During the early days of WordPress, website owners often struggled to change their themes. When they updated their themes, they would lose all of the customizations they had previously made. Child themes offer a solution. After installing a child theme, you can update its parent theme while retaining all customizations made to the former.

Less Worry About Theme Updates

You can still customize a standard theme by editing the code. Unfortunately, you’ll lose these customizations when you update it. Developers regularly release new versions of their themes. When you update a standard theme, the old version will be deleted and replaced with the new version, meaning you’ll have to customize it all over again. A child theme, on the other hand, will retain its customizations. You can download new versions of a parent theme without its child theme being affected.

Increased Speed and Fewer Plugins

You can use a child theme to make your website faster. While convenient, plugins are one of the leading causes of long load times for WordPress websites. The more plugins your website has, the slower it will be for visitors. With a child theme, you won’t have to use as many plugins. You can hard-code the features of plugins directly into your website’s child theme. Even after updating its parent theme, the child theme will retain these features.

Safely Test New Features

A child theme is an invaluable testing tool as well. You can use it to test changes in a safe environment. If you accidentally break your website when editing the code, you’ll have the parent theme on which to fall back. Editing the code of a standard theme is riskier. If you edit the code in a way that breaks your website, you may have to delete and re-upload the theme. Creating a child theme allows you to test layout or functionality changes in a safe environment.

WordPress for Nonprofits: 7 Reasons Why It Is the Right Choice
Related Article
WordPress for Nonprofits: 7 Reasons Why It Is the Right Choice

Nonprofits and charities routinely choose WordPress for managing their websites. Learn why WordPress is the best fit for these organizations.

Child themes are easy to use. They work like all other themes. The tricky part for some people is how to make a WordPress child theme to start. We’ll walk you through your options in detail in the next section.


Create A WordPress Child Theme

There are two ways to make a child theme on your own: building it from scratch or with a generator. We’ll walk you through both options in this section. If the process confuses you or you don’t feel comfortable, Link Software offers custom WordPress development services that can get your project moving forward at a reasonable cost.

Build Your Own WordPress Child Theme

Step #1: Create the Child Theme Folder

To create a child theme, start by creating a folder. This is the folder in which you’ll place the child theme’s files. You can give the new folder any name but try and keep it simple and don’t include any strange characters or spaces to ensure compatibility.

Step #2: Create a Stylesheet

After creating the folder, it’s time to create a Cascading Style Sheet (CSS) file. CSS files contain declarations that govern the appearance of a website. For a child theme, you must create a CSS file that includes information about it and its parent theme. The CSS file needs to include a unique name for the child theme. It also needs to include the name of the parent theme.

Here is an example CSS file, which is typically named style.css, for a child theme using the popular Twenty Twenty-One theme as its parent:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    http://example.com/twenty-twenty-one-child/
Description:  Twenty Twenty-One Child Theme
Author:       Your Name
Author URI:   http://example.com
Template:     twentytwentyone
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentytwentyonechild
*/

Obviously, you can name your theme whatever you want and give it whatever URIs you need for your project. The important piece in that file is the Template tag which we have set to twentytwentyone because it is the name of the folder our parent theme is in.

Step #3. Create a Functions File

Along with a CSS file, you’ll need to create a functions.php file. A functions.php file will allow the child theme to inherit properties from its parent theme via enqueuing. In this Hypertext Preprocessor (PHP) file, you’ll have to specify where the CSS file of the parent theme is located. Child themes use a functions.php file to receive styling properties from their parent themes.

Here is an example functions.php file that will load our parent theme:

<?php
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
    wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
}

Step #4. Install and Activate your WordPress Child Theme

Those basic steps will get you a working child theme. It doesn’t do anything, of course, but know you at least know how to get started. The final step is to get your child theme installed and activated on your WordPress site to test your work.

First, compress your child theme folder into a .zip file. Then log in to your WordPress admin area and head to the Appearance menu and then the Themes and Add New menu option. Follow the instructions on the screen to upload your .zip file to the server.

It’s time to activate the theme after it’s been successfully uploaded. Once again, head to the Appearance and Themes area of the admin. Find your child theme amongst the list of installed themes on your site and hit the Activate button to turn it on.

How to Use Hreflang Tags on WordPress Multilingual Sites
Related Article
How to Use Hreflang Tags on WordPress Multilingual Sites

WordPress websites producing content in multiple languages can improve their search engine optimization by adding hreflang tags.

Use a WordPress Child Theme Generator

Does the idea of writing code, no matter how simple, and packaging things into a zip file, and all of the other technical talk make you a bit nauseous? You are not alone. Thankfully, the community has come up with some alternative ways to create a WordPress child theme.

ChildTheme-Generator.com

As you would suspect from the name, childtheme-generator.com will automatically create the files you need for a child theme. What makes the process on the site nice is that you can search for the parent theme you are using and, if the site can find it, the child theme it makes will be built to support that parent correctly. This generator will even make you a temporary screenshot file for your child theme which you can edit on your own later for display inside of the WordPress admin.

WPMarmite’s Child Theme Generator

The team at WPMarmite has written their own WordPress child theme generator tool. This application works by asking you to submit the URL of the site that currently uses a parent theme you wish to work with. The generator then takes the URL, scans the site to determine the folder name of the theme, and then puts together a .zip file for you with a proper child theme inside.

In addition, you can simply enter the folder name of any parent theme and have the basic child theme files made for you as well. This tool is very easy to use and highly recommended by those unsure about creating WordPress child theme files on their own.

Child Theme Generator Plugins

Last, but not least, we’ll check out two WordPress plugins that handle child theme creation right inside of the admin. This is a good approach for those of you comfortable with installing and using plugins. Of course, you’re still going to need to make changes to the child theme code after this step so please keep that in mind. Working on theme code, directly inside of the WordPress admin, is almost always a bad idea.

First up is a WordPress plugin by Serafino Corriero for generating child themes. You install this plugin on your WordPress site and then use a simple interface to create a child theme live on your server. The plugin knows what themes are actively installed on your site so you can simply pick your active theme and have it make a child theme with that as the parent.

Our second plugin choice is Child Theme Configurator by Lilaea Media. This plugin offers a lot of advanced features. The idea is that you can create, edit, and activate your child theme right inside of the WordPress admin using an existing installed theme as a base. There is a lot to go through with this plugin but, thankfully, the developer has a lot of documentation and video tutorials available.

Doing More with Your WordPress Child Theme

It may sound exhaustive, but creating a child theme is pretty easy. The real work comes in making the child theme make changes to your site’s look and feel. There are plenty of tutorials online on how to do this but just know that you can go quite a long way by just adding some simple CSS rules to your style.css file. For more elaborate changes, adding PHP to your functions.php is the way to go.


The Most Popular WordPress Themes

Some WordPress developers offer child themes that you can download and use with their premium, or popular, theme. If your website uses a popular theme, check with the developer to see if there’s a child theme for it. Developer-supplied child themes are typically easier to use since they don’t require the creation of new files. You can download a child theme from the developer’s website, followed by uploading it to your own site.

Here’s a breakdown of the most popular WordPress themes on the market and what is involved in getting a child theme up and running with them. We’ll point you in the direction of a generator, if they have one, or give you the basics to build your own.

Avada Logo

Avada

The Avada theme is, in reality, a very complex and robust website-building platform. The goal of this theme, as with many premium themes, is to try and be all things to all possible users. This makes it very popular with agencies who deal with a variety of clients in different industries.

You can make an Avada child theme in the standard way on your own. The value for the Template section of your styles.css file is avada. You’ll need to enqueue the Avada stylesheet in your functions.php file in the standard way. The developers offer a child theme for download but, if we’re being honest, the process is just as fussy and cumbersome as making one yourself.

Astra Logo

Astra

Astra is an obscenely popular WordPress theme. Here at Link Software, we see it quite commonly used as the premium theme of choice for marketing and SEO agencies who dabble in web design for their clients. Given how popular Astra is, and how important creating a child theme for it can be, it should come as no surprise that the developers have their own Astra child theme generator.

If you still want to go at it on your own, despite the availably of the generator, you can make your own Astra child theme. Just know that the parent theme directory is astra and you should reference that in the Template section of your child theme’s style.css file.

Divi Logo

Divi

Divi, from Elegant Themes, is another very popular WordPress theme with design and marketing agencies. This is the rare theme that has gone out of its way to make editing CSS and code easier to do within the WordPress admin. Still, the best practice, if you want to create changes to the base Divi theme the right way is to create a child theme.

The process of making a Divi child theme is the same as most others. Your Template section of the style.css should be divi. There are a handful of Divi child theme generators online but they all work the same way as the ones we mentioned above. You can stick with those generators if you want to have the child theme files created for you.

Enfold Logo

Enfold

The Enfold theme for WordPress, by Kriesi.at, is a popular theme for designers and marketing types because it is low cost and highly adaptable. Kriesi.at, like more of the developers we discuss here, strongly advise anyone using their product to start by creating a child theme.

The Enfold documentation has more details about how to make a child theme including a link to a direct download for you to use. If you want to make an Enfold child theme on your own make sure your Template section says enfold inside of the style.css file.

Enfold is slightly more complex than other premium themes. You will want to export out your theme settings, from the parent, to import into your child theme before getting too far. Again, the documentation provided by Kriesi.at will get you on your way to making this work properly.

GeneratePress Logo

GeneratePress

GeneratePress is one of the most affordable, and flexible, premium WordPress themes on the market today. The process of creating a child theme for GeneratePress is a bit different than other themes on this list. Luckily, the developers have created a blank starter child theme that you can download directly from their site.

If you want to go and make a GeneratePress child theme on your own make sure the Template section of your style.css says generatepress. One of the unique features of GeneratePress is that you don’t need to enqueue anything in a functions.php file. You’ll still want to make the file in your child theme if you anticipate any PHP changes that need to be made. But the typical wp_enqueue_scripts hook is not necessary.

Genesis Framework Logo

Genesis

There are a lot of parts that encompass the Genesis brand for WordPress. They have a framework, their own set of premium child themes using the framework, block plugins, and more. The whole thing can be a little overwhelming at time.

For the purposes of this article, we’re going to be dealing with the Genesis Framework. StudioPress, the makers of Genesis, are strong believers in the child theme system and strongly recommend you create your own child theme whenever you use their framework.

The template name you need for the style.css file of your Genesis child theme is genesis. Your functions.php file is going to be a bit different than most child themes. The Genesis Framework is fancier than your common theme. Add this bit of code to your functions.php file to make sure your child theme references everything the Genesis Framework has to offer:

<?php
add_action( 'genesis_setup', 'my_child_theme_setup', 15);
function my_child_theme_setup() { }

This is just enough to get you started. The Genesis Framework is incredibly robust and offers tons of actions you can tie in to and manipulate.

Elementor Logo

Hello Elementor

The Hello Elementor WordPress theme, which you will not be surprised to learn is from the developers of the popular Elementor page builder plugin, has over 500,000 active installations. This means it’s a popular choice for a lot of websites and is frequently used as the parent for a child theme.

You can make your own Hello child theme by setting the Template section of your style.css to hello-elementor. The functions.php file should look like the typical setup we described above. The Elementor team has a child theme already made and available on Github if you would like to download something and get started right away.

OceanWP Logo

OceanWP

OceanWP is one of the fastest-growing themes in the WordPress scene. It’s become a very popular choice to use as the base for website design projects. Luckily, the developers of OceanWP maintain a sample child theme on their Github account. All you need to do is download the .zip file of the master branch and upload it to your site.

There is one thing to consider when using an OceanWP child theme. For those of you who have already been using OceanWP for some time, and are just not considering switching to a child theme, you need to export out your Customizer settings first. There is a help document on their site that will talk you through the simple steps to make sure you do this export, and subsequent import, correctly to avoid problems.

WooCommerce Logo

Storefront

We haven’t discussed WooCommerce themes yet but they work the same as any traditional WordPress theme. Storefront, the official and free to download theme from the developers of WooCommerce, is a great choice if you’re trying to get your e-commerce site off the ground. It’s guaranteed to work correctly with all of WooCommerce features and has a lot of customization features.

If you want to make a child theme for Storefront you can build your own the traditional way. Make sure the Template section of your style.css file says storefront. The functions.php file isn’t necessary in this case because of how the parent Storefront theme is setup. If you want to download a ready make Storefront child theme you can find on available on GitHub.

UnderStrap Logo

UnderStrap

UnderStrap is, maybe, the most developer-focused WordPress theme solution in this article. The focus of UnderStrap is to make search engine optimized sites with WordPress in the quickest and easiest way possible. This makes it hugely popular with WordPress developers and SEO agencies.

To be perfectly honest, the best way to get started with an UnderStrap child theme is to download their package on GitHub. You can also check out their OverStrap product which is pre-built child themes that you can use to get a jump start on your website project.


Conclusion

That brings us to the end of this guide about WordPress child themes so let’s do a quick recap. No matter what theme your website currently uses, you can create a child theme for it. A child theme is a copy of another theme. With a child theme, you can update your website’s parent theme without fear of losing customizations. All changes that you make to the child theme’s code will be retained.

Hopefully, you have learned all you need to get started on your own with WordPress child themes. If you find yourself lost, or in need of assistance, reach out to us using the form below. Link Software has been providing affordable custom WordPress development to our clients for many years. We would love to help you with your WordPress project.

  • This field is for validation purposes and should be left unchanged.