How to Create a WordPress Child Theme

If you are going to be making lot’s of customization on your blog and you don’t want to lose the customization when you upgrade your WordPress theme, then you should get a child theme.

A WordPress child theme is a WordPress theme that inherits its functionality from another WordPress theme. That is the parent theme.

A Parent theme is a theme that includes all of the required WordPress template files and assets for the theme to work.

In this tutorial, I am going to teach you how to create a WordPress Child theme from your parent theme.

Let’s get started.

How to Create a WordPress Child Theme

how to create a WordPress Child Theme

To create the WordPress child theme, basically, you will need 3 files. They are:

  • Style.css (Stylesheets) – Where all your CSS customization goes to and the most important file needed to create a child theme. The style.css overrides the parent style.css.
  • Functions.php – Where you can add custom functionality to the parent theme and site. And it does not override its counterpart from the parent, unlike the stylesheets.
  • Screenshots.png – The image that shows when you view your theme from the admin area.

In other to create a child theme from the parent theme, you will need to access your website hosting cPanel files manager or FTP where you will need to first create a new folder in your themes directory, located at

wp-content/themes
Using Your Hosting cPanel to Create the Folder

1)  Go to your file manager

file manager

2) On the file manager page, locate your website files and go to:

wp-content/themes

3) On the themes directory, click on Folder to begin creating the child theme.

wpcontent-themes

4) The folder needs a name, It’s best practice to give a child theme the same name as the parent but with a “-child” appended to the end.

In the example screenshot below, I am creating a child theme from the twentynineteen WordPress theme, so the name I will use is

twentynineteen-child

child theme

5) Once you have entered a name for the child theme folder, click Create New Folder and the child theme folder will be created.

child theme created

Now the child theme folder is created. Lets now create the stylesheets, and functions.php into the child theme folder, then lastly we upload the screenshot.png image file.

Create a stylesheet: style.css File

The stylesheet is where all your CSS goes which controls the look of your theme and it must contain a similar header comment at the very top of the file.

For example, below will be the header comment I will use for the Twenty Nineteen Child Theme.

/*
Theme Name: Twenty Nineteen Child
Theme URI: https://wordpress.org/themes/twentynineteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Nineteen Child Theme
Template: twentynineteen
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: twentynineteen
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/

From the above information, It tells WordPress the basic info about the theme and the fact that it is a child theme of a particular parent theme.

The two most important information required in the header comment of the stylesheet is:

  • Theme Name: If your parent theme name is Twenty Nineteen, it is best practices to have the child theme named: Twenty Nineteen Child
  • Template: This should be the name of the parent theme. You are telling WordPress this is a child theme of the parent.

Add other information when necessary.

With the stylesheets header comment information ready, lets now create a new file named style.css into our child theme directory.

Creating the style.css File

1) Still, on the file manager, go to:

wp-content/themes/child theme folder

2) The child theme folder will be empty. You will need to add your first file into it. And that will be the style.css file. To do so, click on “File”.

child theme empty, How to Create a WordPress Child Theme

3) Enter “style.css” in the new file name and click Create New File.

stylecss, How to Create a WordPress Child Theme

4) After the style.css file has been created, you will need to right click on the file and click the Edit.

stylecss-edit, How to Create a WordPress Child Theme

5) Details of the file you are about to edit will be presented to you. Click the Edit.

style css edit popup, How to Create a WordPress Child Theme

6) On the style.css edit screen which will empty, enter your header comment and click Save Changes.

edit style css, How to Create a WordPress Child Theme

edit style css save changes, How to Create a WordPress Child Theme

7) You can now exit the screen after saving changes.

Creating the functions.php File

Next, you will need to create a functions.php in your child theme directory. Follow the same steps for creating the style.css to create the functions.php

functions

Once created, the same way I edited the style.css, you need to now edit the functions.php.

The first line of your child theme’s functions.php should be an opening PHP tag

<?php

On the edit screen, you will need to link the parent & child theme stylesheets in your child theme’s functions.php using the enqueue method.

The enqueue method is a “new way” to include parent stylesheets in Child Themes.

The “old way” uses the @import way of adding parent styles. But this time around in the child theme style.css. For example:

/*
Theme Name: Example Child Theme
Template: parenttheme
*/

/* import default parent styles */
@import url("../parenttheme/style.css");

/* add child theme styles below */

Although the old way still works, developers discovered performance issues and other downsides of using @import.

Enqueue parent styles in child theme

To enqueue the parent styles in your child theme, you can add the following code to your child theme’s functions.php file:

<?php

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

}
?>

Use the above code if only your Parent Theme uses only one main style.css to hold all of the CSS.

But if you plan to use child theme style.css, and other CSS files to make CSS changes, you will have to Enqueue parent and child stylesheets into the child theme functions.php

Enqueue parent and child stylesheets (Recommended)

You can add this code to your child theme’s functions.php file:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

$parent_style = 'parent-style'; // This is 'twentynineteen-style' for the Twenty Nineteen theme.

// enqueue parent styles

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

// enqueue child styles
 wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),

// version

wp_get_theme()->get('Version')
);
}
?>

From the above code, the code: array(‘parent-theme’), tells WordPress that the child styles are dependent on the parent styles. Meaning that WordPress will load the parent styles first which is recommended.

Note: The “parent-style” is the same $handle used in the parent theme when it registers its stylesheet.

To know the “name” to use to replace “parent-style” you have to check your parent theme functions.php

wp-content/themes/twentynineteen/functions.php

Locate the Enqueue section of the functions.php code. The below code screenshot show the name I will use to replace “parent-style” is twentynineteen-style.

enqueue styles

The code to enqueue parent and child stylesheets on my twentynineteen child theme functions.php will look like:

my enqueue style

Don’t forget to save changes after you have enqueued the parent and child stylesheets to the child theme functions.php.

Adding a screenshot for a WordPress child theme

A screenshot is an image that shows on your WordPress theme from the admin area.  Also, the screenshot image shows when an online tool is used to find out what theme a website is using.

According to the WordPress Codex for theme development, the recommended theme screenshot size should be 1200px wide and 900px tall and be in PNG Format.

theme screenshot, How to Create a WordPress Child Theme
This is my theme section in my WordPress admin.

You notice the above image has a screenshot for the Twenty Nineteen (Parent Theme) but no screenshot yet for the Twenty Nineteen Child (Child Theme)

To add a screenshot to your child theme, all you need to do is download a copy of the parent theme screenshot (if you don’t have one yet) which will be uploaded to the child theme.

Downloading the parent theme screenshot from cPanel file manager

The parent theme screenshot.png of your WordPress website is found in:

wp-content/themes/twentynineteen

All you need to do is right-click on the screenshot.png file and download it to your computer.

screenshot-download

Once you have the screenshot saved somewhere in your computer, next we need to upload it to your child theme directory.

To upload, go to your child theme directory:

wp-content/themes/twentynineteen-child

Next, click on Upload

file manager upload

You will be taking to the upload page where you need to select the screenshot.png file from your computer and wait for the upload to complete.

file upload success

After you have uploaded the screenshot.png file you can now view your child theme directory to see the files you have there. And if you followed my tutorials, you should have on the child theme directory a stylesheet.css, fuctions.php & screenshot.png.

child theme files

That’s it you can now create a WordPress Child Theme.

Note: If you want you can create your child theme from your computer using a notepad such as notepad++ and when you are done, can upload it to the theme directory at wp-content/themes/

Activating The Child Theme

The child theme is now ready for activation. Log in to your site’s admin, and go to  Appearance > Themes. 

You will see your child theme, click on activate to start using the child theme.

child theme activate, How to Create a WordPress Child Theme

Adding Template Files to the Child Theme

If you want to make changes to a template file on the parent theme, for example, making changes to a header.php, all you would have to do is make a copy of the file to your child theme folder and customize it there.

You should make sure the same file path of the header.php in the parent theme is similar to the file path of the header.php of the child theme.

Note: Other than the functions.php file, any file you add to your child theme will overwrite the same file in the parent theme.

If you like this article on how to create a WordPress Child Theme, you can subscribe to this blog via email, so you will get updates when there are new posts.

 

DON'T MISS OUT!
what is wordpress
Invalid email address
Give it a try. You can unsubscribe at any time.

Wp: Learn how to is a blog that teaches WordPress from beginner to advance.

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.