Why and How You Create WordPress Child Themes

Why You Create Child Themes

Child themes are customized versions of an original (“parent”) theme. If you make changes to the parent theme directly, you risk losing those changes whenever the theme is updated. The key benefit of a child theme is that you retain all of your customizations when the parent theme is updated. I usually create the child theme myself, but there are plugins that will do it for you. Furthermore, if you’re using a framework like Genesis, you use child themes in addition to the “parent” Genesis theme.

How to Create Child Themes – General

A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

• the child theme directory
• style.css
• functions.php

For full details, read the WordPress.org explanation:
https://developer.wordpress.org/themes/advanced-topics/child-themes

Step 1 – Create a child theme directory (folder) inside wp-content/themes

Append directory name with “-child”. For example:
Parent theme directory = “TwentyNineteen”
Child theme directory = “TwentyNineteen-child”

OR

Step 1 Alternative – Append directory name with “-clientname”

This is a good strategy when creating multiple child themes for the same parent theme. For example:
“TwentyNineteen-clientname”

Step 2 – Create a copy of the parent theme style.css file

Then, change the name of the copy to: “style-TwentyNineteen-original.css”

Step 3 – Edit child theme’s stylesheet file (style.css)

The style.css file must begin with the following header:

/* 
 Theme Name: Twenty Nineteen Child 
 Theme URI: https://example.com/twenty-nineteen-child/ 
 Description: Twenty Nineteen Child Theme 
 Author: Anne Katzeff 
 Author URI: https://www.askdesign.biz  
 Template: twentynineteen 
 Version: 1.3
 License: GNU General Public License v2 or later 
 License URI: http://www.gnu.org/licenses/gpl-2.0.html 
 Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain: twentynineteen-child 
 */

Required information:

• Theme Name – must be unique and different from the parent theme.
• The following information should be based on the child theme:
  • Theme URI
  • Description
  • Author
  • Author URI
  • Text Domain
• Keep the following information the same as the parent theme:
  • Template – must be the name of the parent theme directory
  • Version
  • License
  • License URI
  • Tags

Step 4 – Continue editing child theme’s stylesheet file (style.css)

Delete everything underneath the header. Therefore, this stylesheet will only contain your modifications.

Step 5 – Depending on the theme, either import parent style sheet into style.css or add enqueue to functions.php

• OPTION #1 – Import parent style sheet into child theme style.css:
  @import url(“../suffusion/style.css”);
  @import url(“../suffusion/skins/light-theme-royal-blue/skin.css”);
  /*— add overrides below —*/

OR

• OPTION #2 (The recommended method) – Add enqueue to child theme functions.php file:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    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 ),
        wp_get_theme()->get('Version')
    );
}

Step 6 – Upload BOTH parent and child themes to your WordPress site

Step 7 – Activate the child theme

After activation, you may need to resave your menus and theme options.

Use a Plugin

Sometimes you may encounter problems in creating a child theme manually. I had such an issue recently. For a new client, I inherited a site that uses a multi-purpose, page-builder theme. The previous developer customized the theme by modifying the style.css directly, without the use of a custom style file, WP customizer, or child theme. Any theme updates would have eliminated all of the customizations!

I attempted to build a child theme myself. But, there are so many templates and CSS files that my attempts were unsuccessful. Along came the Child Theme Configurator plugin to the rescue! It analyzes the parent theme, then you select the options you need. Within a minute or 2, voila! You have a child theme that works perfectly. I highly recommend this plugin:
https://wordpress.org/plugins/child-theme-configurator/

How to Create Child Themes – Genesis Framework

These steps are a little different since Genesis is a framework that uses child themes.

Step 1 – The same as for General child themes

Create a child theme directory (folder) inside wp-content/themes.
Append directory name with “-child” OR with “-clientname”. For example:
Parent theme directory = “TwentyNineteen”
Child theme directory = “TwentyNineteen-child” OR “TwentyNineteen-clientname”

Step 2 – The same as for General child themes

Create a copy of the parent theme style.css file.
Change name of copy to: “style-TwentyNineteen-original.css”.

Step 3 – Edit child theme’s stylesheet file header area (style.css) to have your information

/*
	Theme Name: Digital Pro PEK
	Theme URI: http://my.studiopress.com/themes/digital/
	Description: Customized theme for Paul E. Katzeff, based on Digital Pro.
	Author: Anne S. Katzeff
	Author URI: https://www.askdesign.biz/
	Version: 1.1.2
	Tags: one-column, two-columns, left-sidebar, right-sidebar, custom-colors, custom-header, custom-menu,  e-commerce, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready
	Template: genesis
	Template Version: 2.2
	License: GPL-2.0+
	License URI: http://www.opensource.org/licenses/gpl-license.php
	Text Domain: digital-pro
*/

Step 4 – Add your customizations in one of the following ways:

• Use the theme’s customizer :
  Appearance > Customize > Additional CSS.
• Add to the bottom of the stylesheet, before the media queries.
• Edit the stylesheet directly.

Step 5 – Upload BOTH Genesis Framework and the child theme to your WordPress site

Step 6 – Activate the child theme

After activation, you may need to resave your menus and theme options.

Sources

• https://www.studiopress.com/
• https://wordpress.org
• https://www.w3schools.com
• http://www.htmldog.com/
• Genesis Child Theme Development: How to Make it Yours by Carrie Dils http://ow.ly/N0N6304Rwg5

Related Posts

How to Choose a WordPress Theme
My Core Set of WordPress Plugins
WordPress Pages vs. Posts
Placing a Logo in a Genesis WordPress Header