How to Create a WordPress Child Theme?

A WordPress child theme (sub-theme) is an additional theme that allows you to change / supplement features of the main theme. At the same time the main theme remains intact, so it can be updated, if there are any new ones, without losing the edits.

In simple words, child theme is a theme created on the basis of the parent one. “On the basis of” means that if the there is no requested file of the theme, it will be taken from the base: the parent theme insures the child theme. And if the reason is strictly logical, when you create the child theme, it becomes the primary and the parent theme is complementary.

Why Do You Need Child Theme?

Child themes allow the developers to update / improve their themes, and the users to update themes and at the same time not to loose all the changes. Therefore, if you use a ready  WordPress theme, the author of which did not give up development, then never make changes directly in the theme’s file, and create a child theme and change the main theme through a child theme.

What Can You Change in Child Theme?

Almost everything. However, you need to understand how everything works (see below). To change a lot of things the parent theme shall be created taking into account possible changes. If the developer of the parent theme has not analyzed  any changes, then it’s not easy to change some things. In short, the parent theme, too, there are good and bad. But often, you need to correct not much: the styles change cellar and other small items, but it can be done for almost any parent theme without too much difficulty. To cut a long story short, parent themes are divided into good and bad. Frequently there should be little changes: styles, footer and other small items, but it can be done for almost any parent theme without too much difficulty.

Create Child Theme in WordPress

It’s easy to create a sub-theme! Below is described how to create a child theme to twentytwenty.

Step #1 – Create a folder with any name in the directory: wp-content/themes/twentytwenty-child.

Step #2 – Create the file style.css in a new folder with such content:

/*
Theme Name: My child theme
Template: twentytwenty
Optional parameters:
Theme URI: https://wp-tips.com/
Description: A child theme for the theme twentytwenty
Author: WP Tips
Author URI: https://wp-tips.com/
Version: 1.0
*/
 
/* import parent theme styles */
@import url("../twentytwenty/style.css");
/* Any additional styles */
.footer{ color:grey; }

Step #3 – Go to the Appearance › Themes and activate the new theme «My child theme».

Be sure to specify the line Template: twentytwenty, (case-sensitive string), it indicates that this the sub-theme of the twentytwenty theme.
@import directive should be the first rule in the style.css. If you write a rule in front of her, it does not work and the parent theme styles are not connected. As a result, we shall get the following structure:

wp-content/
     └── themes/
        ├── twentytwenty (parent theme)
        └── twentytwenty-child (sub-theme; can have any name)
        └── style.css

Twentytwenty-child may contain other files:

  • style.css — (mandatory) completely replaces the same file of the parent theme.
  • functions.php — complements.php of the parent theme (loads before it).
  • template files — index.php, home.php and etc., which are present or not in the parent theme. If the file is in the child theme, then this file will replace the parent file. For example: having created footer.php and copied there the contents of footer.php from the parent theme, we can change the output without changing the parent theme file.
  • other files – any other files / folders / anything. For example, the sub-theme can use new images that are connected in additional CSS rules.
RELATED:  How to Edit Functions.php File?

File style.css

  • style.css – is the only required file in sub-theme. It gives WordPress Gives information to identify the child theme.
  • style.css – of the child theme completely replaces style.css of the parent theme, i.e. parent theme styles file does not load.
  • The information title, which should be at the beginning of the file, is a mandatory parameter for Template:. Due to it WP understands that it’s a child theme and realizes the name of the parent.

An example of the child theme style.css.

/*
Theme Name: My child theme
Template: twentytwenty
Theme URI: https://wp-tips.com/
Description: Child theme for the theme twentytwenty
Author: WP Tips
Author URI: https://wp-tips.com/
Version: 1.0
*/
 
// styles of the parent theme
@import url("../twentytwenty/style.css");
// additional styles
.footer { color:grey; }
  • Theme Name  —  (mandatory) name of a child theme.
  • Template — (mandatory) a case-sensitive name of the parent theme folder.
  • Theme URI — website address of a child theme.
  • Description — description of a child theme.
  • Author URI  — address of the website of the author of a child theme.
  • Author — author’s name of a child theme.
  • Version  — version of a child theme.

File function.php

Unlike other sub-theme files, the functions.php does not replace the parent file, but complements it: it is loaded directly before the parent ones and other files of a sub-theme. This means that to change the parent theme, in functions.php can be used hooks, and can be “redefined” functions, if they are designed for it.

The Use of Hooks

In the file footer.php in the theme twentytwenty there is an event twentytwenty_credits. To add your text in the footer, this event can be used. To do it, add the following code in functions.php of the child’s theme:

add_action( 'twentytwenty_credits', function() {
  echo 'Company © 2016';
} );

Function Overriding

In the file functions.php of the parent theme twentytwenty there is the function twentytwenty_fonts_url() that registers scripts of google. That’s how it looks like:

if( ! function_exists( 'twentytwenty_fonts_url' ) ){
function twentytwenty_fonts_url(){
// code of the function …
}
}

The condition if ( ! function_exists( 'twentytwenty_fonts_url' ) ){ ... } (if the function exists), allows us to define the same function in functions.php of the child theme.

In this case, only our defined function but not a function of the parent theme will work it will not be registered in PHP because of the condition. For example, by adding the following code in the functions.php of the child theme, we will disable fonts connection:

function twentytwenty_fonts_url() {
return '';
}

Note to the developers of themes: give an opportunity to redefine functions in child themes; to do it, when creating a theme, turn functions into a condition:

if( ! function_exists('theme_function') ){
function theme_function() {
// Code.
}
}

In this case, a child theme can redefine a function of a parent’s theme by simply stating it in functions.php.

RELATED:  How to Add New User in WordPress?

Template Files

  1. Adding a template that is absent in the parent theme – Create a template for a “site map” page. To do this, create a file page-sitemap.php in a sub-theme, and on the website create a page with label sitemap. Done!
  2. Change of a template that is present in the parent theme – Let us suppose that we have home.php in the parent theme and we must change it.
    • Create home.php in the sub-theme.
    • Copy the code therein from the parent theme.
    • Change the copied code as it is needed.

Localization of Sub-themes

For localization the WP will use the translation files of the parent theme. And of course, the necessary translation lines may not be there. Therefore, you need to create a translation file for the sub-theme and connect it in the sub-theme code.

For the connection there is a special function: load_child_theme_textdomain (). We use it functions.php subtopics:

function my_child_theme_setup() {
load_child_theme_textdomain( 'my_child_theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );

Also, you need to create a translation file in the child theme: languages/en_EN.mo.
Now we can use localization functions WordPress in the sub-theme:

_e( 'It needs to be translated into English.', 'my_child_theme' );

Therefore, we will have certain translation files for the child theme, and for the parent theme will be used native files.

WordPress Functions Related to Child Themes

  • get_stylesheet_directory_uri() — receives the URL of the current theme (a child theme but not the parent one).
  • get_template_directory_uri() — receives the URL of the current theme (a parent theme but not the child one).
  • get_stylesheet_directory() — receives the path to the current theme (a child theme but not the parent one).
  • get_template_directory() — receives the path to the current theme (a parent theme but not the child one).
  • get_stylesheet() — receives the name of the current theme directory (a child theme but not the parent one).
  • get_template() — receives the name of the current theme directory (a parent theme but not the child one).

I.e., if you want to get a reference to the theme file, but the child theme is used, then url of: get_stylesheet_directory_uri () and get_template_directory_uri () will be different: the first will be for the child theme, and the second for the parent theme.

Article last updated on November 22, 2020

Leave a Comment