Tag: wordpress theme

Video for who doesn’t like to read ;). And if you like the video then subscribe my channel and share this with others who has the same issue.

Step – 1:

Select any theme ( For ex. 2020 ). This will be called a parent theme.

Step – 2:

Create folder for child-theme at ​”wp-content/themes/parent_theme_folder_name-child“

The folder name should be as per parent theme.

For ex. if parent theme folder name is twentytwenty, then child theme folder name should be twentytwenty-child.

Step – 3:

Create a stylesheet file(CSS) and give it a name style.css. After that open parent theme’s style.css and copy some lines from that parent theme’s style.css. Those lines will look like as bellow:

/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 1.4
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Parent theme description.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
*/

Step – 4 ( Important Step ):

Add copied lines from step-3 into child theme’s style.css and add one more line as below into that. This step is the most important step.

Template:     twentytwenty

We added twentytwenty, because in our case parent theme is twentytwenty, which is the folder name of the parent theme. Our final code in style.css will be like as below

/*
Theme Name: Twenty Twenty Child
Text Domain: twentytwentychild
Version: 1.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Twenty Twenty Child theme description.
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
Template: twentytwenty
*/

After doing this, your child theme will start displaying in theme’s page in backend.

Step – 5:

Create a new file and give the name functions.php and add the following code into it:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

    $parenthandle = 'twentytwenty-style';
    $theme = wp_get_theme();

    // Include parent theme's style.
    wp_enqueue_style(
        $parenthandle, get_template_directory_uri() . '/style.css',
        array(),
        $theme->parent()->get('Version')
    );

    // Add child-theme's style.
    wp_enqueue_style( 'twentytwenty-child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}