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
- 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
rosemaryso my child theme folder is named
- Create a new file called
style.cssand place it inside that folder. This is the most important, and only, file you need for a child theme.
- 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!
- 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
Add a comment