The WordPress training team creates downloadable lesson plans and related materials for instructors to use in live workshop environments. If you enjoy teaching people how to use and build stuff for WordPress, immediately stop what you’re doing and join our team!
Regardless of your skill set, you can help! We need people to write, copyedit, test, audit, connect, and review our lesson plans. Found out how to get started.
In this lesson you will learn what a Child Theme is and when should you use one? This step-by-step walkthrough will give you an understanding of what a Child Theme is and how to create your own Child Theme.
Performing a live demo while teaching the steps to make a child theme is crucial to having the material “click” for students.
It is easiest for students to work on a locally installed copy of WordPress. Set some time aside before class to assist students with installing WordPress locally if they need it. For more information on how to install WordPress locally, please visit our Teacher Resources page.
The preferred answers to the screening questions is “yes.” Participants who reply “no” to all 4 questions may not be ready for this lesson.
Welcome to Child Themes! Today, you are going to learn how to make a Child Theme for WordPress.
One of the first things front-end designers want to do is modify the design of an existing WordPress theme. After a little investigation, we discover where the theme files live, then directly edit the files. After the next theme update, we are horrified to discover that the update completely erased all of our modifications. Many of us have learned this lesson the hard way.
How do you prevent this from happening? By using a Child Theme! A Child Theme is a theme that overrides and adds elements to another theme (the “Parent” theme) without touching any of the Parent Theme’s code. When the Parent Theme is updated, your changes in the Child Theme will be preserved.
At a minimum, your Child Theme needs a style.css file. The style.css file tells WordPress to load the Parent Theme’s files after the Child. Place this file inside the Child Theme’s folder. Make sure it is in the root level of the theme folder and not inside a subfolder.
The style.css file needs the following code at the top:
Theme Name: [Your Theme Name]
Description: The custom theme [Your Theme Name] using the parent theme Twenty Thirteen.
Author URI: [Your URL]
The parent theme’s folder
Here is an explanation of the different variables in style.css:
Theme Name: The Name of the theme. This is the name that shows up in the WordPress Dashboard under Appearance > Themes.
Description: A short description for the theme. You can put anything you like here. This shows up in the WordPress Dashboard under Appearance > Themes once the theme is activated.
Author: The author of the Child Theme. A person’s name or company name can be entered here.
Author URI: The URL for the author of the Child Theme.
Template:Very Important! This is the folder name of the parent theme. If this variable is not correct the Child Theme will not work.
Version: The version of the Child Theme
All of these variables are optional, with the exception of Template:. If this lines is not present or contains typos the Child Theme will not work.
Your Child Theme needs to call the style.css files using a method called “enqueueing scripts.” To add the calls for the parent and child theme stylesheets to your child theme, first you need to create a functions.php file. Place this file inside the Child Theme’s folder. Make sure it is in the root level of the theme folder and not inside a subfolder.
Tip: Note that functions.php in the child theme does not replace functions.php in the parent theme. Normally hooks, actions and filters are used to modify or add functionality to the parent theme.
The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.
This line needs to point to the Parent Theme’s style.css file.
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.
You now have everything you need to create a Child Theme!
Make sure the Child Theme folder containing at least style.css is uploaded or pushed to /wp-content/themes on the webserver, or your computer if you are working on a local WordPress install.
After the theme folder is added to /wp-content/themes go to Appearance > Themes in the Dashboard. You should see your theme listed.
Hover over your theme to reveal the “Activate” button. Click to activate your theme. Once activated, the site will not look any differently on the front-end, but the Child Theme will be the theme in charge. You can now see your theme labeled as “active”.
The files in our example Child Theme illustrate how a Child Theme’s files affect the Parent’s files: they either override elements and add functionality to its identically named file, or completely replaces it.
style.css in Awesome overrides elements and adds to style.css in Twenty Thirteen while screenshot.png completely replaces the copy of screenshot.png in Twenty Thirteen.
Save a copy of footer.php into the Child Theme folder. Edits can safely be made to the Child Theme file, leaving the original copy of footer.php in wp-content/themes/twentythirteen intact. Just like our other Child Theme files, wp-content/themes/awesome/footer.php will override the Parent copy.
To display a Copyright line, replace the content of footer.php in wp-content/themes/awesome with the following code:
In addition to being able to override existing templates with a Child Theme, you can also create new templates.
Let’s say you want to add a new Template without a sidebar. Make a copy of page.php in your Child Theme and rename it page-nosidebar.php.
Edit the existing code at the top:
* The template for displaying all pages
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other
* 'pages' on your WordPress site will use a different template.
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
Template Name: Page with no sidebar
The name of the template goes after the variable Template Name:.
Finally, find and remove the line of code which loads the sidebar. This is called get_sidebar();:
<?php get_sidebar(); // delete this entire line ?>
<?php get_footer(); // leave this line in! ?>
The new template will now appear under Page Attributes on the Edit Page screen: