Creating and Using Child Themes

1. Introduction

In this tutorial, we will learn how to create and use child themes in WordPress. Child themes allow us to make modifications to a parent theme without changing the original code. This way, we can customize our websites without the risk of our changes being overwritten by future updates to the parent theme.

By the end of this tutorial, you will be able to create a child theme, override parent theme files, and enqueue parent and child theme stylesheets.

Prerequisites

• Basic knowledge of WordPress
• Basic understanding of PHP, HTML, and CSS
• Access to a WordPress installation to practice and apply the concepts

2. Step-by-Step Guide

Child themes in WordPress are a safe way to modify a parent theme. Essentially, a child theme inherits all the features and appearance of its parent theme. You can make changes to the child theme without affecting the parent theme.

Creating a Child Theme

1. Create a new directory in your themes directory. The new folder will house your child theme files. It can be named anything but for best practice, it should be named similarly to the parent theme with -child appended to the end.

2. Create a style.css file. This is the only required file in a child theme. It gives information about your child theme and inherits styles from the parent theme.

3. Create a functions.php file. This file adds features and functionality to the theme. In our case, it will be used to enqueue the parent and child theme stylesheets.

Using a Child Theme

To use a child theme, simply activate it in the WordPress admin dashboard just like any other theme. Any modifications or additions should be made in the child theme.

3. Code Examples

style.css

/*
 Theme Name:   Twenty Twenty-One Child
 Theme URI:    http://example.com/twenty-twenty-one-child/
 Description:  Twenty Twenty-One Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentytwentyone
 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:  twenty-twenty-one-child
*/

This snippet is the header of the style.css file. The important part here is the Template: line which specifies the parent theme.

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    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')
    );
}
?>

This PHP code is used to enqueue the parent theme's stylesheet. The child theme's style.css file is then enqueued with the parent theme as a dependency.

4. Summary

In this tutorial, you've learned how to create a child theme in WordPress and how to enqueue stylesheets for parent and child themes. You now have the ability to make modifications to your theme without risking changes to the original theme code.

Next Steps

To continue learning, you can try modifying other files in the parent theme such as header.php or footer.php. Just remember to copy them into your child theme before making changes.

Additional Resources

• WordPress Codex
• WordPress Developer Resources

5. Practice Exercises

1. Create a child theme for the default WordPress theme. Enqueue the parent and child theme stylesheets.

2. Modify the site header in your child theme. Copy the header.php file from the parent theme to your child theme and make a noticeable change (e.g., change the site title color).

3. Add a new template file to your child theme. Create a template-custom.php file and use it to display a custom page layout.

Solutions and Tips

1. Follow the steps in this tutorial to create a child theme and enqueue stylesheets.

2. To modify the site header, find the site title in the header.php file and apply a different color using inline CSS or by adding a custom class and defining it in your style.css.

3. To create a custom template, write a PHP file that includes a custom loop or any other custom PHP code. To use the template, create a new page in WordPress and select your template under 'Page Attributes' on the right side of the editor.

Remember, the key to mastering WordPress child themes is practice. Keep experimenting with different modifications in your child theme.