WPBeginner» Blog» Themes» How to Create a WordPress Child Theme (Video)

How to Create a WordPress Child Theme (Video)

Last updated on August 25th, 2014 by Editorial Staff

Free WordPress Video Tutorials on YouTube by WPBeginner

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:

Subscribe to WPBeginner

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.

Requirements

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:    https://www.wpbeginner.com/
 Description:  A Twenty Thirteen child theme 
 Author:       WPBeginner
 Author URI:   https://www.wpbeginner.com
 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:    https://www.wpbeginner.com
 Description:  A Twenty Thirteen child theme 
 Author:       WPBeginner
 Author URI:   https://www.wpbeginner.com
 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 { 
background-color:#533F2A
}

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:

<?php
/**
 * 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(); ?>
</body>
</html>

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:

<?php
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.

Troubleshooting

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.