Create a WordPress Child Theme
Are you looking to create a child theme in WordPress? Once you learn the WordPress basics, you probably want to learn how to customize your WordPress site. We believe that child themes are a great starting point for anyone looking to customize WordPress themes. In this article, we will show you how to create a child theme in WordPress.
Why You Need to Create a Child Theme?
Child themes are considered the best way to customize your WordPress themes. A child theme inherits all the features and appearance of its parent theme. You can customize it without affecting the parent theme. This allows you to easily update parent theme without worrying about losing your changes.
You can learn more about child themes in our article What is a WordPress Child Theme? Pros, Cons, and More.
A basic understanding of CSS/HTML is required, so that you can make your own changes. Some knowledge of PHP would certainly help. If you are good at copying and pasting code snippets from other sources, then that would work too.
Any good WordPress theme can be used as a parent theme. However, there are many different kind of themes and some may not be the easiest to work with. For the sake of this tutorial, we will be using Twenty Thirteen, which is one of the default WordPress themes.
Creating Your First Child Theme
First you need to open
/wp-content/themes/ in your
WordPress installation folder and create a new folder for your child
thme. You can name this folder anything you want. For this tutorial we
will be naming it
Open a text editor like Notepad and paste this code:
Now save this file as
style.css in the child theme folder you just created.
Most of that stuff in this file is self explanatory. What you really want to pay attention to is the Template: twentythirteen.
This tells WordPress that our theme is a child theme and that our parent theme directory name is twentythirteen. The parent folder name is case-sensitive. If we provide WordPress with Template: TwentyThirteen, then it will not work.
The last line in this code imports our parent theme’s stylesheet to the child theme.
This is the minimum requirement for creating a child theme. You can now go to Appearance » Themes where you will see WPB Child Theme. You need to click on activate button to start using the child theme on your site.
Since you haven’t changed anything in your child theme yet, your site will use all functionality and appearance of its parent theme.
Customizing Your Child Theme
Each WordPress theme has a style.css file in their main directory. Mostly this is your theme’s main stylesheet where all the CSS goes. However, some themes may only have theme’s header information in it. Such themes usually have CSS files located in a separate directory.
For this section you’ll need a bit of CSS know-how.
Google Chrome and Firefox come with built-in inspector tools. These tools allow you to look at the HTML and CSS behind any element of a web page.
If you want to see the CSS used for navigation menu, then simply take your mouse over to the navigation menu and right-click to select Inspect Element.
This will split your browser screen in two parts. In the bottom part of the screen, you will see the HTML and CSS for the page.
As you move your mouse on different HTML lines, Chrome inspector will highlight them in the upper window. As you can see that we have navigation menu selected in the screenshot above.
It will also show you the CSS rules related to the highlighted element in the window on the right.
You can try editing the CSS right there to see how it would look. Let’s try changing the background-color of
You will see that the background color of navigation bar will change. If you like this, then you can copy this CSS rule and paste in your Child Theme’s style.css file.
Save the changes you made to style.css file and then preview your site.
Repeat the process for anything that you would want to change in your theme’s stylesheet. Here is the complete stylesheet that we have created for the child theme. Feel free to experiment and modify it.
Editing The Template Files
Each WordPress theme has a different layout. Let’s look at the layout of the Twenty Thirteen theme. You have header, navigation menus, content loop, footer widget area, secondary widget area, and footer.
Each of these section is handled by different files in the twentythirteen folder. These files are called templates.
Most of the time these templates are named after the area they are used for. For example, footer section is usually handled by footer.php file, header and navigation areas are handled by header.php file. Some areas, like the content area are handled by multiple files called content templates.
First you need to do is select the theme file you want to modify and then copy it into your child theme.
For example, you want to remove ‘powered by WordPress’ link from the footer area and add a copyright notice there. Simply copy the footer.php file in your child theme and then open it in a plain text editor like notepad. Find out the lines you want to remove and replace them with your own. Like this:
In this code, we have replaced Twenty Thirteen credits with a copyright notice.
Troubleshooting is a lot easier when creating child themes. For example if you accidentally deleted something that your parent theme required, then you can simply delete the file from your child theme and start over.
Adding New Functionality to Child Theme
Adding code snippets into a parent theme’s functions.php file means that your changes will be overwritten whenever there is a new update for the parent theme. This is why it is always recommended to use a child theme and add all your custom code snippets into child theme’s functions.php file.
Lets create a new file in your child theme’s folder and name it functions.php. In this example we are going to add a little code snippet which will change the default header image into our own custom made image.
We have already created a header image and a thumbnail by editing Twenty Thirteen’s default header image. Next, we uploaded it to our child theme inside /images/headers/ folder.
After that we need to tell WordPress to use this image as the default header image for our theme. We can do that by adding this code snippet into our child theme’s functions.php file:
Now if you visit Appearance » Header, you will be able to see the image we added as the default image.
You can add any custom code snippet you need in your child theme’s functions.php file. Check out these 25+ extremely useful tricks for the WordPress functions file.
As beginners, you are expected to make mistakes when working on your first child theme. Just don’t give up too quickly. Check out our list of most common WordPress errors to find a fix.
The most common error that you would see is probably the syntax error which usually occurs when you have missed something in the code. Here is a quick guide explaining how to find and fix the syntax error in WordPress.
Download Demo Theme
You can download the end result of our WordPress child theme tutorial by clicking here. Remember this is a very basic child theme based on Twenty Thirteen.
Other Child Themes Based on Twenty Thirteen
Here are some other WordPress child themes based on Twenty Thirteen. Take a look at them and see how these theme developers customized Twenty Thirteen.
We hope this article helped you learn how to create a WordPress theme. Remember there is plenty of support available for those who need it.