Wednesday, December 11th

Child Themes are themes that inherit the functionality and styling of another theme, called the parent theme. Making child themes are the recommended way of modifying an existing theme.

There are thousands of WordPress themes some are free and some you pay for. Some make good child themes but not all of them.

When a child theme modifies another theme, that theme is called the parent theme. WordPress ships with some built in themes. The most recent is twentytwenty. These built in themes are well coded, reliable and compatible with most plug-ins. They also come with the most support because they have been well tested.

When you make a child theme from a parent, you can modify the CSS. If you make modifications through a child theme, updates to the parent theme will not affect the custom styles you create. However, if you make custom changes to the parent theme, updates made to the parent may affect your changes. That is why it is best practice to use a child theme when customizing your WordPress site.

Today we are going create and activate a Child Theme. We’ll have to do a bit of PHP coding. This will be the most complex part of today’s lesson. So we’ll do it together – it should go smoothly. We’ll be working with ATOM as our code editor.

I’ll provide you with the steps and the code. We’ll use this document from WordPress as our reference point.

Activity. Setting up for a Child Theme. First, we’ll preview all our WordPress files in ATOM and then make a theme folder. Then we’ll make a style.css stylesheet and paste the following code in that file.

/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    http://example.com/twenty-twenty-child/
 Description:  Twenty Twenty Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentychild
*/

You’ll notice from the code I supplied you that there are some prompts we want to fill out. The template must match the template name

Our final step is to enqueue our stylesheet. Enqueue is a really cool way to say that we are going to add our child theme’s stylesheet to our queue of available stylesheets so that when our site loads, it can also load our custom CSS. We’ll do this with a bit of PHP in the functions.php file. Follow along with me.

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

If you navigate to Appearance in your dashboard and refresh the page, you should see your Child Theme listed. Let’s activate our Child Themes and make some changes!