How to create a child theme in WordPress?

What is a child theme and what are the benefits of using a child theme?

Consider a hypothetical situation where you are using a theme which fulfills most of your needs but certain parts need to be modified. What do you do?

Changing the installed theme is one option but it will get overwritten as and when you update the theme. The other option is using a plugin. This option is good for very minor changes but not good enough for bigger changes because it is not made for the purpose.

A child theme provides the best alternative.

In this post, we shall try and create a child-theme for the Twenty Seventeen theme of WordPress.

At the current moment our site has the Twenty Seventeen theme installed and it looks like this.

To create a child theme you simply create a folder with the proposed name under the themes folder. In our case we will call it twentyseventeen-child. Create two files style.css and functions.php.

Define style.css

/*
Theme Name: Twenty Seventeen Child
Author: Champak
Author URI: http://example.com
Template: twentyseventeen
Version: 1.0.0

*/

The important part over here is the Template: twentyseventeen declaration. That theme must actually exist.

What happens if I change the Template: twentyseventeen declaration to
Template: twentyseventeenwa.

You get a broken theme.

Time for a short aside. Our theme doesn’t show a picture as other themes do. To rectify this create a file called screenshot.png and place it in the theme folder.
This is the pic I placed in the folder;

This is how it shows up in the themes page on WordPress.

Activate the child theme and view the site now.

The view is garbled.

The reason for this is that the style.css from the parent theme has not been loaded so far. How do we do it?

Loading the style would adding the add_action wp_enque_scripts action hook.
Write the following code in functions.php

wp_enqueue_scripts is the proper hook to use when enqueuing items that are meant to appear on the front end. Despite the name, it is used for enqueuing both scripts and styles.
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

The functions.php file.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles()
{
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

The look of the site  gets back to normal now.

How do I modify the original theme?
Anything that is rewritten in the child theme will take precedence over content in the parent theme.
Look up the footer as it looks at the moment.

I create a new file footer.php and put the following content there.

This is the child footer

How to change styles? Redefine the styles in style.css as you would do for the other items.

Let us try a modification.
We will try and change the highlighted portion.

Right click on the browser and click inspect.

It shows 2 classes page_item  and page-item-2

Let us redefine  style.css

/*
Theme Name: Twenty Seventeen Child
Author: Champak
Author URI: http://example.com
Template: twentyseventeen
Version: 1.0.0

*/

.page-item-2
{
background-color:red;
}

Leave a Reply