How to create WordPress child theme

To customize look and feel of a WordPress website is easy. You may know that almost every WordPress website uses a ready-made theme or a custom theme. Most the times it is a ready-made theme which is free or paid. Most of the good themes comes with equipped theme panel so most of the times you don’t need to create a WordPress child theme.

However, there are situations when you want to change something in the layout design but it is not possible merely by changing it from the theme admin panel. For example, you want to change something in the header which may not be possible from admin end then child theme is the option.

Also, no one would suggest you to edit the main theme files. Reason, If you are using a active theme it may publish an upgrade in future. It is very important to apply upgrades for some valid reasons.

Child theme is just an extension to your current or in other words to your parent theme. For example, I use blog-kit theme. So lets create a child theme and edit something in the header.

How to Create WordPress child theme

1. Create a child theme folder

First, create a new folder in your themes directory, located at wp-content/themes.

It’s best practice to give a child theme the same name as the parent, but with -child appended to the end. Since I was making a child theme of blog-kit, hence i named it blog-kit-child.

2. Create a stylesheet: style.css

Next, I’ll need to create a stylesheet file named style.css, which will contain all of the CSS rules and declarations that control the look of my theme. My stylesheet must contain the below required header comment at the very top of the file. This tells WordPress basic info about the theme, including the fact that it is a child theme with a particular parent.

/*
Theme Name: Blog Kit Child
Theme URI: https://devarticles.in/blog-kit-child/
Description: Blog Kit Child Theme
Author: Arvind Kumar
Author URI: https://devarticles.in
Template: blog-kit
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: blog-kit-child
*/

Here two things are important:

• Theme Name – needs to be unique to my theme
• Template – the name of the parent theme directory. The parent theme in my example is the Blog Kit theme, so the Template will be blogkit. You may be working with a different theme, so adjust accordingly. If you are not sure about the template name of your parent theme view wp-content/yourparenttheme/style.css

3. Enqueue/Include stylesheet

The last step is to include or in wordpress language to enqueue the stylesheet of your parent theme. The recommended way is to create a enque function in your child themes functions.php file.

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

We also need to enqueue styles of our child theme. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after the parent theme css. Including the child theme version number ensures that you can bust cache also for the child theme. The complete example is:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'blog-kit-style'; // This is 'blog-kit-style' for the Blog Kit theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'blog-kit-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

After saving the files go to the Admin-end  > Appearance > Themes page and activate the child theme. The site layout should just be same as the parent theme layout.

Adding Template Files

Other than the functions.php file (as noted above), any file you add to your child theme will overwrite the same file in the parent theme. For example I wanted to make change in my header.php file so I will just copy that file from parent theme into the child theme and will make changes to it.

For more information on this topic you can visit WordPress website.

Notes:

• You may need to create a screenshot.png file and place it in your child theme folder so that it fills the thumbnail box in the Themes page in backend.
• If you have Additional CSS or other settings in your previous themes Appearance > Customize section it will be lost. So save it before activating the new theme.

Share on Facebook

Tweet

Follow us

Save