Creating a Child Theme: WordPress Site Templating Fundamentals

Developing a child theme is a WordPress fundamental worth grasping. If you ever plan to build sites using the CMS, which is a template-driven content management system, knowing how to setup a child theme is useful if not essential.

So, what is a child theme?

The child theme is basically an extension of the parent theme. The parent theme is a set of files that dictates the websites style along with other aspects (site menu, page layouts, widgets, and site functions). Any WordPress theme can become a parent theme, you’ll just need to generate a child theme to move it to that category.

One reason that you would want to have a child theme is that WordPress themes are updated from time to time. If you built custom pages and site sections into the original (or parent theme) and then that theme was updated the update would erase all of your customizations.

When we use a child theme we allow ourselves space to create customization that won’t be erased.

So, let’s setup a child theme, eh?

Each WordPress website has a theme. Even if the theme is a starter theme like BlankSlate, each site has a theme. The theme’s primary job is to dictate the design of a website.

Once we have a theme that we wish to extend upon we can being the process of setting up a child theme. So, for illustrative purposes, we might use the WordPress 2020 theme as our to-be parent theme.

This is the theme we will extend upon.

Each year WordPress produces a new ‘core’ theme, but there are 10s of thousands of themes – many free, some require purchase.

We need to have cPanel or FTP access to the host environment in order to setup our child theme.

This is an important point to consider if you want to use the advise herein.

STEP 1: Login to Host

We will need to login to the host environment. Then, we will navigate to the site files > the wp-content files > the theme files.

STEP 2: Create Child Theme Directory

We then need to create a directory (or a folder) with the name of our child theme. A best practice is to use -child to denote the child theme of a parent. For instance, if our parent theme was TwentyTwenty then our child theme folder will be TwentyTwenty-Child.

STEP 3: Create Style File

Next, within the directory, we need to create a style sheet using style.css.

Once we have that completed we need to do something quite technical. However, with the guidance of the developer handbook you can likely get it accomplished with just a couple of copy paste actions. Let’s give it a go.

STEP 4: Enqueue Scripts & Styles

This final step is to do something called enqueuing the styles and scripts. That is to say, we’ll tell WordPress to load the pathways to files that hold the css and javascript for the website.

This is done through a function. We can find details about the parent theme’s treatment and use that to help determine what to do within the child theme to finish things up.

Read the handbook. If your situations allows for it, copy the code snippet below and simply paste in your own functions.php file. Again, this will go inside a functions file you create in the child theme. The handbook covers it all.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

Leave a comment

Your email address will not be published. Required fields are marked *