WordPress Child Theme Template
by Vincy. Last modified on July 12th, 2022.
A child theme inherits the styles and functionality of another existing theme which becomes the parent theme. Child themes are the best way to modify an existing theme.
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?
- 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”.
- Create style.css in this folder. It should have a standard header comment as given below.
- 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
*/
Templateis 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.phpfrom Child Theme is loaded in addition to the parent theme’s functions.php. The order of loading is, child theme’s functions.php is loaded first, and then the 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 the 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, but a new file can also be created in Child Theme. This can be used to introduce a new feature in the Child Theme.
Download WordPress Child Theme Template
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.