child-theme2

What is a child theme?

Child themes are like little carbon copies of a WordPress theme, or the parent theme, which share the same functionality. When you create a child theme, you’re making a duplicate of the parent theme’s files. Should you wish to play around with or customize the theme’s code, you can safely do so with the child theme’s files, leaving the parent theme untouched and preserved.

Why should I use child themes?

By customizing the code of the child theme files rather than touching the parent theme’s, you avoid the risk of accidentally damaging the theme’s functionality, compromising the core theme files, or saving over your modifications when an update is released and implemented. This allows the parent theme to be safely updated without negating all of your hard work yet still reflecting the benefits of said update. Simply put, utilizing child themes can save you valuable time and major headaches down the line. Want to start over fresh further down the road? Simply scrap the altered child theme and begin anew with your pristine parent theme.

How do I create a child theme?

Below, we’ll walk you through the various steps of preparing a child theme.

 

tools
Getting set up

There are two different methods to getting your child theme up and running:

Via Your FTP Program

You can directly create your child theme folder via FTP by logging on to your program (we use FileZilla) and navigating to your “wp-content/themes” directory. Within your themes directory, you’ll need to create a new folder for the child theme. Conventionally, it’s common to name the folder after the parent theme yet with “-child” at the end. Inside the child theme directory, create a file called “style.css” and be sure to include the text snippet below at the top of the document. You’ll want to plug in your own information for Theme Name, Theme URI, etc..

Via Your WordPress Dashboard

A second option is to create a local folder on your computer. Again, give it an appropriate title (commonly the parent theme’s name with the “-child” appendix) and save a “style.css” file featuring the below text at the top. Replace the dummy details with your own. Compress, or ZIP, the child theme folder as this is required for uploading.  On your WP dashboard, navigate to Appearance > Themes > Add New and upload this new theme.


/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout
 Text Domain:  twenty-fourteen-child
*/

@import url("../twentyfourteen/style.css");

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

Please note that the “Theme Name” and “Template” lines are the only mandatory bits of data. The “Template” is the directory name for the parent theme.  The “@import” line is also crucial to include as it identifies the path to the parent theme’s CSS file.  Since we’ll be saving the child theme’s CSS file after the parent theme’s CSS file, any modifications made in the child theme’s CSS will override that of the parent theme’s.

 

bolt
Activating the child theme

Just as you would activate any other theme, head over to your website’s WordPress dashboard. Navigate to Administration Panels > Appearance > Themes. Your newly created child theme should be listed. Click “Activate”.

To style your child theme differently than its parent, simply begin applying your preferred styling rules in its CSS file underneath the “@import” line.

 

brush-pencil
Customizing more than the stylesheet

As we’ve only imported a CSS file for the child theme, all other crucial files and coding will be pulled from the parent theme’s folder. Should you wish to modify or add to any PHP files, you can easily duplicate the template file(s) from the parent theme and save it within the child theme’s folder. Be sure to keep the name of the file exactly as it is worded for the parent theme– it will be pulled first from the child theme and will override the parent theme’s file.

Now, that being said, it is very important to note that, should the developer release an update that includes modifications to any PHP files you’ve customized, the child theme’s file will override the parent theme’s and this new update will not take affect. It may be a good idea to keep a running list of any changes you make to all child theme PHP files. Should you wish to implement the author’s update, you’d have a helpful overview of what’s been adjusted.

Feel free to modify, customize, and tinker worry-free to your heart’s content! Still have questions or wish to learn more about child themes? We highly recommend looking into the additional resources listed below.

Additional Resources to Check Out

  • WordPress Codex – An excellent in-depth resource for child themes and beyond
  • ThemeShaper - Various techniques when working with child themes
  • Child Themify – A WP plugin that does the dirty work for you