Do you have the itch to turn your WordPress theme into something unique? If so, there’ one important step you must take before you get started. You need a Make a child theme first. Doing so will ensure that your hard work doesn’t get overwritten by a future theme update.
Be sure you need a child theme before you got to the time and effort of making one. I explain why and when to use a child theme in this post. If you have customized your design using the Theme Customizer, or a theme settings page in the WordPress admin area, then you don’t need a child theme.
Pre-Flight Checklist
Before you start, make sure you have the following. You won’t get very far without the right tools.
- An FTP program. You use this to move files to and from your web server.
- The FTP login credentials for your web server.
- A plain text editor (NOT a word processor).
Once your tools are lined-up, you’re ready to make a child theme.
How to Make a Child Theme – Step-by-Step Guide
In this example, I’ll create a child theme for Twenty Seventeen. This method will work for any theme.
Step 1: Create a new folder under /wp-content/themes/. This is the home folder for your child theme. Name it whatever you like, just don’t use spaces or punctuation. It’s also a good idea to using lowercase letters only. In the example below, I’ve named the folder “my-child-theme.”
Create a folder for your child theme under /wp-content/themes/Step 2: Inside of the new child theme folder, create a new file named style.css. This is the stylesheet for your child theme. This file is where most of your customizations will be made in this file.
Child theme folder with our new blank style.css file.Step 3: Using your text editor, open the style.css file in your parent theme’s folder. The parent theme is the theme you’re customizing. Copy the header portion of the parent theme style sheet.
This is the header section from the parent theme’s style.css file.Step 4: Open the style.css file in your child theme folder. It should be a blank file at this point. Copy the parent theme’s header information into the child theme’s style.css file.
Step 5: Edit the header information to reflect your child theme’s information. You want to change the Theme Name so that you can identify your child theme from the parent theme.
Add a new line: “Template: “and include the name of the parent theme folder after the colon (see the example below). This “template” line tells WordPress which theme the child theme is customizing.
The modified CSS header added to the child theme’s style.css file. We’ve changed the theme name and added the “template” line to point to the parent theme. We’ve also added an @import line to import the parent theme’s styling.Step 6: Below the child theme header, add a line to import the parent theme’s styles. If you fail to do this, your child theme will look rather plain. Be sure to add all of your CSS customizations below this line.
@import url(“../twentyseventeen/style.css”);
Replace “twentyseventeen” with the folder name of your parent theme.
Step 7: Back in the WordPress dashboard, under Appearance, activate your child theme.
Step 8: Now you can modify your child theme as needed, without fear of losing your hard work.
Add your custom CSS to style.css below the import line.
To customize PHP templates, copy the appropriate template file from the parent theme to the child theme, then customize the Template to meet your needs.
If you’re having trouble figuring out which Template needs customization, consult the WordPress template hierarchy.
Also, be sure you copy only the PHP files that you plan to customize. Do not copy every PHP file in the parent theme.
18 thoughts on “How To Make a WordPress Child Theme”
using v4.7.2, with only the style.css, the theme doesnt appear, needs also a index.php
Hi Zakari,
You should not need an index.php file. In the video demo I use style.css alone with WordPress 4.7.2. Be sure the style.css is named properly – any variation can cause problems. Also, make sure the template line is in place and correctly pointing to the parent theme.
thought I had the same problem because WordPress gave me a similar error message. I just hadn’t uploaded saved changes to my new DiviChild CSS template on the server via FTP. Most importantly the parent template reference hadn’t updated in my DiviChild style.css file in the header
Very well explained ! What about style sheets/other files of plugins ? Please explain that too. Or if you have any video dedicated to plugins in child theme, please let me know the URL. Thanks!
Hi, Suneet.
There’s no need to change your plugin stylesheet. They work the same with any theme. Child or otherwise.
If the parent theme includes styling for a plugin’s output, the child theme inherits that styling. And can override with new styles just like styling any other element on the page.
You mean, we should make all plugin related CSS changes to style.css theme file ? If yes, won’t it be difficult to manage changes related to all plugins in a single CSS file ? Proper commenting in single CSS would be very important in that case.
Also, what about changes to other files like .PHP ? How we can make changes to .PHP plugin files and keep the files intact during plugin update ?
Yes, your CSS customizations for plugins should be made in your child theme’s style.css. Those customizations are specific to your child theme — you are changing the styling to match your custom theme.
And yes, CSS comments will help you keep track of those changes in the future.
With plugins, you face the same problem you face with themes. If you modify the plugin file’s CSS or PHP, you lose those customizations when the plugin is updated.
To change a plugin file’s PHP, you will want to create a new plugin that modifies the parent plugin using available hooks. That way, when the plugin is updated, your custom changes will not be overwritten
Take a look at the WordPress Plugin API documentation for more details. https://codex.wordpress.org/Plugin_API
nice post , thank you
Is it not advisable to use wp_enqueue_style rather than @import now a days? I think WordPress has deprecated the @import usage for importing styles.
Yes, that is correct! But both methods continue to work. @import will always work as it’s a CSS declaration. The current preference for wp_enqueue_style allows developers to remove style sheets programmatically. However, I personally feel that approach significantly raises the bar for creating a child theme. Working with WP beginners (mostly non-programmers), I see a significant number of people struggle just to get the style sheet in place. For those people, adding PHP to the mix is a deal breaker.
Awesome explanation. You just saved me from a major repeating headache. Thanks!
Happy to hear that. You’re most welcome.
thank you for this explain
when I install and activate any theme it shows like child theme no image just writing and some color … why did this happen?
Hi Rafik, if there’s no thumbnail image that means the theme is missing the screenshot.png file. Most professional themes have that, but many custom themes don’t. There’s more information on screenshot.png here: https://codex.wordpress.org/Theme_Development#Screenshot
Hi Kirk,
I followed the directions and wordpress is telling me that the child theme is installed but incomplete. Here’s what it is saying:
Fluida Child Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.
Any tips at this point?
Thanks
Hi Mark, based on that error message it sounds like you left the “Template:” line out of the header in the style.css file. That line should include the name of the folder the the parent theme is in.
If you do have that template line:
1. Make sure the text matches the folder name exactly (capitalization matters)
2. Make sure you’ve uploaded your style.css file to the child theme folder.
Stylesheet is missing. I am getting this error
please show me ways to fix this .
Also tell me which file manager is installed in your system.
Double check to make sure that the style.css file is in the child theme folder.
You can use any FTP program to transfer the file. I use Transmit.
Comments are closed.