Categories
WordPress

Create Child Theme

If you need to modify the theme files, it is always recommended to create a child-theme. Because when a theme gets updates, the modified files will be overridden by the new version of files and you’ve to redo the changes previously made. A child theme can modify the layout, styling, and functionality of the parent theme by overriding its files.

In this tutorial we’ll create a child-theme based on the Twenty Twenty theme and remove “Powered by WordPress” text in the child theme by editing footer.php file. To create Twenty Twenty Child theme, follow these steps:

  1. Create a folder (directory) twentytwenty-child in your computer and create following files in it:
  2. style.css
  3. functions.php
  4. footer.php (and/or any other theme file which you want to customize, for example: header.php)

style.css

Open any code or text editor (such as Notepad for the PC or TextEdit for the Mac) and save the file as style.css in twentytwenty-child folder. You must add the following CSS comments to indicate the theme name, child-theme version (for example 1.0.0 or 1.2.1), and its parent template name (usually the directory name of parent theme):

/*
Theme Name: Twenty Twenty Child
Version: 1.0.0
Template: twentytwenty
*/

After adding the required comments, you can add your own styles to customize the theme (or override the existing styles inherited from the parent theme). For example, to change the color of main heading, use following code in style.css file after adding the required comment code:

/*
Theme Name: Twenty Twenty Child
Version: 1.0.0
Template: twentytwenty
*/
h1 {color:red}

Child theme css not working

You must include the version number inside the comment section css file to make child-theme work properly. For example, the following css file will not work as it is missing the version number:

/*
Theme Name: Twenty Twenty Child
Template: twentytwenty
*/
h1 {color:red}

functions.php

Open any code or text editor (such as Notepad for the PC or TextEdit for the Mac) and save the file as functions.php in twentytwenty-child folder. When you create a child theme, by default it does not loads the parent style sheet (style.css). To load the parent style sheet in a Twenty Twenty child theme, use following code:

<?php

add_filter('wp_enqueue_scripts', 'enqueue_style_css' );

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

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

 wp_enqueue_style(
  'child-style',
  get_stylesheet_uri(),
  array( $parenthandle ),
  $theme->get('Version')
 );

}

Remove “Powered by WordPress” – footer.php

1. From the WordPress Dashboard, click Appearance > Theme Editor > Theme Footer (footer.php) and copy all the content.

Theme footer file
Theme Footer (footer.php)

2. Open any code or text editor (such as Notepad for the PC or TextEdit for the Mac), paste the copied text and save the file as footer.php in twentytweny-child folder.

3. To remove Powered By WordPress, delete the following lines from the new footer.php created in child theme folder:

<p class="powered-by-wordpress">
 <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
  <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
 </a>
</p><!-- .powered-by-wordpress -->

Save the file.

Installing Twenty Twenty Child Theme

  1. From your computer, compress the twentytwenty-child folder
  2. From WordPress Dashboard, select Appearance > Themes and click Add New.
  3. Next, click Upload Theme > Choose File, select the twentytwenty-child.zip file, and click Install Now button.
  4. After successful installation, activate the theme.