What is a child theme?

Child themes are like little carbon copies of a WordPress theme, or the parent theme, which share the same functionality. When you create a child theme, you’re making a duplicate shell of the parent theme.  Should you wish to play around with or customize the theme’s code, you can safely do so with the child theme’s, leaving the parent theme untouched and preserved.

Why should I use child themes?

If you plan on making lots of CSS styling changes to the theme, a child theme can be really helpful! By customizing the code of the child theme’s “style.css” file, rather than touching the parent theme’s “style.css” file, you avoid the risk of saving over your modifications when a theme update is released and implemented. If you’re solely creating a child theme to make changes within the “style.css” file and no other files, this can allow the parent theme to be safely updated without negating all of your hard work yet still reflecting the functional benefits of said update. Simply put, utilizing child themes can save you valuable time and major headaches down the line. Want to start over fresh further down the road? Simply scrap the altered child theme and begin anew with your pristine parent theme.

When should I use a child theme?

We recommend creating and using a child theme if you’re a developer or someone who plans on dramatically customizing the theme’s CSS code. If you only plan on making a handful of CSS changes to the theme, it’s easier to simply enter these CSS customizations within the Custom CSS box via your WordPress dashboard. Any code entered within your dashboard’s Custom CSS box will be safe and sound if you were to ever update the theme.

Are there any caveats to using a child theme?

We recommend using a child theme if you’re comfortable/knowlegeable altering theme code. If you’re new to WordPress or are not planning on heavily customizing a theme, a child theme is likely not something you’ll need.

If you create or alter the child theme’s PHP files, please note that any theme update to the parent theme which includes changes in those particular theme files may not take effect. This is because the child theme is using its own, customized duplicated file and no longer pulling from the parent theme’s file which has been updated.
If this were to occur, though, there is always the option of identifying the updated/changed code in the parent theme and then applying it within your child theme.


 

How do I create a child theme?

Below, we’ll walk you through the various steps of preparing a child theme.

 

tools
Getting set up

There are two different methods to getting your child theme up and running:

Via Your FTP Program

You can directly create your child theme folder via FTP by logging on to your program (we use FileZilla) and navigating to your “wp-content/themes” directory. Within your themes directory, you’ll need to create a new folder for the child theme. Conventionally, it’s common to name the folder after the parent theme yet with “-child” at the end. For example, if you have the “Redwood” theme and you’re creating a child theme, you could call it “redwood-child”. Inside the child theme directory, create a file called “style.css” and be sure to include the text snippet below at the top of the document.

/*
 Theme Name:   Redwood Child
 Theme URI:    http://example.com/redwood-child/
 Description:  Redwood Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     redwood 
 Version:      1.0.0
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

 

You’ll want to plug in your own information for Theme Name, Theme URI, etc.. Please note that the “Theme Name” and “Template” lines are the only mandatory bits of data. The “Template” is the directory name for the parent theme.

Next, you’ll also want to create a “functions.php” file for your child-theme within it’s folder. Copy & paste the following code into the top of your child theme’s “functions.php” file:

 

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'sp_style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

 

You should now have a folder titled something like “redwood-child”. Within, you’ll have a “style.css” file with the appropriate text copied & pasted within, and a “functions.php” file with the appropriate text copied & pasted in.

Via Your WordPress Dashboard

A second option is to create a local folder on your computer. Again, give it an appropriate title (commonly the parent theme’s name with the “-child” appendix). Within this folder, create a “style.css” file featuring the below text at the top.

/*
 Theme Name:   Redwood Child
 Theme URI:    http://example.com/redwood-child/
 Description:  Redwood Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     redwood-child
 Version:      1.0.0
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

Replace the dummy details with your own. Please note that the “Theme Name” and “Template” lines are the only mandatory bits of data. The “Template” is the directory name for the parent theme.

Next, you’ll also want to create a “functions.php” file for your child-theme within it’s folder. Copy & paste the following code into the top of your child theme’s “functions.php” file:

 

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'sp_style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

 

Compress, or ZIP, the child theme folder as this is required for uploading.  Via your WP Dashboard, navigate to Appearance > Themes > Add New and upload this new theme.You should now have a folder titled something like “redwood-child”. Within, you’ll have a “style.css” file with the appropriate text copied & pasted within, and a “functions.php” file with the appropriate text copied & pasted in.

 

bolt
Activating the child theme

Just as you would activate any other theme, head over to your website’s WordPress Dashboard. Navigate to Appearance > Themes. Your newly created child theme should be listed. Click “Activate”.

To style your child theme differently than its parent, simply begin applying your preferred styling rules in its CSS file underneath the “Theme customization starts here” line.

 

brush-pencil
Customizing more than the stylesheet

By default, all of your child theme’s files and coding will be pulled from the parent theme’s folder. Any CSS changes added to the child theme’s “style.css” file will take affect in addition to whatever is in your parent theme’s files. Should you wish to modify or add to any PHP files, you can easily duplicate the template file(s) from the parent theme and save it within the child theme’s folder. Be sure to keep the name of the file exactly as it is worded for the parent theme– it will be pulled first from the child theme and will override the parent theme’s file.

Now, that being said, it is very important to note that, should the developer release an update that includes modifications to any PHP files you’ve customized, the child theme’s file will override the parent theme’s and this new update will not take affect. It may be a good idea to keep a running list of any changes you make to all child theme PHP files. Should you wish to implement the author’s update, you’d have a helpful overview of what’s been adjusted.

Feel free to modify, customize, and tinker worry-free to your heart’s content! Still have questions or wish to learn more about child themes? We highly recommend looking into the additional resources listed below.

Additional Resources to Check Out

  • WordPress Codex – An excellent in-depth resource for child themes and beyond
  • ThemeShaper – Various techniques when working with child themes
  • Child Themify – A WP plugin that does the dirty work for you

6 responses to “What Are WordPress Child Themes?”

  1. Megan Minns says:

    If I have a child theme in place for one of your themes (Rosemary) and you release an update. How do I go about installing the update without losing my customization?

    • SoloPine says:

      Hi Megan, apologies for the delayed reply! If you’re using a child theme, you would want to only update the parent theme. Be sure to leave the child theme as is. This way, your site would gain the various benefits of the update and your style customizations would remain safe and sound within the child theme. For more information on how to update your theme, we have a FAQ article here: https://solopine.ticksy.com/article/2795/ Cheers! 🙂

  2. Raphael says:

    I cannot override Willow theme’s parent template file vc_willow_portfolio_grid.php
    I’m using the same name and folder structure in child theme folder, and it just don’t work. Is there any configuration I should be aware of?

  3. Lauren says:

    Is this still up to date, because it doesn’t completely work. The look of the blog looks weird.

    • SoloPine says:

      Hi Lauren, the article should still be current. Perhaps there was a step missed? If you have one of our themes and would like help with your child-theme, feel free to head on over to our support site at https://solopine.ticksy.com and open a ticket. We’d be happy to take a look at what’s occurring 🙂 Happy New Year!

Leave a Reply

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