How to Create Child Theme WordPress

What is a Parent Theme?

A parent theme is a complete theme which includes all of the required WordPress template files and assets for the theme to work. All themes – excluding child themes – are considered parent themes. lets’ move to How to Create Child Theme WordPress

What is a Child Theme?

As indicated in the overview, a child theme inherits the look and feel of the parent theme and all of its functions, but it can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files. Using a child theme lets you upgrade the parent theme without affecting the customizations you’ve made to your site.

Step1: Create a child theme folder

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.

/*
Theme: twentytwenty
Child Theme: twentytwenty-child
*/

Step2: Create a stylesheet: style.css

Next, you’ll need to create a stylesheet file named style.css In you new create child theme folder, which will contain all of the CSS rules and declarations that control the look of your theme. Your stylesheet must contain the below required header comment at the very top of the file. [wp documentation]

/*
Theme Name:   Twenty Twenty Child
Theme URI:    http://example.com/twenty-twenty-child/
Description:  Twenty Twenty Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentytwenty
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:  twentytwentychild
*/

Theme Name – needs to be unique to your theme

Template – the name of the parent theme directory. The parent theme in our example is the Twenty Twenty theme, so the Template will be twentytwenty. You may be working with a different theme so set it as parent theme slug.

Step3: Add Functions file

Create a functions.php in your child theme’s directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can write the PHP code according to what your parent theme does.
Function file will contain all your customized codes. The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly.
the child theme should loaded before the parent theme.

the functions named get_stylesheet* look for a child theme first and then the parent.

Step4: Enqueue stylesheet

In the past, the common method was to import the parent theme stylesheet using @import inside style.css. This is no longer the recommended practice, as it increases the amount of time it takes style sheets to load. Plus it may be possible for the parent stylesheet to get loaded two time in frontend.

The final step is to enqueue the parent and child theme stylesheets, if needed.

the child theme will needs to load both parent and child stylesheets. Be sure to use the same handle name as the parent does for the parent styles.

<?php 
add_action( 'wp_enqueue_scripts', 'THEMENAME_child_enqueue_styles'); 
function THEMENAME_child_enqueue_styles(){ 
$parenthandle = 'parent-style'; // This is 'twentytwenty-style' for the Twenty Twenty theme. 
$theme = wp_get_theme(); 
  wp_enqueue_style( $parenthandle, 
      get_template_directory_uri() . '/style.css', 
      array(), // if the parent theme code has a dependency, copy it to here 
      $theme->parent()->get('Version')
  );
  wp_enqueue_style( 'child-style', 
  	get_stylesheet_uri(),
  	array( $parenthandle ),
  	$theme->get('Version') // this only works if you have Version in the style header
  );
}

Step5: Install and Active child theme

Install the child theme as you install any other theme. if your child theme not listed in installed theme list.

You can copy the folder to the site using FTP, or create a zip file of the child theme folder, choosing the option to maintain folder structure, and click on Appearance > Themes > Add New to upload the zip file.

Step6: Add custom function file inside your Child theme

for the parent/normal theme function we can add custom function file using get_template_directory() function but it will not work same for the child theme so we will need to use get_stylesheet_directory() function for child theme.

<?php 
// parent theme
require get_template_directory() . '/inc/custom-functions.php';

// child theme
require get_stylesheet_directory() . '/inc/custom-functions.php';