How to create your own Child Theme for WordPress

Customize your WordPress theme the right way with a Child Theme

You’ve searched hour upon hour for the perfect WordPress theme. You find one that is very close if you could only change this or that.

The problem is if you make changes directly to the theme files you won’t be able to update the theme without losing all your customizations.

The solution to this problem is to create a child theme. “With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.”

What is a Child Theme?

The WordPress codex explains the concept well…

“A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.

A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme.

A child theme inherits all of the templates and functionality from its parent theme, but allows you to make changes to the parent theme because code in the child theme overwrites code in the parent theme.”

The child theme folder only needs to contain the style.css file, a functions.php file any other modified files.

Get a free Twenty Seventeen Child Theme

First check if your theme comes with a child theme master zip file or if the theme author has provided one on their website or github. If not you will need to create your own.

If you’re looking for a  Twenty Seventeen Child Theme here’s one you can use. Download the zip file and upload it to WordPress (instructions are in the readme.txt file).

How to Make a WordPress Child Theme

If you are looking to create your own child theme,  you will need to understand how to use an FTP client such as Filezilla and a file editor such as Komodo Edit.

Create a style.css file

• Create a folder on your computer for your new website theme
• Open Komodo Edit and create a new style.css file in your child theme folder
• Open the style.css file and paste in the code below

/*
Theme Name: Your Theme Name
Theme URI: https://yourwebsite.com
Author: Your Name
Author URI: https://yourwebsite.com
Template: twentyseventeen
Description: Child theme for Twenty Seventeen.
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: twentyseventeen-child
*/

• Edit the Theme name, website addresses and your name to give yourself credit as the theme author
• Now create a functions.php file in the same folder with this code: starting with an opening php tag. The functions.php of a child theme does not override its counterpart from the parent.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

• Save both the style and functions files.
• Open Filezilla and connect.
• Create a new folder on the host server  in  ../wp-content/themes/child-theme-name. Use hyphens for spaces in the folder name and make sure it matches exactly with what you put Text Domain in the child theme style.css file.
• upload the style.css and the functions.php files to the twentyseventeen-child folder
• in the WordPress admin area go to Appearance -> Themes and activate your new theme.

You now have a child theme!

You can add your CSS changes to the style.css file of the Child Theme and they will take precedence over the parent theme’s styles.

“If you want to change more than just the stylesheet, your child theme can overwrite any file in the parent theme: simply include a file of the same name in the child theme directory, and it will overwrite the equivalent file in the parent theme directory.”

Copy a style block from the parent theme’s style.css file to your stylesheet, make your CSS change, save the file and FTP it back to the server.

For instance, you can copy the footer.php from the parent theme to the child theme, modify your copyright information, then upload the modified footer.php file back to the child theme folder.

There you go…You can now safely style and modify your WordPress theme!

Reference: WordPress Codex

HTML & CSS for WordPress

If you want to learn more join me for a one-day workshop “An introduction to HTML & CSS for WordPress Users”.