How to add child theme for twenty-twenty in WordPress

twenty-twenty is the default theme for WordPress. After you customize it using the “Additional CSS”, you want to customize even more, like change the structure of the HTML.

But if you change it directly, your changes might be overridden by new updates of the WordPress theme. You might also want to have a reference to your WordPress theme.

So the recommended way is to create a child theme, which is endorsed by the WordPress.

Create twentytwenty-child

Change to your wordpress directory

cd wp-content/themes

Create a directory for the child theme

sudo mkdir twentytwenty-child

Create style.css

cd twentytwenty-child

Create style.css, which is the only required file for a WordPress child theme:

sudo vim style.css

/*
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
*/

In the style.css file, Theme Name must be unique, Template is the name of the parent theme directory.

Change other fields if you want.

Create functions.php

Now for the minimum you only need to enqueue the parent theme style, style.css.

sudo vim functions.php

<?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' );
}

To have your own style.css in the child theme, you will need to replace the above with:

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

Change ownership to www-data

Now all the files belong to root. Let’s change them back to www-data.

cd ..

sudo chown -R www-data:www-data twentytwenty-child

To double-check:

ls -la twentytwenty-child

You should see the group and user as www-data.

Preview and activate your child theme!

Now you can go back to your themes page in the WordPress admin.

For more advanced usage, please go to the reference fromWordPress developer website.

---

Reference: https://developer.wordpress.org/themes/advanced-topics/child-themes/

---