How to create a child theme for Hestia

If you are using Hestia or Hestia Pro and want to make some changes in the theme, those changes are likely to be overwritten at the next update of the theme. In order to prevent that from happening, we recommend you create a child theme. Next, you will find the instructions on how to create a child theme for Hestia.

1. Quicker method (using WP-admin)
2. Using FTP

Method 1: Quicker using WP-admin

We have compiled all the steps of method 2 into theme zip file for you in this method. All you have to do is, download the Hestia Child theme from following links for your theme:

• Hestia Pro Child Theme

• Hestia(Lite) Child Theme

Install it  just like any other theme and activate it.

Method 2: Using FTP

Note: Make sure you have FTP access to your site.

Log into your website using your favorite FTP client, such as FileZilla, and navigate to wp-content/themes/ directory. This is the directory where all your themes are living a happy life.

Now, you need to create a new folder for your child theme. You can name it anything.

Important: For this example, as we are creating a child theme of Hestia Pro, we will name it hestia-pro-child . We recommend you name the child theme folder this way for Hestia PRO and hestia-child for Hestia, to be sure, you can migrate the options from the child theme to the parent theme if you want to switch back at some point in time.

Once you have created your folder, you need to create a style.css file inside that folder. Add the following code in the file:

/*  
Theme Name: Hestia Pro Child    
Theme URI: https://www.themeisle.com/     
Description: This is a custom child theme I have created.    
Author: ThemeIsle    
URI: https://www.themeisle.com/    
Template: hestia-pro    
Version: 0.1     
*/

Note: If you are creating a child theme for Hestia, you would need to replace "Template: hestia-pro" with "Template: hestia".

Now, we need to load the stylesheet of the parent theme. Create a file named functions.php in the child theme folder and add the following code:

<?php
if ( !defined( 'ABSPATH' ) ) exit;

if ( !function_exists( 'hestia_child_parent_css' ) ):
    function hestia_child_parent_css() {
        wp_enqueue_style( 'hestia_child_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap' ) );
	if( is_rtl() ) {
		wp_enqueue_style( 'hestia_child_parent_rtl', trailingslashit( get_template_directory_uri() ) . 'style-rtl.css', array( 'bootstrap' ) );
	}

    }
endif;
add_action( 'wp_enqueue_scripts', 'hestia_child_parent_css', 10 );

/**
 * Import options from the parent theme
 *
 * @since 1.0.0
 */
function hestia_child_get_parent_options() {
	$hestia_mods = get_option( 'theme_mods_hestia-pro' );
	if ( ! empty( $hestia_mods ) ) {
		foreach ( $hestia_mods as $hestia_mod_k => $hestia_mod_v ) {
			set_theme_mod( $hestia_mod_k, $hestia_mod_v );
		}
	}
}
add_action( 'after_switch_theme', 'hestia_child_get_parent_options' );

Note: If you are creating a child theme for Hestia, you would need to replace "theme_mods_hestia-pro" with "theme_mods_hestia".

That's all. Save all changes.