Categories
WordPress

Building WordPress child theme

Last updated on July 20th, 2020 at 06:25 pm AEST (+10:00)

This short article is to document a crash course on building a WordPress child theme, based on the TwentyTwenty theme.

Building a child theme is quite straightforward it seems. There’s quite a few good tutorials out there that can help you up to speed. This is my attempt so far:

  1. Create the folder twentytwenty-child under wp-content/themes
  2. Create the file functions.php under twentytwenty-child
<?php

function childtheme_parent_styles() {
	$parent_handle = 'parent'; // This is 'twentytwenty-style' 
	
    // enqueue style
 	wp_enqueue_style(
		$parent_handle, 
		get_template_directory_uri().'/style.css'
	); 	
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles' );

// Remove 'twentytwenty-style-inline-css'
add_action( 'wp_enqueue_scripts', function() {
	$styles = wp_styles();
	$styles->add_data( 'twentytwenty-style', 'after', array() );
}, 20 );
  1. Create the file style.css under twentytwenty-child and insert your own style
/*
Theme Name: Twenty Twenty
Template: twentytwenty
Text Domain: twentytwentychild
Version: 1.0.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Child theme of Twenty Twenty
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: Huy Vu
Author URI: https://iamhuy.id.au/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
*/
..... 
.....
.....
  1. Activate the theme under Appearance > Themes

Note:

  • You need to update the Version number (in style.css) to serve a new copy of the child theme’s CSS when there’s a change.
  • I prefer not to use inline style as it can interfere and overwrite my changes. The snippet of code was added to functions.php to remove it.

Reference: