Tag Archives: child theme

How to create a Child theme

If you make changes to a theme’s files, those changes are likely to be overwritten when you next update the theme. In order to prevent that from happening, we create a child theme in which you can make create copies of a theme’s files and tweak them, without fear of it being overwritten by any future theme updates.

We recommend all of our customers to create a child theme, even if they’re not planning on modifying theme files anytime soon. It’s not hard to create one, you just need to follow the following instructions.

First Method:

All you need to do is create one folder, and stylesheet and functions file. And make sure that you have FTP access, before you continue reading this documentation.
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. For this example, we will be creating a child theme of    Matrix Premium, so we will name it matrix-pro-child.
Once you have created your folder, you need to create a style.css file inside that folder. Your stylesheet will consist some vital information inside it, so paste the following in it using your favorite text editor:
   /*
   Theme Name: Matrix Pro Child
   Theme URI: https://www.webhuntinfotech.com/ 
   Description: This is a custom child theme I have created.
   Author: Jon Doe
   URI: https://www.webhuntinfotech.com/ 
   Template: matrix-premium
   Version: 0.1 
   */

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

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles',99);
function child_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	 wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/custom.css', array( $parent_style ));
}
if ( get_stylesheet() !== get_template() ) {
    add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
         update_option( 'theme_mods_' . get_template(), $value );
         return $old_value; // prevent update to child theme mods
    }, 10, 2 );
    add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
        return get_option( 'theme_mods_' . get_template(), $default );
    } );
}
?>

Now, Create a file named custom.css in the child theme folder, and add your CSS code there. It make easier to handle CSS code in separate file.

That’s all. You just to save your progress and that’s it.

==========================================================================

Second Method :

There is one more method for creating child theme directory, everything is same except you have to create just one file inside child theme folder and name it style.css and paste the code given below :

   /*
   Theme Name: Matrix Pro Child
   Theme URI: https://www.webhuntinfotech.com/ 
   Description: This is a custom child theme I have created.
   Author: Jon Doe
   URI: https://www.webhuntinfotech.com/ 
   Template: matrix-premium
   Version: 0.1 
   */
   @import url(../matrix-premium/style.css);

Now you just need to add CSS inside this file(style.css) to make it update proof.

=========================================================================

Now, if you’re creating a child theme for any other theme, then you just need to replace matrix-premium in above codes with the folder name of your theme.

Now just go back to Appearance > Themes, in your WordPress dashboard, and activate the theme. 🙂
And if you already made some changes in your parent theme from Customizer, and they will probably won’t appear after activating your child theme. So to solve that, you can use   Customizer Export Import plugin.