WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

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
214 Shares
Share
Tweet
Share
Pin
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.

Holi

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

214 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

89 Comments

Leave a Reply
  1. Eitan says:
    Aug 17, 2020 at 6:12 pm

    You need to add quotation marks to the Y = (“Y”) at the echo date, or you’ll get an error. – echo date(“Y”)

    Reply
    • WPBeginner Support says:
      Aug 18, 2020 at 11:08 am

      Thank you for pointing out the typo :)

      Reply
  2. Bomo says:
    Mar 8, 2020 at 10:50 pm

    So now that we have created a child theme, how do we update the parent theme when the child theme is activated?

    Reply
    • WPBeginner Support says:
      Mar 9, 2020 at 11:59 am

      You would update the parent theme as you normally would. For safety, you may want to create a backup before you update the parent theme in case there is a conflict somewhere.

      Reply
      • RYAD says:
        Apr 13, 2020 at 7:01 pm

        But do we have to activate the parent theme before we update and them desactivate it and reactivate the child theme ?

        Reply
        • WPBeginner Support says:
          Apr 14, 2020 at 1:06 pm

          No, you can update the theme without it being active

  3. Mahesh Yadav says:
    Dec 24, 2019 at 1:35 am

    One thing I want to know, if we make a child theme then we have 2 CSS files to load one parent theme CSS and second child them CSS. Wouldn’t it increase the site load time and It added one more CSS to load?

    Reply
    • WPBeginner Support says:
      Dec 26, 2019 at 10:29 am

      While the load time would technically increase, it shouldn’t be by a noticeable amount.

      Reply
  4. Nadia Shaheen says:
    Oct 23, 2019 at 7:15 am

    Great work!
    stay blessed and keep sharing awesome content.

    Reply
    • WPBeginner Support says:
      Oct 23, 2019 at 10:01 am

      Thank you, glad you liked our content :)

      Reply
  5. Fahad says:
    Oct 14, 2019 at 12:55 am

    Great Work !
    This site is super helpful :)
    Keep it up !!

    Reply
    • WPBeginner Support says:
      Oct 14, 2019 at 11:08 am

      Thank you, glad our article was helpful :)

      Reply
  6. Daniel Waduka says:
    Aug 16, 2019 at 9:04 am

    I am just starting to use child themes, and this article has been of so much help to me.

    Thanks so much.

    Reply
    • WPBeginner Support says:
      Aug 16, 2019 at 10:36 am

      Glad our guide could be helpful :)

      Reply
  7. Marcos Flores says:
    Jul 3, 2018 at 11:50 am

    Hi! i’ve been reading this article and it works! but i also read wordpress documentation about this and they say this

    “Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php ”

    Should i use both method? or if i user the function.php i dont need to write import function inside style.css (located in my child-theme folder)

    Reply
  8. Khema says:
    Jun 23, 2018 at 8:37 am

    Your instructions are missing a step with the functions.php creation. It should mention that needs to wrap the whole file. In this case I didn’t want to add the example you used and to another piece of code from the article you linked to. Naturally those codes didn’t include the php tag.

    Thanks for the article. It’s very very helpful.

    Reply
  9. rReons says:
    Apr 7, 2018 at 5:41 am

    So question. I was using my wordpress theme without any child theme and was doing all the changes in to it. I have created a child theme thanks to your guide and I’m using that now as the website theme.

    My question is both themes have the same modifications changes. If I update the main theme from now on, will the changes affect the child theme also?

    Reply
  10. balu says:
    Feb 7, 2018 at 1:07 am

    He! wpbeginner. WordPress official site saying this. You need to update the post. Thank You!

    Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

    Reply
  11. Pat says:
    Sep 26, 2017 at 8:39 pm

    Great info…you made it to my save list!! Thanks!

    Reply
  12. Alfonso de Garay says:
    Jun 18, 2017 at 6:31 pm

    I have a Child theme with the theme latest version installed in my site. WP version 4.7.5. Received a notice that says WP version is available please update now.
    1. Do I have to backup my site again before updating?
    2. Do I have to create another Child theme using Child version 1 one?
    2. How can I change the Name, email and URL to Chile version 1

    Reply
    • WPBeginner Support says:
      Jun 18, 2017 at 10:30 pm

      Hi Alfonso,

      WordPress updates normally do not affect your themes so you do not need to create another child theme. You should always backup your website before updating WordPress.

      Reply
  13. Lisa Bruce says:
    May 25, 2017 at 10:55 am

    Hi, I can see that this video/post is a few years old, so I’m a little late to the party, but I have a questions I was hoping you could help me with.
    I am a relatively new to WP and just came to realize the importance of child themes. I have been working on developing a site for a friend and have made several changes to the theme that I am using. I found a bug in the theme and contacted the theme developer and they said that the bug had been fixed in a recent update.
    If I install the update I believe I will loose all my customizations. Is it too late to create a child them? Is it possible to do it now and then install the update? I prefer not to have to start from scratch.

    Reply
    • WPBeginner Support says:
      May 25, 2017 at 3:26 pm

      Hi Lisa,

      If you know what changes you made and to which files, then first download a backup of your existing theme to your computer. After that, install the updated version. You can now create a child theme and then copy and paste the code from your customized version to the child theme.

      Reply
  14. Nell Yang says:
    Apr 4, 2017 at 11:08 pm

    Thank you for this helpful post. I have always been looking for a video to show me how exactly should I use child theme. It is quite time consuming that each time after I updated my theme, all my styles just went away. It is frustrating to do everything over again. I tried to read the documents from wordpress but still don’t know how to proceed after activate the child theme. Keep up the good work! Thank you again!

    Reply
  15. Tony Agee says:
    Mar 8, 2017 at 11:01 am

    Good instructional video. Most tutorials I have watched tell you to paste the code in the file but they neglect to tell you what medium to paste the code to. I was going to use Notepad++ but I guess you can use regular notepad.

    Reply
  16. JP says:
    Mar 1, 2017 at 5:17 pm

    Hello, i just want to say that you are a very good writer, very clear and simple. I past a long time on your article for learn WP.

    Thank you!

    Reply
  17. Rob Brooks says:
    Feb 27, 2017 at 1:00 pm

    Hi. Thank you for being a great WP resource. I am new to WP and really appreciate your guidance. I have followed the article to the letter but when I go to enable the child template on the site, I get the error “The parent theme is missing. Please install the “Real Estate Lite” parent theme. As you see I am using a free template called Real Estate light. it is located in the ../real-estate-lite/ directory of wp-content/themes. My code is below… did I do something wrong?

    Theme Name:   Real Estate Lite Child Theme
    Theme URI:    http://www.example.com/
    Description:  Real Estate Lite child theme
    Author:       me
    Author URI:   http://www.example.com
    Template:     Real Estate Lite
    Version:      1.0.0
    */
    @import url("../real-estate-lite/style.css");
    

    In addition, I will mention the theme was free and is running on WP version 4.7.2 (Running on Plesk). I created style.css file directly on the server so no FTP issues.

    I have already made significant changes to the parent style.css file as well as functions.php … I am not sure if this would affect this, but going to test on an unedited dummy domain to see if I get the same results

    Any guidance/assistance you can provide would be greatly appreciated.

    Reply
    • WPBeginner Support says:
      Feb 27, 2017 at 4:39 pm

      Hey Rob,

      You will need parent theme to be installed on your site and Template value should match parent theme’s actual name which you can see in it’s style.css file.

      Reply
  18. Carrie says:
    Feb 24, 2017 at 8:05 am

    Hi! Great article! I am finally starting to understand how to edit css so that I get the result I want, thanks to this article.

    Thanks much for the simplified explanation!

    Reply
  19. Nalin says:
    Feb 11, 2017 at 11:46 pm

    I created a child theme & Using @import for the “style.css” on a child theme. Now I want to change in another css file of parent theme’s folder ….. /font_awesome/css/fontawesome.css
    Now, I want to know that where I will put my new fontawesome.css in child theme & how to use @import command.
    or any other process to use more css file in child theme.

    Reply
  20. Rebecca says:
    Feb 5, 2017 at 11:01 am

    So, I don’t have the wp content folder on my computer. What should I do?
    Should I have downloaded this at some point?

    Reply
    • WPBeginner Support says:
      Feb 5, 2017 at 7:14 pm

      Hi Rebecca,

      The wp-content file is hosted on your hosting account not on your computer. You will need an FTP client to connect to your server.

      Reply
  21. Brad says:
    Jan 31, 2017 at 8:32 pm

    Using @ import is no longer best practice

    Reply
    • SAppa says:
      Feb 1, 2017 at 9:50 pm

      Then what is the best practice now? You should be able to back up your comment.

      Reply
  22. Jual beli rumah says:
    Jan 21, 2017 at 7:56 am

    Thankyou

    Reply
  23. Jean-philippe says:
    Dec 4, 2016 at 12:24 am

    I am learning so much since a few hours on your website. Everytime I search something in google related to “how to” in wordpress I find that the best information is here at WPbeginner. It is always well explained and easy to understand. I will always come back for information here without a doubt.

    Reply
    • WPBeginner Support says:
      Dec 4, 2016 at 6:34 pm

      Hi Jean-philippe,

      Thanks for the kind words, we are glad you find WPBeginner helpful :) Don’t forget to join us on Twitter for more WordPress tips and tutorials.

      Reply
  24. Smart Rashed says:
    Oct 30, 2016 at 11:36 am

    This is the article ,which i am looking for,thanks man.

    Reply
  25. Kevin says:
    Oct 18, 2016 at 2:41 pm

    I know this will be a stupid question. I’m so new to this and have no skills at all. If I am creating a file, style sheet, etc. on my wp installation file on my local pc, how does that get onto my website? I guess I’m missing that? I use like 3 different PCs to work on my website and those local files aren’t on all of them. Again, I am sure I am missing something really dumb. Not seeing the connection.

    Reply
    • WPBeginner Support says:
      Oct 18, 2016 at 10:41 pm

      The files you edit on your computer need to be transferred to your website using an FTP client. See our guide on how to upload WordPress files using FTP.

      Reply
      • Kevin says:
        Oct 19, 2016 at 2:06 pm

        Ok, I got that and made a child theme, but when I activate it, the formatting on the site is all off from the parent theme. What did I do wrong?

        Reply
  26. Francesco says:
    Jul 30, 2016 at 6:20 am

    Hi there,
    I’m following your tutorial but WordPress (4.5.3) doesn’t recognise the new folder on my online server. How can I work around this?
    Thanks,
    F.

    Reply
  27. Muhammad Moosa says:
    Jul 2, 2016 at 7:24 am

    Helpful article indeed, I followed it and created a child theme. Thanks.

    Reply
  28. Carolina says:
    Jun 21, 2016 at 4:27 pm

    Hi, thanks for the tutorial, very helpfull. But I have a question. Can I create a child theme from an already established website? I have a client who designed his own website but did not create a child theme. How to go about it?

    Reply
    • WPBeginner Support says:
      Jun 29, 2016 at 8:26 am

      If their current theme follows WordPress coding standards and best practices then you should have no trouble creating a child theme.

      Reply
  29. Mike says:
    Apr 28, 2016 at 4:56 pm

    Thank you so much for the article and video. Apparently since these were created WordPress has new best practices listed in their codex which is confusing me.

    “The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice.”

    Do I stick with the steps you outlined herein verbosely, or do I omit the import function and create the PHP file, or do I implement both?

    My theme’s style.css file only contains a header so importing that file seems irrelevant, and there are multiple CSS files like main.css located elsewhere in the parent’s file structure. Not knowing any better as a beginner I have already made changes to main.css to achieve some of my goals and only now I realize the child theme is necessary.

    Any advice is greatly appreciated.

    Best regards,

    Mike

    Reply
    • WPBeginner Support says:
      Apr 28, 2016 at 5:56 pm

      You will need to import at least your style.css file it should be in your parent themes main directory. It should automatically import other CSS files.

      Reply
      • Mike says:
        Apr 28, 2016 at 6:36 pm

        Even if the style.css has nothing but the header?

        Reply
        • Jack says:
          Dec 24, 2017 at 4:03 pm

          If your style.css file do not have imports to other css styles, you can import them directly, just like style.css.

  30. Olamide says:
    Apr 1, 2016 at 6:55 am

    Good day. When I did a live preview of the child theme, I noticed that it didn’t have the css of the parent theme. Maybe this is as a result of an error in the way I inserted the code?
    This is the code that I inserted:
    /*
    Theme Name: sparkling child
    Theme URI: https://www.wpbeginner.com/
    Description: sparkling child theme
    Author: djetlawyer
    Author URI: http://www.example.com
    Template: sparkling
    Version: 1.0.0
    */
    @import url(“../sparkling/style.css”);

    The parent theme is “sparkling”. If there is any error, please correct me.
    Thank you.

    Reply
    • WPBeginner Support says:
      Apr 2, 2016 at 1:34 pm

      The code is correct.

      Reply
  31. lucia says:
    Feb 10, 2016 at 7:20 am

    Hi there,
    I am trying to set up a child theme to activate my footer on twenty twelve, but I don’t know what code to use to set it up.
    I tried this webpage

    with various suggestions , and I have tried to change your suggestion as given on twenty thirteen , but I don’t succeed.
    Could you please give me the right working code for setting up a child them for twelve twelve.

    Reply
  32. Leigh says:
    Jan 7, 2016 at 12:46 am

    This was incredibly helpful – especially your HTML for us to copy. I’ve never been so excited to see colors change on a website before. This is easily the best “how-to” out there for this theme!

    Reply
  33. Bhautik Andhariya says:
    Jan 5, 2016 at 12:47 pm

    Hello, I have tried same example that you shown. But my child theme is replacing all the style of its parent theme.
    It doesn’t have any style of it’s parent. What is the solution? Can you please help me? I am new in wordpress and i am learning it.

    Reply
  34. Angelo says:
    Nov 25, 2015 at 5:06 pm

    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!

    Reply
    • WPBeginner Support says:
      Nov 25, 2015 at 9:33 pm

      Please contact the theme developer for support.

      Reply
  35. Djamila says:
    Oct 17, 2015 at 11:14 am

    Hi,

    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.

    Reply
    • WPBeginner Support says:
      Oct 17, 2015 at 1:15 pm

      Contact the plugin support.

      Reply
  36. Amanda says:
    Oct 14, 2015 at 1:34 pm

    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?

    Reply
    • WPBeginner Support says:
      Oct 14, 2015 at 7:59 pm

      Yes, your child theme will inherit all these options.

      Reply
      • Amanda says:
        Oct 15, 2015 at 3:17 am

        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?

        Reply
  37. Laura says:
    Sep 13, 2015 at 1:43 am

    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!

    Reply
  38. Boyet says:
    Aug 29, 2015 at 3:24 am

    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…

    Reply
    • WPBeginner Support says:
      Aug 30, 2015 at 1:49 pm

      Yes.

      Reply
  39. Tony Arnold says:
    Aug 11, 2015 at 1:34 pm

    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

    Reply
  40. Sohail Farooq says:
    Aug 5, 2015 at 4:41 am

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

    Reply
  41. Xander says:
    Jul 24, 2015 at 10:22 am

    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,

    Reply
    • WPBeginner Support says:
      Jul 24, 2015 at 10:58 am

      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.

      Reply
      • Xander says:
        Jul 27, 2015 at 7:37 pm

        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?

        Reply
  42. Chris says:
    Jun 27, 2015 at 12:09 am

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

    Thanks!

    Reply
    • WPBeginner Support says:
      Jun 28, 2015 at 9:36 pm

      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.

      Reply
  43. Daniel Garneau says:
    May 12, 2015 at 11:13 am

    Hello,

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

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

    Reply
  44. Maria says:
    Apr 29, 2015 at 8:55 am

    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?

    Reply
    • WPBeginner Support says:
      Apr 29, 2015 at 10:51 pm

      Yes.

      Reply
  45. Louise Mason says:
    Mar 29, 2015 at 2:20 pm

    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!

    Reply
    • WPBeginner Support says:
      Mar 29, 2015 at 2:32 pm

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

      Reply
      • Sonam says:
        Aug 12, 2015 at 9:50 pm

        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.

        Reply
        • Kylee says:
          Nov 29, 2015 at 10:31 pm

          Hi – I go with Home Directory. That takes me to all the files. I click on Public HTML on the left to access my various sites. You probably figured it out at some stage but just in case you didn’t…

  46. Viju says:
    Mar 23, 2015 at 12:43 am

    Hi,

    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 ?

    Reply
  47. Stephen James says:
    Mar 5, 2015 at 1:53 pm

    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.

    Reply
    • Vatsal Savani says:
      Mar 9, 2015 at 9:13 am

      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: http://www.yourwebsite.com

      Description: A Twenty Thirteen child theme made by stephen

      Author: Stephen James

      Author URI: http://www.yourwebsite.com

      Template: twentythirteen

      Version: x.x.x

      Hope you get what I mean, good luck!

      Reply
  48. Ariz Khan says:
    Dec 25, 2014 at 8:51 pm

    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.

    Reply
  49. WPBeginner Staff says:
    Nov 21, 2014 at 2:19 pm

    Did you save the template file as style.css

    Reply
    • ada says:
      Dec 4, 2014 at 9:23 am

      I also had the same problem. I deleted the numbers on notepad and could see the template.

      Reply
  50. Kim says:
    Nov 20, 2014 at 4:39 pm

    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!?

    Reply
« 1 2

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
TrustPulse
TrustPulse
Instantly get 15% more conversions with social proof. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
Churnly Coupon
Get 30% OFF on Churnly WordPress automated churn-busting plugin.
AccessPress Themes
AccessPress Themes Coupon
Get 15% off on AccessPress Themes collection of premium WordPress themes and plugins.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.