Child Theme

Child Theme for WordPress

 

WHAT

 Child with Parent

A WordPress Child Theme is an editable theme you install that inherits the functions of an installed Parent Theme. The parent theme must be installed first.

 

WHY

 

If you plan to make any changes to your theme in WordPress, you need to install a child theme.
A child theme will allow you to edit the look and add functions to the original parent theme files without losing those edits when the parent theme is updated. (When a theme is updated, it will replace every file in the theme (parent only). If you have edited these files directly, you will lose your changes.)

 

HOW

 

Many theme authors will include a child theme for you to download in addition to the parent theme. The child theme you obtain is uploaded to the theme directory the same as the parent theme. Then you activate the child theme.

 

If there is not one available for your chosen theme, you can easily create your own.

There are only 3 basic files you must include.

  • style.css – All style changes made to the parent theme will go here. This file will import the parent theme and overwrites it with any changes.
  • functions.php – This file is loaded before the parent functions.php, therefore does not overwrite the parent. Only additional code will persist.
  • screenshot.png – An image to portray your child theme for display in the Themes Index. The recommended size is 600×450. It will display as 300×225 though.

 

CREATING THE FILES

 

CREATE a folder with the NameofParentTheme-Child ( Example: twentythirteen-child ).
 

CREATE a style.css file. The following is REQUIRED code: (Bold text denotes inserting your info names.)

Please note that the parent’s template name must be included in the style.css file. Also, its name must be copied exactly as it appears in the parent css file (the template name is case-sensitive).

 

/*
Theme Name: ParentName Child
Description: Child theme for ParentName
Author: YOUR name
Author URI: http://YOURdomainname.net/
Template: ParentName
Version: 1.0.0
*/
@import url("../ParentName/style.css");
/* Your modification goes below */
 

 
The only file that is actually required to create your child theme is style.css. However, if you will be making any changes other than cosmetic style changes to the parent theme, functions.php is recommended.

Using functions.php, there is now another safe way to add, or enqueue, your child’s stylesheet file. It can be used instead of @import url("../ParentName/style.css"); in the css file.

 
CREATE a functions.php file.

<?php
/* child custom PHP functions go below this line */
 
?>

Bear in mind that on all php files, to prevent seeing a blank white screen, there must be zero spaces or line breaks before the first less-than symbol in the file. Similarly, the final greater-than symbol must be the last character, ie: no spaces or line breaks.

WordPress has a strong developer community. Thousands of people around the world design themes and write plugins for WordPress. To make sure that everything works properly and no one is stepping on another’s toe, WordPress has an enqueue script function. This function provides a systematic way of loading JavaScripts and styles.
 
– WPBeginner: How to Properly Add JavaScripts and Styles in WordPress
 
Your child theme’s stylesheet will usually be loaded automatically. If it is not, you will need to enqueue it as well. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it.
 
– WordPress Codex: Child Themes

Here is how to enqueue the styles. Copy and paste the following into your child’s functions.php:

/*----------------------------------------
enqueue styles: this can be used instead of @import url("../ParentName/style.css"); in the child's stylesheet
-----------------------------------------*/
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

 
CREATE a screenshot.png image to denote your theme. You can use any image you want; it will only be displayed in the theme index. You can also take the parent theme image and write text on it to denote that it is the child. The recommended size is 600×450 to display as 300×225.

 

Place all 3 files into the created folder. Upload into the theme directory. Activate child theme. Start your editing by going to Dashboard / Appearance / Editor.

 

TIPS AND CAUTIONS

 

If you need to edit the other main files of the parent theme, copy the file into the child folder. Edit these files there as they will be replaced with a theme update.

 

NOTE: DO NOT COPY THE PARENT FUNCTIONS.PHP TO CHILD THEME. The child functions.php is ONLY for additional php. This file functions differently than all the others. You will create FATAL ERRORS by using the parent file.

 

Remember that the child inherits from the parent. That means that parent must always stay in the theme folder. The dashboard customizations other than these files are using the parent. But dashboard customization persists after a parent theme update.

Biggest tip of all is to keep track of your edits. (Separate copies on your computer – Save often with different file names for you to compare if necessary).

 

OTHER RESOURCES YOU MIGHT WANT TO CHECK OUT

WordPress Page On Child Themes
Child Themes Basics and Creating Child Themes in WordPress
How To Create A Child Theme, And Why You Should Be Using One
What is a WordPress Child Theme? Pros, Cons, and More