Creating a Child Theme in WordPress

Programmers

child-themeCreating a child theme is really important if you’re editing themes, whether you’re changing code on pages, adding to the functions file, or just changing CSS.

By using a child theme, you can upgrade your theme as needed without losing any of your custom coding and/or changes.

The good news is that this is a really easy thing to do.

Step 1 – Create Folder and style.css file

You’ll start with creating a folder called: parenttheme-child.php (Replace “parenttheme” with the name of your parent theme).

Next create a CSS file called style.css within that folder.

Step 2 – Add info to the style.css file

Copy and paste the following information into the top of the file:

/*
 Theme Name: Clean Start Child
 Theme URI: http://kimjoyfox.com/clean-start-child/
 Description: Clean Start Child Theme
 Author: Kim Joy Fox
 Author URI: http://kimjoyfox.com
 Template: CleanStart
 Version: 1.0.0
 Tags: light, dark, two-columns Text Domain: clean-start-child
*/

@import url(“../CleanStart/style.css”);

/* =Theme customization starts here
-------------------------------------------------------------- */

Replace each option with your own. Keep in mind three items that are really important:

Theme Name: It should be name “Parent Theme Child”

Template: foldernameofparenttheme

Import URL: add in your folder here instead of CleanStart

If you get to the end of this tutorial and your child theme doesn’t work, the Template option is probably wrong. Make sure that the folder your parent theme is in is listed correctly here; it’s case sensitive.

Step 3 – Get it on your WordPress Site

You’ve got a folder with one file in it, but it’s not yet on your site. The best option is to zip the folder and upload as a theme under Appearance -> Theme.

Another option is adding the folder to your site using FTP. Make sure you don’t upload the folder underneath the parent theme – install it alongside your theme. This is basically just another theme (except that it pulls its files from the parent theme).

Step 4 – Activate Child Theme

Once you’ve got the child theme installed on your site, you’ll need to activate it on the Appearance->Themes. If you don’t see the child theme there, check the text on your style.css in your child theme – specifically the Template option.

Choose to activate the child theme, and you’re good to go! You can now edit the child theme within Appearance->Editor, just like you can edit regular themes. Keep in mind, only the child theme is technically active, it just pulls information from the parent theme.

Final Thoughts

As you’re editing the child theme, keep in mind the following:

  • Child theme templates override parent theme templates (of the same name)
  • CSS in style.css is loaded after the parent theme css, so child theme wins here too
  • Child theme functions.php is loaded before the parent theme’s functions.php, so you can override the parent’s functions.php file
Comments