WordPress Child Theme Template

by Vincy. Last modified on May 27th, 2021.

A child theme inherits the styles and functionality of an another existing theme which becomes the parent theme. Child themes are the best way to modify an existing theme.

In this WordPress tutorial lets us learn about creating a child theme template with an example.

Why should we use a WordPress Child Theme?

Following are the reasons to use a WordPress Child Theme:

  • The main theme (parent) is bought from a third-party and you want to make changes to it. Changes should be done in child theme because when you get an update for the main theme, your changes will get overwritten.
  • You are introducing a new feature or style to your theme in an experimental mode.
  • The main theme was not written by you and you wish to make changes to it. It is safe to bundle all those changes as a Child Theme.
  • The theme is modified frequently.
  • Different people modify the same theme.

How to Create a WordPress Child Theme?

  1. Create a theme folder. It is recommended to suffix the directory name with “-child”. For example, if the parent theme name is ‘foobar’, it is recommended to create the folder name as “foobar-child”.
  2. Create style.css in this folder. It should have a standard header comment as given below.
  3. Create functions.php

That’s it! you are ready with your minimal WordPress Child theme. Child theme should be put under theme directory and activated as usual.

WordPress Child Theme style.css Template

Child theme’s style.css should start with a standard comment. You can use the following as a template.

/*
 Theme Name:   Foo Bar Child
 Theme URI:    http://example.com/foo-bar-child/
 Description:  Foo Bar WordPress Child Theme
 Author:       Vincy
 Author URI:   https://phppot.com
 Template:     foobar
 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, two-columns, right-sidebar, responsive-layout
 Text Domain:  foo-bar-child
*/
  • Template is the directory name of the parent theme.

WordPress Child Theme functions.php Template

Create a file named functions.php in the child theme folder and add the following script to it. This is to enqueue the parent theme’s stylesheet.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Above template, the script assumes that your parent theme has one stylesheet name style.css if you have more change this script accordingly.

How does Child Theme work?

  • functions.php from Child Theme is loaded in addition to the parent theme’s functions.php. Order of loading is, child theme’s functions.php is loaded first and then parent theme’s functions.php is loaded next.
  • Unlike functions.php, all other parent theme files are overridden. Create a file in Child Theme folder with the same name as in parent theme folder. When child Theme is used, file with the same name will override it. The example you can override the header in Child Theme.
  • Not only overriding, a new file can be created in Child Theme. This can be used to introduce a new feature in the Child Theme.

Download WordPress Child Theme Template

Download

Popular Articles

↑ Back to Top