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 calledrosemary
so my child theme folder is namedrosemary-child
. - 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. - 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 theTemplate:
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!
Thank you! Very well-written and clear article. I learned everything I needed and now I’m in control of my WP.
[…] 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 […]
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.
[…] 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 […]
[…] 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 […]
Hello,
You forgot something that might interest some people: how to add multilingual support (for parent and child theme)