How to Create a WordPress Child Theme

Creating child theme is one of the best options provided by WordPress ecosystem. By using child theme you can utilize features provided by parent theme along with customization that you want to do. And the best part is that, you do not loose any further updates to parent theme.

WordPress theme such as tweenty seventeen, twenty fifteen have been developed and tested by hundreds are developer and it makes no sense to reinvent the wheel. You can simply use the well tested wheel and modify as per your needs.

Please follow below steps for creating child themes

Step#1 Create Basic Structure

A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

Create a folder and name it as required. I have created a child theme of ‘twentyseventeen’ so I created folder name ‘twentyseventeen-child’

Step#2 Update style.css

Copy following code in style.css. Please note to change child theme name as required.

/*
Theme Name: twentyseventeen-child-fintrekking
Theme URI: 
Description: twentyseventeen-child-fintrekking
Author: Pravin Jagtap Deshamukh
Author URI: http://example.com
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: fintrekking
Text Domain: twentyseventeen-child-fintrekking
*/

The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Seventeen theme, so the Template will be twentyseventeen. You may be working with a different theme, so adjust accordingly.

Updating function.php

If you use child theme at this point of time, it will load something like below. This is due to the fact that child theme is not yet importing parent style.css

WordPress Child theme CSS not loaded error

Step#3 Update functions.php

You can import parents style two two methods

  1. Using @import in child themes style.css
  2. Using function.php

Using function.php is recommended method and we will use the same.

<?php
function my_theme_enqueue_styles() {

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

Note: Please make sure you add correct parent style. Here you need to replace word parent with parent theme name.

e.g.

$parent_style = 'twentyfifteen-style'
$parent_style = 'twentyseventeen-style'

Old way of including style.css is by adding following code in child themes style.css. This is not a recommended method but it works. Add import statement right after template definition as shown below

/*
Theme Name: twentyseventeen-child-fintrekking
Theme URI: 
Description: twentyseventeen-child-fintrekking
Author: Pravin Jagtap Deshamukh
Author URI: http://example.com
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: fintrekking
Text Domain: twentyseventeen-child-fintrekking
*/

@import url("../twentyseventeen/style.css");

Once this is updated, you can see the theme CSS is loaded properly.

WordPress Child theme CSS working properly

Step#4 changing other php files

Your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme’s directory, and that file will be used instead of the parent theme’s header.php.

You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive.

Special case of functions.php

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php.

In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme.