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):
   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.
3. On your new stylesheet, add the following code to the top (changing the information to your own)
   

   /*
   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