WordPress Theme Development single.php

I introduced the concept of working with Template and Child Themes in WordPress. Now we’re going to put this into practice.

Child themes are extensions of a parent theme. With Child themes, you can modify the parent without making any breaking changes. You don’t need to modify the parent theme files or touch the files in any way to create a Child theme.

As of right now, there are only 2 levels of theme you can have; the parent and child theme.

Create a Child theme

A child theme is a theme directory, just the same as a parent theme. What makes it a child theme is that it is linked to the directory name of the parent.

Directories:
wp_parent_theme (d)
wp_child_theme (d)

WordPress loads the child theme’s files first and if they are not present falls back to the parent directory.

To make a child theme we need as a bare minimum, one more style.css file.

As before, we use a style.css file to implement a Child Theme and specify its details for the theme repository; with a comment header.

/* style.css */

/**
 * Theme Name: WordPress Theme Development
 * Template:   wp_parent_theme
 */

There is one caveat to the Template field. It must be a 100% match of the folder name of the parent theme.

/* style.css */

/**
 * Theme Name: WordPress Theme Development
 * Template:   subdomain_2024
 */

Once you’ve done this, an extra theme becomes selectable in the Theme Repository.

Appearance ----> Themes ----> Find Theme ----> Activate

Now we’ve got a new theme; a child theme ready to inherit code from the parent it’s linked to. WordPress knows it’s a child theme. However, WordPress doesn’t automatically carry over the main stylesheet over to the Child theme. Let’s cover how to override and edit the main stylesheet in a Child Theme.

Add a functions.php file into the child theme directory.

functions.php

Functions.php overrides and adds to any code that is in the corresponding file of the parent theme.

<?php 

    function retrieve_styles_from_parent() {

    }

    add_action( 'wp_enqueue_scripts', 'retrieve_styles_from_parent' );  ?> 

Get a reference to the parent stylesheet

function retrieve_styles_from_parent() {

    wp_enqueue_style( 
    
        'parent-style', 
        // get_stylesheet_uri()
        get_parent_theme_file_uri( 'style.css' )
    )

}

add_action( 'wp_enqueue_scripts', 'retrieve_styles_from_parent' );

Then you can start writing styles that differentiate from the parent theme in your Child’s style.css file.

body {

    /* background: orange; */
}

you can also use something like this…

@import url("../parent-theme/style.css");

… in the child stylesheet. But this technique is no longer recommended.

If the parent theme loads both stylesheets, the child theme does not need to do anything. Its stylesheet will be automatically loaded.

This example, taken from the WordPress Developer Resources, loads both the parent and child style.css files.

add_action( 'wp_enqueue_scripts', 'grand_sunrise_enqueue_styles' );

function grand_sunrise_enqueue_styles() {

	wp_enqueue_style( 
	
		'grand-sunrise-style', 
		get_stylesheet_uri()
	);
	
}

Customisations with Child Themes

When building a child theme, you have the option to overwrite any template, part, or pattern that exists in the parent theme by adding a file of the same name in your child theme.

wp_parent_directory (d)
    style.css
    
wp_child_directory (d)
    style.css

For the Child Theme stylesheet comments here… the options are:

• Theme Name:
• Description:
• Author:
• Author URI:
• Template:
• Version:

Theme Name: Here is the name of the theme. This is the name that shows up in the WordPress Dashboard under Appearance > Themes.
Description: A short description of 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 Classic Child Theme, which can be a person’s name or company name.
Author URI: The URL for the author of the Classic Child Theme.
Template: Very Important! This is the folder name of the parent theme. If this variable is not correct the Classic Child Theme will not work.
Version: The version of the Classic Child Theme.

Let’s see how one template can override the other. Copy 3 templates to your child theme.

header.php
front-page.php
footer.php

The goal of this next part is simply to demonstrate how one file overrides the other with a simple change. By simply adding the word Child to a template you can see the cascade effect of the child theme coming into place.

<?php require "header.php"; ?>

    <h1>WordPress Theme Development <span class="template_name">front-page.php</span></h1> 

    <section>
            
        <article>

            <div>

                <h2>Working with WordPress (Child)</h2>
                    
                . . . 
            </div>
        </article>
            
        <!-- Snip -->
            
<?php require "footer.php"; ?>                    

To summarise

Child Themes are an important part of WordPress development. They have the following advantages:

Maintainability: Allows for updates to the parent theme without losing customizations.
Organisation: Keeps custom code separate from the original theme code, making it easier to manage and troubleshoot.
Best Practices: Encourages the use of best practices in theme development by leveraging existing themes and extending them.

In summary, the relationship between a parent and child theme is one of inheritance and extension, where the child theme builds upon the foundation provided by the parent theme, allowing for flexible and maintainable customizations.