Tutorial on Creating WordPress Child Theme

Tutorial on Creating WordPress Child Theme

This post is recently updated including the latest guidelines for creating WordPress Child theme.

Many of us want to customize something in theme. Are you also looking to add or edit something in the theme that you are using? If yes, then you have come to the right place, my friend. This post is a simple and comprehensive tutorial on creating a WordPress child theme.

If the theme has lots of customization options then this might help fulfill your needs. But regardless of how many options may be available, there can still be something that the current theme you have is unable to do or is not the way you like. So, if you are comfortable with codes and WordPress then you may dive into the theme files and start editing it spending some minutes, hours to add the changes that you like into the theme, only to discover you have lost those changes when your theme’s next update rolls around.

So to avoid this comes our hero called the Child Theme. Creating a child theme allows you to make changes to your site without changing anything in the original theme’s code. Even if you’re only making a few minor tweaks, it pays to spend a few minutes creating a child theme.

Note: To make simple CSS changes in your website, you can use Additional CSS box added in WordPress 4.7 instead of creating a child Theme. These changes made via Additional CSS box will still remain there even if you update the theme. But if you are looking for other additional changes like editing PHP files, a child theme must be created.

So, I think this will cover the ‘Why Create a Child Theme?’ question. So, let’s move ahead and create a child theme.


How to create a WordPress Child Theme?

In this tutorial, we’re going to show how to create a child theme for our own popular theme Spacious.

Step One:

Create a new folder in your themes directory. You can do so using the cPanel or via FTP. The themes directory is the wp-content/themes. So, let’s name the folder as spacious-child. You can name it whatever you like but remember there should not be any space in the folder name. It is a common approach to name child theme as the parent theme plus -child added on the end.

Step Two:

Inside the spacious-child folder create a file called style.css and fill in the information as shown below.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/
/* =Theme customization starts here
------------------------------------------------------- */

Add this and save the file.

Points to remember:

  • Template name (here in this case spacious) should match the folder name of the parent theme and also make sure there is no blank space after the name.
  • Other details can be added or changed as you like.

Step Three:

Create a file called functions.php as you created ‘style.css’ in Step Two. And fill in the information as shown below.

<?php 
/**
 * Child theme functions file.
 */ 
function spacious_child_enqueue_styles() { 
    // Parent theme style handle 'spacious_style'.
    $parent_style = 'spacious_style';

    // Enqueue parent and child theme style.css.
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'spacious_child_style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get( 'Version' ) );
}

add_action( 'wp_enqueue_scripts', 'spacious_child_enqueue_styles' );

In creating a child theme, style.css and functions.php files are mandatory while template files, and other files are optional and can be created if required.

Lastly, to activate the child theme, in the dashboard go to Appearance->Themes. Look for the child theme you created and activate it. That’s it. Also, make sure the parent theme is also present in the installed themes for the child theme to work. If you now visit your site, it should look all same just like when the parent theme was activated. However, you may need to reset some of the settings in the Customizer.


Modifying Your Theme’s CSS

If you want to modify the theme’s CSS, you can add CSS in the end of the style.css file and save it. These CSS lines will overwrite the parent theme CSS.

For example, say we want to change the font size of the site title for the spacious theme for 36px default value to 42px and also change its color from #444444 default to blue (#0000FF). Then you can just add the below CSS lines.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
#site-title a {
color: #0000FF;
font-size: 42px;
}

Making Further Changes

Editing other theme files
You can also make structural changes to the theme files by adjusting template files. Say, you want some changes or want to add some extra code in the header. Then you can copy the header.php file of the parent theme, paste inside the child theme and make/add changes there and save the file. This header.php file will load instead of the header.php file of the parent theme.


Wrapping Up

Hopefully, now you are able to create a child theme and make the customization that you like. Want to say something? Add it in the comments and I will get back to you. Enjoy!

Sanjip Shah

Founder at ThemeGrill. Started WordPress in early 2012. Knows how to design and code. In my free time, I occupy myself with movies, friends, online games like Dota 2 and many more random stuffs. Follow me on twitter at @sanjipshah.

45 thoughts on “Tutorial on Creating WordPress Child Theme

  • February 1, 2016 at 1:44 am
    Permalink

    Hi,

    Just a quick note to help anyone having problems with child themes after upgrading from Spacious Pro V 1.0.2 (or thereabouts) to V 2.0.1

    In my child theme, I had modified header.php, but after parent theme upgrade, found that my site broke.

    I found that header.php used to call a function ‘of_get_option’ in the old version of theme whereas the new version uses (an almost identical function) called ‘spacious_options’ – simply replacing all instamces of ‘of_get_option’ with ‘spacious_options’ in chlld theme’s header.php, solved the problem.

    Hope this helps someone.

    Reply
  • February 29, 2016 at 10:16 am
    Permalink

    I notice that what bugs me the whole saying my template is missing? Its only in the template. It must have all small letters. I did the wrong ColorMag. The correct should have been colormag.

    Reply
  • March 13, 2016 at 8:34 am
    Permalink

    After watching a lot of Youtube videos I chose Spacious Theme vs Vantage, etc.
    I have installed it in a Wamp64 local server for my trial website.

    Unfortunately, I customized Spacious first instead of Spacious Child theme.
    I should have checked here before I started…

    This is what I get now when I try to upload (choose) any slider image for Spacious Child:

    ———————————————————————-
    “Uploading
    health-cures-s25.jpg An error occurred in the upload.
    Please try again later.”
    ———————————————————————-

    What is causing this error and how can I fix it?

    Thank you for your time.

    Reply
  • March 16, 2016 at 8:04 am
    Permalink

    Hi Jopi,
    This can sometime be due to plugin conflicts. So, try deactivating your active plugins one by one and see if this solves the issue.
    Thanks.

    Reply
  • March 18, 2016 at 9:42 pm
    Permalink

    Thank you for your suggestion, Sanjip.

    I started from scratch and re-installed Wampserver and WP, so far so good.
    I have not yet added slider images and plugins…

    Could you help me again with removing Post Author and Date?
    I couldn’t find which php file or Dashboard section to make the modification I need.

    Thank you very much for your help.

    Reply
  • June 10, 2016 at 10:03 am
    Permalink

    HELLO WHAT OF COLORMAGFREE THE CHILD THEME?

    Reply
    • June 21, 2016 at 5:02 am
      Permalink

      Hi,
      I have updated the article, it now contains the ColorMag Free theme child theme zip file as well. 🙂
      Have a nice day!
      Sanjip

      Reply
  • September 3, 2016 at 5:25 pm
    Permalink

    Sanjip, I can’t for the life of me get the Spacious Child theme to work. I am absolutely NOT a programmer, which is probably why I’m having such problems, but I’ve read that @import no longer works all the time and something about enqueue instead?
    I’ve tried to make my own with enqueue but without success. It is so cool that you’ve provided all these children above.
    Is there any way you could make a Spacious Child with that enqueue function? This is driving me crazy!
    Love the theme. Thank you!

    Reply
  • January 8, 2017 at 1:04 am
    Permalink

    Hi Sanjip
    I have already modified my theme before realised i need to create a child theme. How do i go about it?

    And i noticed you have given us the child theme zip file.
    How do i activate it?
    Sorry abit confusing

    Reply
    • January 12, 2017 at 4:47 am
      Permalink

      Hi Adel,

      In this case, you will need to redo the changes, this time via a child theme. Either you do it again via child theme or you will have to stick with current modified theme without updating in future which I personally don’t recommend as you will be missing the bug fixes, new features, WordPress latest version compatibility enhancement that comes with version updates.

      So, if you are able you will need to redo those via child themes, else you will have to hire professional to make the child theme.

      Thanks.
      Sanjip

      Reply
  • February 22, 2017 at 12:50 pm
    Permalink

    hi ,
    I am using flash theme. I have created a child theme but the customizing options are not dispalying. Any solution???

    Reply
    • March 13, 2017 at 10:51 am
      Permalink

      Hi vish,
      Sorry for the inconvenience. We have now updated this article with Child theme file for Flash theme as well.
      Please download the Flash Child Theme ZIP and customize.
      I think there will be no problem now.
      Thanks!

      Reply
  • April 16, 2017 at 6:53 am
    Permalink

    For the Spacious child theme, I lost the ability to customize the logo under the Site Identity section. I can attach a logo, but it does not appear on the page.

    Reply
    • April 17, 2017 at 4:34 am
      Permalink

      Hi Scott,
      Sorry for the inconvenience. May I ask you to submit your query in the support forum? Besides, we do have live chat support as well.
      Thanks!

      Reply
    • July 4, 2017 at 12:49 pm
      Permalink

      Hi Scott, I have the same issue. Did you get a fix for it?

      Reply
  • August 22, 2017 at 12:18 am
    Permalink

    I made a flash child theme and now the social menu won’t appear. How do I fix it?

    Reply
  • September 11, 2017 at 4:22 am
    Permalink

    I am trying to create a child for Flash Pro. I started with the flash child zip as there isn’t a Flash Pro version but tweaking the details in the child style.css I am still seeing an error message ‘The parent theme is missing. Please install the “Flash Pro” parent theme.” .. any suggestions?

    Reply
  • November 9, 2017 at 7:39 am
    Permalink

    Why don’t you provide a child theme in .zip format so that we can just download it right away?

    Reply
    • November 10, 2017 at 11:24 am
      Permalink

      Hi Mohammed,
      Thanks for dropping your comment. If you are looking for child theme zip for any of ThemeGrill themes, then we have added those in the list. If we have missed any then please let us know and we will add it as well.
      Now, if you are just referring to a general child theme, then what you can do is just download any of our child theme zip file from above say Flash child theme zip file. Then you can just edit the details with your own details to make the child theme according to your requirements.
      Hope this information helps.
      Sanjip

      Reply
  • December 3, 2017 at 3:53 pm
    Permalink

    HI, This post appears to be a good post. I have a basic managed wordpress hosting via godaddy. All I have access to is the wordpress admin. There is nothing in the WP admin that allows me to access the theme folder . How can i access the theme folder to create the child theme?

    Reply
    • December 19, 2017 at 10:24 am
      Permalink

      Hi Prakash,
      Please contact your hosting company’s support team for this issue.
      Thanks!

      Reply
  • January 1, 2018 at 1:12 pm
    Permalink

    Hi
    This is prabhu. I’m a web developer. i love working with wordpress. your article about how to create wordpress childtheme will be really helpful for the beginners. your article is very simple and neat. its easy to understand.
    Thanku

    Reply
  • January 4, 2018 at 9:02 am
    Permalink

    Very brilliantly explained. I hope it will help me to get blog of my desire. Thanks

    Reply
  • January 10, 2018 at 9:42 am
    Permalink

    Wow, piece of cake! Thanks for the instructions, much easier than those on the WP site.

    Reply
  • January 23, 2018 at 3:40 pm
    Permalink

    I have already started building my website, will this affect my ability to make a child theme?

    Reply
    • January 31, 2018 at 9:25 am
      Permalink

      Hi Tanner,
      Not really. You can create a child theme or use an existing child theme if you want some customization done with your theme. 🙂

      Reply
  • January 26, 2018 at 11:17 pm
    Permalink

    hi, great post and thank you … I’m just wondering if you have a child theme for Flash Pro? When I use the Flash child it doesn’t allow the pro options? thanks in advance .. Jane

    Reply
    • January 29, 2018 at 10:45 am
      Permalink

      Hi Jane,
      We have just updated the post with Flash Pro child theme. Please check it.\
      Thanks!

      Reply
    • January 29, 2018 at 10:48 am
      Permalink

      Hi Jane,
      We have just updated the post with Flash Pro child theme. Please check it.
      Thanks!

      Reply
  • March 27, 2018 at 11:10 pm
    Permalink

    I need help ..Can you please help me???

    Reply
  • June 3, 2018 at 8:32 pm
    Permalink

    Hello,

    I just downloaded the files to create a Flash child theme, but when I activate the child theme, the logo, the social menu and the principal image do not appear in the child theme.

    Any idea on how to solve this?

    Thanks in advance and best regards!!!
    Carlos

    Reply
    • mm
      June 4, 2018 at 9:34 am
      Permalink

      Hello Carlos,

      You will probably need to set the customize options again for your site since WordPress will recognize child theme as a new theme and hence, the customize options will be set as new without the modification done on parent theme.

      Hopefully, this will solve the issue 🙂

      Reply
      • June 6, 2018 at 4:16 am
        Permalink

        Thank you. That solved the problem.

        Now I have another problem. I have put the following CSS in the styles.css file of the child theme to show the instagram icon on the SOCIAL bar, but it does not work:
        .transparent.header-sticky .header-top {
        display: block;
        }
        .social-menu li a[href*=”instagram.com”]::before {
        content: “\f16d”;
        }
        .social-menu li a[href*=”instagram.com”]:hover {
        color: #333333 ;
        }

        If I put it on the “Additional CSS” section of the Customizer it works, but I would like to have in the file instead of the Customizer.

        Can you help me with this?

        Thanks in advance!!

        Reply
        • mm
          June 6, 2018 at 4:25 am
          Permalink

          Hi Carlos,

          So glad we could help you.
          Can you please post your theme issues on our ThemeGrill support forum
          That way our support team can provide you with the solutions in a more convenient way. Thank you!

          Reply
  • August 20, 2018 at 3:35 pm
    Permalink

    Hi,

    I have the Cenote team, the free version and I would love to edit the footer part “All Right Reserved. Theme By ThemeGrill. Proudly powered by WordPress”. I would like to remove the powered by WordPress bit. Is there anyway I could do that without changing the theme to a Child Theme?

    Thank you.

    Reply
    • mm
      August 21, 2018 at 4:15 am
      Permalink

      Hello Eliza,

      Glad to hear that you are using the theme Cenote. However, the free version does not provide the option to remove the Powered By text. The option will be available on the premium version. We are currently working on it and it will soon be available.

      Hope this helps!

      Reply
  • March 11, 2019 at 7:41 pm
    Permalink

    The CSS Header text on eStore child theme is not showing awesome fonts icons.
    This is what appears on the website header
    yourmail@mail.com +1236574902 242 West Main street, Ohio Shop opens: 06:00-22:00 (weekdays)

    Please advise

    Reply
  • May 11, 2019 at 9:13 am
    Permalink

    Hi Sanjip,

    Could you help me understand how the dashboard settings work? Why the stylings changed via dashboard aren’t lost when a theme is updated? I am guessing that it means, those are not saved into the database. Where are those saved?
    I made some stylings in my site from my dashboard and now it seems like I need to create a child theme so that I can add a page template. I was wondering if those stylings I made through the dashboard will be gone once I activate my child theme.

    Thanks so much for your help!

    Reply
    • mm
      May 13, 2019 at 4:00 am
      Permalink

      Hello Sabina,
      If you are referring to the Additional CSS box, it gets stored within the database and hence the theme update will not wipe out those. And if you want to use the child theme then, you need to copy the CSS added over there to the `style.css` file of the child theme.

      Reply
  • August 28, 2019 at 2:24 am
    Permalink

    hi, with Spacious, slider is not showing with child. I just downloaded the child template from your website. Its activated under customize. Also, there is no HTML for the slider in view-source. Im stumped.

    Reply
    • mm
      August 28, 2019 at 4:11 am
      Permalink

      Hello Derek,
      Could you please put forward it on our Support Page please? 🙂

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest