Ever customized a WordPress theme then click the “update” button and you’re right back at square one? You can avoid this by using a child theme – a customizable WordPress theme that won’t get overwritten when you update your current theme. A child theme inherits all the functionality of the parent theme and allows you to update the main theme and customize on the child theme without losing any of your work when you update to keep your themes and your WordPress installation current.
One of the great things about WordPress and WordPress themes is the easy-to-use update feature that keeps your site up-to-date with the latest features and security measures. If you’ve made customizations to your theme, though, a WordPress theme update can wipe out all your hard work in a single click. Some themes may already come with a child theme that enables you to do all your customizations there without putting your work at risk when the parent theme is updated.
If you already have a theme with a child theme option, it’s simple to switch over to the child theme by activating it. First, make sure the parent file is installed (this is most likely your current active theme). If not, upload the parent theme first, using the same methods that follow for installing the child theme.
In your WordPress dashboard, select Appearance -> Themes -> Add New -> Upload. Use the “Choose File” button and browse to the location to the zip file for the child theme in your computer. Select that file and then click “Install Now.” Once the child theme is installed, simply click “Activate” and you’re ready to customize your child theme.
If your theme didn’t come with a child theme, making your own is pretty simple. It’s important to note here that everything is case-sensitive, so be sure you’re watching your file names as you type.
1. In your hosting account’s File Manager, create a directory (new folder) named ParentThemeName-Child-Theme.
2. Open that folder and create a new file called style.css (This is the only required file for a child theme).
Click EDIT and type in the following information:
/* Theme Name: Twenty Fourteen Child Theme URI: http://example.com/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme -> Name of your child theme goes here (REQUIRED) Author: John Doe -> Your Name goes here (after all, this is your work!) Author URI: http://example.com -> Your URL goes here Template: twentyfourteen (REQUIRED) -> The name of your parent theme goes here and MUST be the name of the parent theme Version: 1.0.0 Enter a version number Tags: light, dark, two-columns, right-sidebar, responsive-layout ->This area is for adding tags, if you choose to do so. Separate tags with commas Text Domain: twenty-fourteen-child */ @import url("../twentyfourteen/style.css"); -> THIS IS IMPORTANT. This code calls the parent theme and makes your child theme inherit the style properties. Use the parent theme directory and the parent theme style sheet location. DO NOT forget the quotation marks in this relative URL. @import url("../parentthemedirectory/style.css"); /* =Theme customization starts here -------------------------------------------------------------- */ This is where you begin entering your own code to customize your child theme.
3. Click SAVE and return to your WordPress dashboard.
4. Click Appearance -> Themes and you should see your child theme listed there now.
5. Click on the child theme and then click ACTIVATE.
6. From there, you’ll be doing all of your modifications on the child theme, and you can update your parent theme without worrying about losing your customizations. We still recommend doing a backup of your site before updating any theme files or the WordPress installation.