How to Create a WordPress Child Theme Step by Step (2020)

• Updated on: 2020-11-11
• Read original article here

Learning how to create a WordPress child theme is a crucial skill for anyone who wants to get the most out of their site. Child themes are the safest way to customize WordPress and they allow you to change literally anything about your website.

Creating a WordPress child theme is also a great way to enhance your web design skills and learn more about the WordPress platform. Plus, it’s easy. You can achieve a lot by simply copying and pasting. As a consequence, it’s even feasible for beginners.

In this article, I will give you a step-by-step introduction to how to create a WordPress child theme and use it to customize your site at will. This is a long guide (more than 7,700 words). For that reason, feel free to use the links below to jump to the sections most interesting to you:

Ready to go? Then let’s get started right away, we have a lot to cover.

Before we get into creating child themes, let’s first talk about their purpose and why you’d want to use them. For that, we need start by talking about WordPress themes in general.

The beauty of WordPress (and one of the main reasons for its success) is that the platform is completely customizable. There’s basically nothing that you can’t change or modify in a WordPress website.

You don’t even have to know code to do so. Plugins and themes allow you to add functionality and change the look and behavior of your site with a few clicks. Just download, install, and – bam – your site works and looks completely different.

In addition to that, themes consist of editable files, so, with some coding knowledge, you can make any changes to your site that you want. However, modifying your main theme directly comes with a lot of problems. And here is why.

Many people, especially beginners, make changes directly inside their main WordPress theme (often on a live site with code snippets copied from somewhere around the web, but that’s a whole other article). It’s easy: just use the built-in WordPress editor and modify the necessary files.

However, that’s not the correct way to do it.

Because if you do, when an update rolls around (which happens for a well-supported theme), all your changes will be overwritten. That’s right, all your hard work — gone in an instant.

I can tell you from experience, it’s not fun when that happens. In fact, I would bet money that the practice of editing themes directly is one of the main reasons why many WordPress site owners don’t keep their websites up to date (even though it has gotten better in recent years).

Unfortunately, not updating your site is another bad idea as it threatens your site’s security and creates other issues. However, that’s what you set yourself up for when you edit your themes directly: you either don’t update or lose your changes every time you do. A classic lose-lose situation.

How do child themes help alleviate this problem? By allowing you to make changes to an existing theme that are independent of the theme itself.

To understand this, we first need to talk about how WordPress child themes work. Child themes are not like normal themes. In fact, they can not function on their own. Instead, a WordPress child theme depends on another theme, their so-called parent. Without a parent theme present, you can’t even activate a child theme in WordPress.

How do they work together?

Basically, whenever your site is loaded, WordPress first looks in your child theme for design and functionality resources. If it can’t find them there, it falls back on the parent theme.

As a consequence, a child theme can modify and add to anything that is already present in its parent. To that purpose, child themes can contain page templates, CSS and JavaScript files, images, and much more (though they don’t have to). With their help, you can alter the parent’s design, functionality, layout, and other aspects without having to create an entirely new theme.

In my opinion, child themes are one of the best things WordPress has come up with (and I’m sure at the end of this post you will agree). However, it leaves the question, what theme can be parent theme? The answer: Basically any theme that has all the necessary files to be complete.

Yet, some themes are more suitable than others. For example, the Genesis Theme by StudioPress (now owned by WP Engine) is a theme framework specifically made to be modified by child themes. The main theme is usually only present to provide the basic structure and functionality, everything else happens in child themes (of which they offer many on their site). It’s one of the reason why Genesis is among my favorite online marketing tools and also powering this site.

As mentioned, the main advantage of using a child theme is that it lets you make changes to your site in a safe way. However, this comes with other benefits:

So, should you always use a child theme when making customizations to your site? No.

If the changes you are planning are really small (such as changing a color or a font), a custom CSS plugin may be sufficient (for example, the one contained in Jetpack). You can also use the WordPress Customizer for this.

Aside from that, many themes offer ways to input custom CSS out of the box.

However, for larger changes such as modifying your layout, creating new page templates, or similarly elaborate operations, child themes are the way to go.

Are you convinced yet? Then it’s time to learn how to create a WordPress child theme. We will first do the whole process by hand. After that, you will learn how to achieve the same thing with a plugin solution.

As you will see below, a child theme doesn’t need much. In the end, it comes down to a folder, a style sheet, and a file. Don’t worry if you don’t know what all of those are yet, you will learn soon enough.

For the example below, I will use Twenty Twenty which is (at the time of this writing) the latest default WordPress theme. You can perform the upcoming steps directly on your server via FTP. However, I recommend using a local development environment instead of a live site so you can make mistakes without anyone noticing. After that, simply zip up the child theme and install it via Appearance > Themes just like any other.

We will start off with the child theme folder. This needs to be located inside your site’s theme directory. You find it in your WordPress installation under .

Once you have navigated to this location, all you need to do is right click and create a new directory. The usual practice when creating a child theme is to give its folder the same name as the parent theme appended with . That way, anyone knows immediately that this is the child of an existing theme.

However, you can theoretically name the new directory anything you want. Just make sure to adapt the code examples below accordingly. Also, don’t include spaces in your directory name!

I will go the classic route and just call my directory .

The next step in your quest to create a WordPress child theme is setting up the style sheet. This is the file that contains your theme’s CSS code. It determines much of your theme’s design.

Themes can have multiple style sheets, but one is enough for us for now. All it takes is to create a text file and name it . That way, browsers know automatically how to use this file.

However, in order to make it work in WordPress, you need to add a style sheet header. That is a piece of code which contains important information about the child theme. Below is an example, which I took from the WordPress Codex.

Here’s what the different lines mean:

If some of this doesn’t seem relevant, it’s because it isn’t — at least not for child themes that will never see the inside of the WordPress theme directory. For your private use all you really need is a theme name and template. As a consequence, my reduced style sheet header ends up looking like this:

Feel free to copy and use it as a template for your own work.

Once your directory is in place and the style sheet placed inside, you are already able to activate your WordPress child theme. For that, go to Appearance > Themes. Here, you should find a sight similar to the image below:

To activate your theme, simply hover over it and click on the button marked Activate. That should switch your site’s active theme to your new child theme. However, there is one problem: when you now go to your front end, your site looks something like this:

However, no need to hyperventilate, this is expected. Why? Because your site does not have any styles yet. Remember the style sheet we created? It’s empty. As a consequence, your site does not have any styling directions. But don’t worry, we will take care of that in the next step.

So why did I make you activate your child theme if it’s not ready? Because I wanted to show you that it works with just a folder and an empty style sheet. However, now is the time to make it look good.

In this next step, we will set up your child theme’s file. This is the part of your theme that allows you to make major functionality changes to your site. It can contain both WordPress functions as well as PHP code. With their help, you can make significant changes to both your site’s look and behavior.

For example, you can use it to create new widgetized areas, add fonts to your site and a lot more. We will go over practical examples further below. For now, however, all you need to do is create another text file and name it . When you are done, open it and paste the following piece of code:

That’s it. For real. All needs in order to work is an opening PHP tag. Of course, you can add more, however, this will suffice for our needs.

Also, be aware that you can, in fact, create a WordPress child theme without a file. However, I showed you this step a) so you know how to do it and b) because it is important for the next task on our list.

As you may recall, your website currently doesn’t look like much and creating hasn’t done anything about that. However, you will need the file in order to make the child theme inherit its parent’s styling. That way, the site can go back to the way it looked before activating your child theme.

Now, there is more than one way to do this. One is via CSS and the rule. You can the line below into your style sheet (not !) to tell your child theme to use the styles of its parent.

However, while this works and is easy, it’s not the recommended way. That’s because it can hinder your site’s performance. If you have several style sheets, using will force the browser to download them one after the other instead of all at once. This is wasted time and important since 40% of visitors leave if your site isn’t done loading within three seconds.

It’s also one of the reasons we created . It allows us to use , a WordPress function specifically made for loading style sheets. For that reason, my child theme’s looks like this:

Twenty Twenty and other WordPress default themes are set up in a way that anything you add to the child theme’s will execute after the parent styles. This will be important later. If you are having trouble getting this to work in your particular theme, try out this piece of code:

The snippet above will specifically load the child theme’s style sheet after the parent’s. However, in a theme that is properly set up, this will load the child theme styles twice instead, so only use it if the normal way doesn’t work.

Aside from that, it should work as is. No need to adjust it to your particular setup. Be sure to paste the code at the beginning of your functions file (but after the opening tag). When you save and upload it to your child theme directory, the design should go back to normal.

Well done! Your first WordPress child theme is ready. That wasn’t so hard now, was it? However, for extra brownie points, there is one more thing you can do.

Since we are overachievers around here, we will go the extra mile and add a theme thumbnail. That is the image that shows up inside the theme menu of WordPress.

To do so, all you need is create a PNG file called and add it to your child theme folder. Place it in the folder itself, not in a subfolder.

The easiest way to get one is to take a screenshot of your active theme. In Firefox you can now take screenshots by simply right-clicking on a page or using the Page actions menu and choosing Take a Screenshot.

The recommended size is 880×660 pixels though 387×290 is enough. The higher resolution just makes sure it looks good on bigger screens. Also, you can use a JPG or GIF as well, however, PNG is the recommended format.

It might also make sense to add the screenshot after you are done customizing your theme. That way, it reflects the finished work better. How do you customize a WordPress child theme? We will get to that momentarily. However, first we will cover how to create a child theme with a plugin.

If you want to use a plugin to create a WordPress child theme, there are several options. These include Child Theme Creator by Orbisius, Child Theme Wizard and Child Theme Generator.

However, by far the most popular is Child Theme Configurator, which is what we will use here. A lot of the process below will be familiar to you because we are doing the same thing as before, only with a plugin. I personally prefer the manual route, however, I wanted to show you this option as well so you can decide for yourself.

The first thing to do is to get the plugin on your site. For that, go to Plugins > Add New and search for its name or child theme. In both cases, Child Theme Configurator should be the first search result.

Click Install Now and wait until it’s done, then activate the plugin.

After the installation, you find the options for creating a new child theme under Tools > Child Themes:

In this screen, first choose the action you want to perform. In this case it’s to create a new child theme. Then, use the drop-down menu below to pick the parent theme (Twenty Twenty in this example). Hit Analyze. The plugin will then check the parent theme for dependencies and potential issues.

After it’s done, it will show you the analysis result and additional options.

Here’s how to fill them in:

Once you have filled everything in, hit the big blue button that says Create New Child Theme.

The plugin will then get started. It will create the child theme and also check whether everything appears to be working correctly. In addition to that, it will provide you with a link at the top of screen where you can preview the child theme before activating it. The results should be the same as above.

Aside from that, when you browse to the child theme’s directory on your server, you will see that it contains exactly the same files we created by hand earlier. Inside you will also find a very similar style sheet header and function to enqueue parent styles.

Of course, the Child Theme Configurator plugin offers a lot more functionality to customize your child theme, however, we will opt to do the rest by hand. That way, you understand how things work and can take care of it in the future without depending on a third-party tool.

At this point, you might be rightly objecting that your child theme looks exactly the same as its parent. And that’s true, it does. So what’s the point of going through the hassle of creating one?

Well, so far we have only set up the ground work for customizing your WordPress theme. Now we will actually do it. This is where the fun begins.

One of the easiest ways to customize a child theme is to use CSS. With your style sheet you are able to easily change colors, layouts, fonts, and other design elements. You can even make fundamental changes to your page structure (though, as you will learn, there are better options for some types of changes).

Thankfully, WordPress child themes make this really easy. Add any styles to your child theme’s file and they will override existing markup in the parent theme.

Let’s look at an example. Let’s say, I wanted to increase the height of the main navigation of my test site.

As a first step, I would use the browser developer tools (Ctrl+Shift+C in Firefox, Ctrl+Shift+I in Chrome, or right click and inspect the element in question) to examine the part that I want to change on the page. This would turn up the following CSS declarations.

In order to make the desired changes, we can change the markup as follows and copy the whole thing to the style sheet of our child theme.

And – boom – here is the result:

Easy, right? Note that, in case you opted for using the option above, you need to add any new styles below that declaration like so:

Otherwise they won’t overwrite the parent styles. However, by now you should know better than to import parent theme styles via CSS.

It’s not only possible to modify your site’s styles, you can also replace entire parts of the parent theme.

As mentioned, whenever a theme file is called from the parent directory, WordPress will first check the child theme to see whether a file of the same name exists there. If so, it will use the file in the child theme folder.

As a consequence, whenever you dislike something about your fundamental site layout, you can copy the theme file in question, make modifications, and add it to the child theme directory. From then on, WordPress will use the new template without you having to change the original.

Let’s look at an example to really drive the point home. In this case, I want to move the category link underneath the post meta.

With a little detective work (meaning a look into to see which template is being called on the homepage of Twenty Twenty), I find out that the file responsible for this is located in the parent theme under template-parts/entry-header.php. Here, I find the following code:

Now, in order to change the position, I first need to copy the entire file to my child theme. However, and this is is important, I can’t just plop it into the directory and wait for WordPress to figure out the rest. Instead, I need to place the template file I want to modify in the same relative position as it is in the parent theme.

That means, in my child theme directory I create a subfolder called template-parts. Here, I put the copy of my file.

After I have done so, I can make my changes. In this case, I move the code above underneath where it says:

I also need to modify it slightly so that the opening and closing PHP brackets are in the right places:

Now just a little bit of styling (you know where that goes by now):

And when I now reload the front page of my test website (with the child theme active, of course), I see the modified version.

Still not too complicated, is it? And you can do the same with pretty much any template file found in your parent theme. However, there is even more.

It’s not just possible to override existing files, you can also add completely new ones. Template files are the most common example here as well. If you are familiar with the WordPress template hierarchy, you can use it to add new layout options to your site.

For example, by default the category pages in Twenty Twenty look like this:

However, I have decided that I want to display my categories in more of a card layout. For that, I am going to do the following:

As a first step, I will copy from my parent theme to the child theme and rename it to . That way, WordPress knows to use this page template only for category archives.

After that, I simplify the code as much as possible and wrap the section containing the posts into a new element with a CSS class called added to it. In the end, it looks like this:

The new custom class enables me to target only the elements on archive pages with some CSS.

When I now reload the page, the design changes noticeably:

Such is the power of custom page templates. However, before we move on: It’s also possible to create new page templates and apply them manually from the WordPress editor. For that, you need to include a page template header (so that WordPress knows what it is) like so:

After that, you can pick the template from the Page Attributes menu in the page editor (Twenty Twenty comes with two custom page templates to choose from out of the box).

In that case, you also don’t have to call the file (in fact, you shouldn’t) but anything you want. Plus, you can assign the template to other pages as well in the same way.

We have touched on before. This file allows you to add PHP and native WordPress functions to your site. It’s powerful stuff that enables you to completely customize your WordPress child theme.

One important caveat though: in contrast to , code added to doesn’t replace the markup in the original but loads in addition to the existing . In fact, the child theme’s is loaded right before the parent’s.

That means, if you want to make changes to the original functions, you need to modify rather than replace them. We will talk about that further below when discussing theme hooks. In the meanwhile, let’s look at an example of how you can use to customize your WordPress child theme.

One of the easiest things to do is create a new widget. For that, simply input this piece of code into your function file:

This will create a new widget area in the back end.

However, how do you get it onto your site? For that, you can use your newly acquired knowledge about how WordPress deals with template files. Just take the code below and input it into a template file where you want the widgetized area to show up.

For example, I can add a copy of Twenty Twenty’s file to my child theme folder and add the code snippet at the beginning of it.

That way, I can use the widget area to add an email sign-up form at the top of my pages.

(For funsies, I also included the styled horizontal divider that Twenty Twenty uses between posts. If you want to use it as well, the code is below.)

Admittedly, that needed a little bit of styling to make it look good, but you already learned how to do that, too!

A special way to customize WordPress child themes via is to use theme hooks. That’s the name for little anchors in your code where you can hook in functions without having to edit files.

We have two main types of hooks: action hooks and filter hooks. The first allow you to add new functionality to existing functions, while the second are a way to modify code that already exists on your site.

Let’s look at an example to make things clearer. First, an action hook.

Remember the widget area we just created? Instead of copying it into the template file, we can also add it to your site via a hook.

For that, I first have to create the hook itself. WordPress has a lot of standard hooks and many themes (especially Genesis) come with even more. However, Twenty Twenty happens to not have one in the place I need. Time to change that.

First, I put this piece of code into my page template where I want the widget to show up.

Next, I have to define this function as a hook. Nothing easier than that, thanks to the function. I simply paste this into :

From now on, I can use the function to add anything I want to the page. To include my widget area, I can use the same code as before, however, this time wrapped into an action hook.

And that’s it. This achieves the same effect as pasting the code directly into the page template and it’s how action hooks work.

One of the easiest ways to demonstrate a filter hook is to change the content of the “Continue reading” link at the end of your post excerpts.

To do so, just input this piece of code into your child theme’s .

Here is the result:

Change the part where it says “Let me read more!” to your desired text.

The hook here is . It’s a piece of code that’s built into WordPress core and contains the read more link. Via you can hook into it and change what it does.

For more information on WordPress theme hooks, read this article I wrote for TorqueMag on this topic.

Of course, you can also use to add JavaScript files to your child theme. I will first show you how to add JavaScript code, then how to replace JavaScript files from the parent theme.

Naturally, the best way to show this is via an example. In this case, we want to create a fixed header. This is actually quite easy in Twenty Twenty, you just need a small piece of CSS.

However, since we enlarged the header earlier, it now takes up way too much space when scrolling down the page.

Luckily, we can correct this with a little bit of JavaScript. For that, the first step is to create a file named and place it inside a folder called inside the child theme directory. Then, we put this piece of code inside of it:

Basically, all this script does is add a CSS class called to the element named if the screen scrolls down more than 150 pixels.

Next up, we need to enqueue the script so that is actually loads. We do that inside with this snippet:

You will probably probably notice the function. This is similar to , which we used earlier to call on the parent’s style sheet. Only this one is used for scripts, not CSS files.

Note that the snippet above also loads the jQuery library, since the script won’t work without it and Twenty Twenty does not have jQuery active by default. If jQuery is already available in your theme, you don’t need to load it again and can delete that line.

In addition, pay attention to the the argument I used at the end of the function. This makes sure that the script loads in the footer of my pages. Because it needs jQuery to work, it’s necessary that it is initialized after the jQuery library. Makes sense, right? You can do the same thing with any other script you’d like to include on your site.

After that, we just need to add the CSS that changes the styling of the header once the class is added to it.

The parts where it says makes sure that the styling doesn’t just switch from one size to the other but does so with a gradual animation. Otherwise, here is what it looks like:

Not bad, right? Plus, you now know how to use JavaScript inside a WordPress child theme!

Sometimes you will find yourself wanting to replace a script in the parent theme with something else. However, unlike PHP files and CSS styles, child themes don’t automatically overwrite JavaScript. If you include a script in your child theme, it will run in addition to existing ones — unless told otherwise.

So, in order to replace a script included in the parent theme, you first need to deregister it and then register the replacement. That’s what I will show you now.

In Twenty Twenty, most JavaScript is in one single file called . It’s located in assets/js. For this example, I will pretend that I want to move the file to my child theme so I can make changes to it if I need to.

This isn’t how you would usually do it, however, the Twenty Twenty theme does not have a lot of front-end scripts, so I am employing this hypothetical use case to show you how it’s done.

Here’s how you would go about deregistering the existing script:

After that, you can register it again and execute it in the child theme like this:

Alternatively, it’s also possible to do both in one function:

If you use the code from this example, be sure to adjust the location of your replacement file.

One important thing: if you are trying to deregister a parent function but it’s not working, check for priorities. If your parent function has a priority, you need to include a higher priority in your child function to make sure it executes later. It’s only logical, you can’t dequeue a script that hasn’t been queued yet.

So, if the parent function is , you need to remove it in the child theme like .

Alright, that’s it for customizing WordPress child themes. With the knowledge above, you are now ready to modify any part of your WordPress child theme you wish to change. All that’s left now is to go over some troubleshooting tips in case something’s not working right.

As you have seen above, creating a WordPress child theme is not all that hard. You can achieve a lot with simple copy and paste. Plus, if you have done it once, you can do it again as often as you want.

However, that doesn’t mean everything always goes smoothly. In this last part, I have compiled some common issues people encounter when working with child themes and tips on how to solve them.

One typical problem is that the style sheet of the child theme doesn’t load. No matter what you input, it never manifests on your site. In that case, there are several options to find out what’s going on:

Another common problem to run into is that the style sheet is obviously loading (for example, it appears in the source code of the page) but your changes still don’t show up. In that case, it could be one of the problems below.

After the style sheet, file is also sometimes a source of error. Here’s what to check if you think that’s the problem.

Finally, you might find yourself in the situation that your child theme doesn’t seem to override parent files. In that case, here’s how you might solve it:

Child themes are one of the best features of WordPress . They allow you to modify themes in a way that is safe, flexible, and highly economical. For that reason, learning how to create a WordPress child theme is one of the first things to do when diving deeper into working with WordPress.

Above you have learned everything there is to know about this topic. We have talked about when it makes sense to use a child theme and when other solutions are more appropriate. We have gone over how to create a WordPress child theme step by step by hand as well as via plugin. After that, we have looked at the many different ways to customize it and also covered troubleshooting tips for when you find your WordPress child theme not working.

By now, you have probably realized that creating a child theme is not hard. In fact, it needs very little, just a directory and two files. However, with this simplicity comes a lot of possibility. You can use child themes to completely revamp your site without having to modify any core or parent theme files. From single styling changes to functions and whole template files, there’s nothing you can not modify or add to your site.

With the information above, you now have the power to truly make your site your own. I’m looking forward to hearing what you use it for. Also, if anything is unclear in this article, please feel free to drop me a line in the comments or get in touch. I’d be happy to help.

What do you use WordPress child themes for? Anything to add to the above? Let me know in the comments section below!