fbpx

Create Child Theme

Benefits of Child Theme

Whenever you make changes to a WordPress theme, regardless of whether the theme is free or costs money, you should create a child theme. Using a child theme will ensure that any changes that you make to the theme will persist whenever the theme is updated in the future. In addition, you won’t have to sift through the parent theme to find where you made changes, instead you’ll be able to quickly see all of your modifications by looking at the child theme; this allows you to speed up your development time.

Hestia Theme Case Study

  • STEP 1: Create the child theme on your computer (under the following directory structure – hestia-child)
  • STEP 2: Create a file called style.css and place it within the newly created hestia-child directory.  We have replaced the relevant items with the child theme name (ie Hestia Child).
/*
 Theme Name:   Hestia Child
 Theme URI:    http://example.com/hestia-child/
 Description:  Hestia Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     hestia
 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:  hestia-child
*/
  • STEP 3: Create a functions.php file within the hestia-child directory
  • STEP 4: Enqueue the child and parent theme in the functions.php file. This loads the parent and child theme styles for the WordPress site.
<?php
function my_theme_enqueue_styles() {

    $parent_style = 'hestia-style'; // This is 'hestia-style' for the Hestia 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' );
?>
  • Your directory structure should look like the following:
    • hestia-theme
      • style.css
      • functions.php

Leave a Reply

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