WordPress – How to Create a Child Theme?

In this post today I will discus, How to Create a Child Theme? Every new developer first need to learn the WordPress basics. Also need to know how customize your WordPress site. Create new child themes is great starting point for developer to customize WordPress themes.

Why Developer Need to Create a Child Theme?

Child themes are considered the best way to customize or extend function your WordPress default or paid themes. A child theme inherits all the features and appearance of its parent theme. Developer can customize without affecting parent theme function.

This allows a developer to easily update parent theme function without losing parent theme new changes. Developer can easily update update parent theme if release new version for parent theme.

Developer Basic Requirements

A developer need to understanding of CSS/HTML/PHP basic, so a developer can make easily own changes. If developer is good at copying and pasting code snippets from other sources, then that would work too. I am recommend a developer to practice on local development environment. Developer can move all local change to live WordPress site. Because on local server developer can dummy content for testing purposes to child theme development.

Creating Your First Child Theme

Now you can chose one of the default WordPress theme can be used as a parent theme. Example: twentytwenty Developer need to open /wp-content/themes/ in your WordPress installation directory and create a new directory (twentytwenty-child) for your child theme. You can name this directory anything you want but good format is like (twentytwenty-child) name.

Go to /wp-content/themes/twentytwenty-child/ directory and create stylesheet file named (style.css) and open with text editor like Notepad or VSCode and your stylesheet must contain the below required header comment at the very top of the file.

Following information is required for child theme:
Theme Name: Needs to be unique to your theme name.
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. The parent theme folder name is case-sensitive. If you provide with Template – TwentyTwenty, then it will not work.

/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    https://wordpress.org/themes/twentytwenty/
 Description:  Twenty Twenty Child Theme
 Author:       Extend Feature
 Author URI:   https://www.extendfeature.com/
 Template:     twentytwenty
 Version:      0.0.1
 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:  twentytwenty-child
*/

Now developer need to something change on functions.php file, it’s necessary to add parent theme styles by (parent-style) on child theme and custom stylesheet called by (child-style).

add_action('wp_enqueue_scripts', 'enqueue_parent_styles');

function enqueue_parent_styles() {
   wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
   wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/myCustomStyle.css');
}

Now developer need to something change on functions.php file, If you want to set logo without cropping logo. Login into wp-admin and go to Appearance => Customize after than click on “Site Identity” try to change logo, select a logo and press Skip Cropping button with following code.

add_action('after_setup_theme', 'extendfeature_custom_logo_setup', 11);
function extendfeature_custom_logo_setup() {
	remove_theme_support('custom-logo');
	
	$defaults = array(
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	);
	add_theme_support( 'custom-logo', $defaults );
}

Activate child theme:

Child theme is ready for active. Please go to WordPress admin and go to menu Appearance => Themes you can find new theme “Twenty Twenty Child” mouse over on new theme and click on “Active” button.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.