Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Create a WordPress Child Theme (Video)

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Create a WordPress Child Theme (Video)

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.

A simple WordPress child theme based on Twenty Thirteen

Video Tutorial:

For those who don’t want to watch the video, you can continue reading the article below.

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.

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

Getting Started

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 wpbdemo.

Creating a new WordPress Child Theme

Open a text editor like Notepad and paste this code:

 Theme Name:   WPB Child Theme
 Theme URI:
 Description:  A Twenty Thirteen child theme 
 Author:       WPBeginner
 Author URI:
 Template:     twentythirteen
 Version:      1.0.0

@import url("../twentythirteen/style.css");

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.

Activating your WordPress child theme

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.

Using Inspect Element tool in Google Chrome

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.

Chrome inspector showing rendered HTML and CSS style rules

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 .navbar to #e8e5ce.

Playing around with CSS in Chrome Inspector

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.

.navbar {
background-color: #e8e5ce;

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.

 Theme Name:   WPB Child Theme
 Theme URI:
 Description:  A Twenty Thirteen child theme 
 Author:       WPBeginner
 Author URI:
 Template:     twentythirteen
 Version:      1.0.0

@import url("../twentythirteen/style.css");

.site-title {
padding: 30px 0 30px;

.site-header .home-link {
min-height: 0px;

.navbar {
background-color: #e8e5ce;

.widget { 
background-color: #e8e5ce;
.site-footer {
background-color: #d8cdc1;
.site-footer .sidebar-container { 

Editing The Template Files

Twenty Thirteen Layout

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:

 * The template for displaying the footer
 * Contains footer content and the closing of the #main and #page div elements.
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0

		</div><!-- #main -->
		<footer id="colophon" class="site-footer" role="contentinfo">
			<?php get_sidebar( 'main' ); ?>

			<div class="site-info">
				<p>&copy; Copyright <?php echo date(Y); ?> <?php bloginfo('name'); ?> All rights reserved.</p>
			</div><!-- .site-info -->
		</footer><!-- #colophon -->
	</div><!-- #page -->

	<?php wp_footer(); ?>

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

You will find many WordPress tutorials asking you to copy and paste code snippet in your theme’s functions.php file.

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:

function wpbdemo_custom_header_setup() { 

	add_theme_support( 'custom-header', array( 'default-image' => '%s/images/headers/circle-wpb.png' ) );

	register_default_headers( array(
	    'caramel' => array(
	        'url'           => '%2$s/images/headers/circle-wpb.png',
	        'thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png',
	        'description'   => __( 'Caramel', 'Caramel header', 'twentythirteen' )
	) );

add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );

Now if you visit Appearance » Header, you will be able to see the image we added as the default image.

Changing theme header in your WordPress Child Theme

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.

Final Result

A simple WordPress child theme based on Twenty Thirteen

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.


Holi - A WordPress child theme based on Twenty Thirteen

Cherry Blossom

Cherry Blossom - Twenty Thirteen Child Theme

2013 Blue

2013 Blue

Flat Portfolio

Flat Portfolio

We hope this article helped you learn how to create a WordPress child theme. Remember there is plenty of support available for those who need it.

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

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. Angelo says:

    Hi there!

    I’ve just installed the Bose template and also created a child theme for it. However, the following error message appears on the center of my website:

    Warning: implode(): Invalid arguments passed in /home/hello582/public_html/teste/wp-content/themes/bose/featured.php on line 12

    I’m a very beginner at websites creation, so I haven’t got any clue about what the problem is. Could anyone help me?

    Thanks a lot!

  2. Djamila says:


    Thanks for the article! I could not get my child theme to ‘appear’ in the template section and it turned out I indeed misspelled the way the original template was named. What a difference a capital makes, huh?
    However, now that I have my child theme I was able to update the parent theme and when I did all of a sudden I got an issue with a super important plugin ( I am building a review blog on a local database, for now and it’s the wrap up/grading plugin belong to the template designers).
    In the parent template they ‘upgraded’ this plugin. I personally prefer the old one, but okay…anyway…underneath my review you now see *both*, the old wrap up with grades and the new one, which looks out of whack too. I have de-activated and re-activated but it stays like that. Super annoying and I don’t know where to look to either keep the old one (prettier) or only the new one and outlines as should.

    Where should I start? Thanks for any help you can give me.

  3. Amanda says:

    Thanks for a great article!

    If I use a child theme, will I still be able to customize it using the Appearance> Theme Options that comes with my theme in the admin panel such as font size, background colors etc. or do I have to go the code route?

    If I have activated the Child theme and I use the Appearance tab to update the styling instead of using code, is it essentially still updating the parent theme because the related files are not in the child theme folder?

    • WPBeginner Support says:

      Yes, your child theme will inherit all these options.

      • Amanda says:

        Thanks for your reply.

        So if I activate the Child Theme and use the settings in the Appearance tab of my admin panel to change the styling (instead of writing css code), my changes won’t be overwritten when I do a theme or WordPress update on the parent theme?

        Would I still need to copy the stylesheet, header, footer files etc. to the child theme folder to make the scenario above work?

  4. Laura says:

    I’ve been following these (and other) steps to create a child theme based on twentytwelve. The issue I’m running into is that wordpress seems to ignore only some of the css I’ve changed from the original theme and it’s driving me nuts. For example, I’ve successfully changed the background colour of the menu, but it simply won’t let me change the text colours of anything. I’ve used your approach of editing it in chrome’s code inspector thing (which worked great, the colour got changed, suggesting my code was correct) and pasting the changed code into the style.css of the child theme, but it doesn’t seem to get picked up at all. I don’t know what to do about this, any insights would be very welcome!

  5. Boyet says:

    Thank you very much for this tutorial. I don’t have problem editing my child theme’s stylesheet, header, and footer files.

    My question is, what will I do if I wanted to change something in a file located in my mother theme’s folder like: public_html/wp-content/themes/shopera/woocommerce?

    Do I need to create the same path in my child theme?

    Thanks in advance…

  6. Tony Arnold says:

    Very helpful and largely understood and executed.
    I am trying to make my header image full width.My theme doesn’t ‘allow’ this as standard so do i change the file?
    Thank you

  7. Sohail Farooq says:

    Love this article I tried and got it worked at once.

  8. Xander says:

    Hi, there!

    It seems I have got stuck a little bit. I have already made some changes in the some .php-files (e.g. header.php, footer.php and so on) of my parent theme without having a child theme installed.
    Now I want to create a child theme because updates of the parent one have been coming. What should I do with all those already modified files? Should I copy them in the child theme’s directory? What are folder I need to have it it? Should I create the same folders that the parent theme has got for the child theme?

    Thank you,

    • WPBeginner Support says:

      You don’t need all the folders of your parent theme. You just need to recreate the files where you have made changes. We have a tutorial on how update themes without losing changes. It has a section where you can find out which files you have modified in your theme and what changes you have made to them.

      Download a fresh copy of your parent theme on your computer. Download the old theme to your computer and then upload the fresh copy. After that create a new child theme. Copy the files where you have made changes from the fresh theme to your child theme. Copy the changes you have made in the old theme files into the files of your new child theme.

      It would take some troubleshooting before you get it right. So we strongly recommend you to backup your site first. If possible test your changes on a local WordPress install first.

      • Xander says:

        Thank you. Could you please give me a link on the tutorial mentioned?
        There is another obstacle – I have changed functions.php file, how can I reconcile both of them in the parent and child themes?

  9. Chris says:

    Can I load and install my new child theme on another site? If so how?


    • WPBeginner Support says:

      Download your child theme to your computer. Create a zip file containing the theme folder. Go to the admin area of another site and then visit Appearance » Themes. Click on the add new theme button and then click on the upload button. Upload the zip file you created earlier. WordPress will extract and install your child theme.

      You will also need to install the parent theme as well.

  10. Daniel Garneau says:


    I find this tutorial very useful to learn how to create a child theme. But in the process I made the following ajustments. There needs to be two files in the child-theme directory. They have to be named style.css and functions.php.

    style.css must contain at least (supposing one is using the TwentyTen theme):
    @import url(“../twentyten/style.css”);
    Template: twentyten

    When I consulted the turorial on 2015-05-12, the “template: twentyten” line was in the comment block. It must be a command that can be read by WordPress.

    Also, there must be a functions.php file, and it has to have minimally the following line of command :

    Your tutorial along with the wp codex, helped me creating my first child theme. Thank you.

  11. Maria says:

    Is it safe to say that the changes I made in the custom css field can be placed into my child’s theme style.css?

  12. Louise Mason says:

    I am falling at the first fence – how do i find /wp-content/themes/? Actually where is the WordPress installation folder? In the video i can’t see what you click on or how you open it, the file manager just appears by magic!

    • WPBeginner Support says:

      You can access File Manager by visiting your web hosting dashboard. Login to your web hosting account and locate File Manager.

      • Sonam says:

        when I select the file manager of my web hosting account , I get four options :
        1)home directory
        2)web root
        3)public ftp root
        4)Document root

        which one should I select to work on.

  13. Viju says:


    I’m using a child theme for my website. What I’m struggling is to give a version to my style.css of the child theme. WordPress seems to append default wordpress version at the end of the file like /style.css?ver=4.1.1

    I’m incrementing the value of ‘version’ in my child’s style.css , but wordpress is not picking it.

    Because of this my changes to the child theme are not getting reflected to users who has the cached version of the css.

    can you advise how to handle this ?

  14. Stephen James says:

    At the very start I am lost. Where did you get the style css code at the start???? You only tell us to past it in but not where it came from. Surely if I am using a different theme it will be a different code.

    • Vatsal Savani says:

      Hey Stephen,

      The code at the start is like general info for the theme, it is nearly the same for every theme, you just have to change the content after the colon, i.e. If your theme name was stephenstheme, you may have the code at the start be like:

      Theme Name: stephenstheme

      Theme URI:

      Description: A Twenty Thirteen child theme made by stephen

      Author: Stephen James

      Author URI:

      Template: twentythirteen

      Version: x.x.x

      Hope you get what I mean, good luck!

  15. Ariz Khan says:

    Hi WPB, I solved it, reference to my previous mail. Guess what – it was syntax error on my part – I uploaded Style.css, which I renamed to style.css as required and voila it worked. Thanks.

  16. WPBeginner Staff says:

    Did you save the template file as style.css

  17. Kim says:

    I’m trying to create a child theme for twentythirteen following your instructions above. I created the folder and copied the code you have listed above into a text file. I saved the code to the new folder. I am unable to activate the child theme because the “template is missing”. Help!?

  18. canciller says:

    Using @import for the “style.css” on a child theme is not reccommended by wordpress codex

    is it safe to use it ? what are the downsides of using @import ?

  19. Praveen Kumar says:

    What about building child themes on Genesis Framework?

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.