In this tutorial, we will check how to create a child theme step by step of any WordPress theme. For this tutorial, we will are going to use GeneratePress as a parent theme.
So first we need to know the parent and child concept in WordPress.
CONTENTS
What is a parent theme?
The parent theme is a base theme of WordPress that will contain all required WordPress templates and assets.
What is a child theme?
A child theme allows us to visually change a parent theme without changing the parent theme code. Suppose we need to change our parent theme CSS or modify some portion of our theme for example footer credit. We can easily change it through a child theme.
How to create a generate press child theme?
In order to create a child theme, we need to install the parent theme first. As we are using GeneratePress as the parent theme, first install this theme from our WordPress dashboard. To install this theme go to Appearance->Add New and search GeneratePress. After install, click on Activate to activate the theme.
Make a child theme folder:
Go to your WordPress installation directory. Then make a directory inside wp-content>themes. WordPress suggests that, give your child theme the same name as the parent theme with -child at suffix. So our child theme name should be generatepress-child. But you can use a different name as well.
Create a stylesheet for the child theme:
Next, inside our generatepress-child directory, create a style.css file. In this file, we can write our CSS rules for our theme. At the beginning of this stylesheet, we need to write some header comments. This basically tells WordPress about our theme.
/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com/
Description: GeneratePress Child Theme
Author: CodeHasBug
Author URI: https://codehasbug.com
Template: generatepress
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, responsive-layout, accessibility-ready
Text Domain: generatepresschild
*/The Theme Name and Template are required. Theme Name needs to be unique and the template value should be the name of our parent theme. In this case generatepress. We can use any theme as our parent template.
Install child theme:
As we created the child theme into the WordPress theme folder, we don’t have to upload the theme. But if we want to create a theme in the local environment and upload it to our server, then we have to zip that theme folder and upload it to our server.
If we go to the WordPress theme option then we will see our child theme.
How to add a screenshot to the child theme?
If you notice here, you will see there are no screenshots in our child theme. Though this is not important. But if we want to show our own screenshot, we need to put an image inside our child theme directory i.e. screenshot.png.
Activate child theme:
In the above steps, we have successfully installed our child theme. Now it’s time to activate our child theme. Go to Appearance > Themes and click on activate to apply our GeneratePress child theme. If we look at the source code of our main website, we can see our style.css has been successfully included.
We can add our own CSS rule to our child stylesheet to override the existing rules. So this is the basic child theme development tutorial. In the next tutorial, we will see how to use wp_enqueue_scripts() to add our custom scripts and also check how to create widgets for our child theme.
