How to Make a WordPress Child Theme

In this week’s Quick Guide, we cover how to make a child theme in WordPress. You can — and sometimes should — just modify your CSS via the new “Additional CSS” feature in 4.7. But when you want to make bigger changes — especially to the PHP in the template files themselves, that’s not enough. That’s where you should be using a child theme in WordPress.

If you’re ready to learn, check out the video lesson below.

We’ve written at greater length about why you should use a child theme when you want to change ways the theme you’re using works on a WordPress site. The quick summary any changes you make that aren’t on a child theme will be lost as soon as you update your theme (which you’ll want to do frequently to prevent issues with security and get new features).

A Walk-through of the Steps to Make a Child Theme

  1.  Add a a new folder in your themes directory (wp-content/themes). I’m doing this locally first (in my sites folder, as opposed to adding it directly to my server):wordpresss-child-theme
    A common convention when you create this new folder, is to use the name of the parent theme, and add to it with -child. In this case, I’m using a theme whose folder is called rosemary so my child theme folder is named rosemary-child.
  2. Create a new file called style.css and place it inside that folder. This is the most important, and only, file you need for a child theme.child-theme-step2
  3. On your new stylesheet, add the following code to the top (changing the information to your own)
    child-theme-header

    /*
    Theme Name:     Rosemary Child
    Theme URI:      http://solopine.com/theme/rosemary/
    Description:    Child theme for the Rosemary theme
    Author:         Harper Phillips
    Author URI:     https://wpshout.com
    Template:       rosemary
    Version:        1.0
    */
    

    The most important like here is my Template: rosemary. It’s telling WordPress the (folder name) or my parent theme. All the other lines are actually used in all WordPress themes!

  4. If necessary (it is about 90% of the time): If you’ve got a page showing, but it doesn’t look right at all, don’t worry. It’s a troubling experience, and but there’s a pretty quick fix. The easiest solution is an @import url('../rosemary/stylesheet.css') as the first non-comment line of your stylesheet. (As you may guess, change the 'rosemary' to whatever you used as the Template: value in the comment.) For more about other (arguably better) ways to include your stylesheet in a child theme, check out this post from Justin Tadlock.

And that’s it! While you can add other pages to your child theme, a stylesheet is enough to start customizing your design. It’s good to note that every file in the child theme overwrites the file of the same name in the parent, except functions.php. For more information on child themes check out our post on why you should always use one!

Image credit: dfataustralianaid, wpshout


6 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Narendra
January 10, 2018 3:57 am

Thank you! Very well-written and clear article. I learned everything I needed and now I’m in control of my WP.

The WordPress Template Hierarchy: What, Why, and How | WPShout
May 23, 2017 12:08 pm

[…] It’s in need of some brushing up, but for now you’ll be adequately served by these two articles on WPShout or this one on the WordPress.org […]

Henry Ramirez
December 20, 2016 3:48 pm

The best and easy way is using theme from studio press, just add the theme and child theme..done..bud still ..is always good to know code.

Demystifying Theme "Frameworks" | WPShout
July 19, 2016 1:52 pm

[…] really a “parent theme.” If you’re familiar with the idea of parent and child themes in WordPress (and if you read this site at all regularly, it’s something you probably already know) you […]

Three Things You Need Before Making Changes to Your CSS | WPShout
December 10, 2015 5:21 pm

[…] heard from a few sources that this is a pretty bad idea. So, I decided to do things properly and make a child theme. However, before making a child theme, there are three things I’ll need […]

Kat
November 25, 2015 3:57 am

Hello,

You forgot something that might interest some people: how to add multilingual support (for parent and child theme)