Create A WordPress Child Theme: The Complete Guide 2020

This post may contain affiliate links.

Create A WordPress Child Theme: The Complete Guide

What is a WordPress Child Theme?

A WordPress Child Theme is a theme that imports the parent theme. This way you are being able to override the parent theme’s look and behavior by overriding the CSS and PHP functions. Which makes it a safer and a more flexible way to change the appearance of your website.

The first thing you should is when you start working on your new website is to look for a theme that fits the project. You should look at different themes or frameworks that comes the closest to your personal needs.

WordPress is a very powerful platform, it is estimated that 30% of all websites in the world runs on WordPress. WordPress is extremely flexible with millions of plugins and themes available online, and WordPress by default is S.E.O. friendly.

WordPress Logo

In plain English, a WordPress child theme is a WordPress Theme that declares the “parent” theme which it depends on and gets most of its functionality from. By telling WordPress that it is a “child” of some other theme, a theme saves itself from having to contain all the features and functionality that a full-fledged theme does, while still offering the convenient ability to make its own CSS, or even overwrite specific page templates of the parent.

 

Picking A Great Parent Theme Is Very IMPORTANT!

WordPress Themes - WordPress.org - wordpress.org

 

What are the benefits of a WordPress Child Theme?

 

1. You want to be unique & different

When you install a WordPress Theme from WordPress Themes you are going to look the same as the hundreds or thousands of other websites that installed the same WordPress Theme as you. You always want to be unique and different from all the other websites, because you are unique! And a WordPress Child Theme gives you that ability to change all the aspects of your website from functionality to the design.

 

2. You have more control over your website

Down the line you may want to change the design. For example you want to add a menu to a different location or just change the look, or want to disable a certain feature, or you increase the size of the header of your website. With a WordPress child theme everything is possible / Nothing is impossible. It gives you total control on how your website looks.

 

3. Stay Consistent; Safe Updates

Never Ever Edit WordPress Parent Theme Files Directly!

When you edit the “Parent” WordPress Theme files it will get overwritten when you update the Theme and all your edits are undone. And we certainly don’t want that to happen when your website is online “live”, A WordPress Child theme will avoid this because you are not editing the parent theme.

You can also edit the themes locally using a LAMP (Linux Apache MYSQL PHP) as described in my other blog post How to Install and Configure LAMP Server on Ubuntu 20.04.

A WAMP article is on the way so you can do the same on Windows 10 without constantly uploading it to the web server.

 

4. Adding New Features The Parent Theme Does Not Offer

With a WordPress child theme adding different fonts, icons, different layouts, is a breeze. WordPress has great documentation on how to enqueue styles and scripts, add or alter support for certain WordPress functions.

 

5. Learning New Things About WordPress and The Themes

Working with a WordPress child theme is a great way to learn on how WordPress works in a fun way. if you don’t like the child theme you created you can go back to the regular parent theme.

 


 

Some Disadvantages Of Using A Child Theme.

1. Learning Curve.

While creating a WordPress Child Theme you have to learn some new things, like CSS, HTML, PHP. Although it isn’t really that hard, some people might find it intimidating. Some Theme creators don’t follow the WordPress standards/guidelines and some dirty hacks might be required. Although there are great tutorials, howtos and support forums for WordPress some people who are not into coding might need to look at a developer that can help them.

 

2.Parent Theme Developers Might Stop Maintaining The Theme.

Another big thing to remember is that smaller theme developers might stop supporting their theme leaving you with a outdated; unmaintained parent theme. So its increasingly important to go with the bigger developers with a longstanding reputation to avoid this problem.

 


After you found the Theme/Framework you need to create a child theme for it.

Lets Get to Business and Start Creating Your Own WordPress Child Theme!

Sounds Awesome! How do I Create a Child Theme?

First of all you need a FTP client to upload the files to the web server. In this article I use FileZilla. FileZilla is a free and open source FTP client.

Download FileZilla

Another tool that you will need is a source code editor. Notepad++ is a free open source source code editor/text editor that highlights PHP, HTML, CSS, and JavaScript code which makes it a lot easier to track mistakes.

Download Notepad++

 

1. Create The Twenty Twenty Child Theme Directory

WordPress Twenty Twenty Theme

We use the latest Twenty Twenty theme as an example for this child theme. This theme comes with the default WordPress package.
A WordPress Child Theme consists of 3 file, a directory with the parent-theme-name-child, which is the recommended way. First we have the directory with the recommended name twentytwenty-child and inside the directory we have a .CSS file that’s named style.css. The stylesheet will contain commented out text at the top telling WordPress that this is a child theme and what the parent theme is. and a .PHP file named functions.php.

Like any other WordPress theme, the files are located in the /wp-content/themes directory.

 

2. Create The Stylesheet file Named style.css

In the style.css file we add the following code. This is where we change the font type, size, colors, styles. And the effects.


Theme Name: Twenty Twenty Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Twenty theme
Author: Your name here
Author URI: http://example.com/about/
Template: twentytwenty
Version: 0.1.0

Then we upload these files with a FTP program for example FileZilla. Go to your WordPress Admin and activate the child theme named Twenty Twenty child.

 

3. Create the PHP File Named functions.php

Sometimes themes require some extra code to override the parents theme style properly. To override it add the following code to functions.php to re-enqueue the style sheets. So you don’t have to use !important all the time in your style.css. The !important slows down your blog drastically and makes it harder in the future to override it. In this file we can edit the behavior and change all the other behavioral functions and add menu’s and widgets and the location of them.



/**
* Theme functions and definitions
*
* @package Twenty Twenty Child
**/
if ( ! function_exists( 'twentytwenty_enqueue_styles' ) ) :
function twentytwenty_enqueue_styles() {
wp_enqueue_style( 'twentytwenty-style-parent', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'twentytwenty-style-child', get_stylesheet_directory_uri() . '/style.css', array( 'twentytwenty-style-parent' ), '1.0.0' );
}

endif;
add_action( ‘wp_enqueue_scripts’, ‘twentytwenty_enqueue_styles’, 99 );

 

This should solve your the problem overriding the parent style sheets (CSS files). Now you can start overriding the parent theme, and give your website the unique look that you want.

 


Customizing Your WordPress Child Theme

For some resources about learning Stylesheet code you can go to https://www.w3schools.com/ which has tutorials and howtos and references which explains what does what. Use csslint.net to check your CSS for any errors.

Change The Background Color

Add the following CSS rule to your style.css of your WordPress Child Theme. Change the color to your whatever you would like:


body {
background-color: #DEF0F5;
position: relative;
}

Change The Sidebar Color

 

You can create a pleasing display of your sidebar widgets by adding some color to the sidebar with the following CSS code. You have to add this code the style.css file of your Child Theme:
.widget {
background: #B9EBFA;
padding: 25px;
}

Changing the Font Types, Sizes & Colors

To change the font style, sizes and colors of your WordPress child theme, add the code below to the style.css file in your WordPress Child Theme directory:


p {
color: black;
font-family: Serif;
font-size: 17px;
}

With a small amount of coding, you can change your WordPress Child Theme  as much as you want, providing a wide variety of possibilities for your website design.

 


Changing the Looks of the WordPress Post and Pages

As you seen in the previous steps we override the parent theme with the CSS file and Functions file. Some guides tell you to copy every template file to the child theme. I do not recommend that, I even rather using php hooks to override the parent theme, unless you want to change it all the way. Now we are going to override the Parent Theme with template files.  It is important to keep the template files in the same directory structure. This is also the Twenty Twenty theme.

Add a Read More Button to Blog Post Excerpts.

Open the functions.php of your child theme and add the following code.

// Read More Button
function excerpt_readmore($more) {
return '<div class="ReadMore"><a href="'. get_permalink($post->ID) . '" class="readmore">' . 'Read More' . '</a></div>';
}

add_filter('excerpt_more', 'excerpt_readmore');

Add Some Styling to The Read More  Button

Add the following code to the style.css. Adjust the colors to your preference

a.readmore {
text-decoration: none;
font-size: 23px;
}
.ReadMore{
text-align: center;
border: .5px solid lightgray;
}
.ReadMore:hover{
background: yellowgreen;
color: gray;
}
.ReadMore:focus{
background: yellowgreen;
color: gray;
}

 


Changing the Functionality of your Child Theme

 

Add Default Thumbnail to Twenty Twenty Child Theme

Copy the featured-image.php from the twentytwenty/template-parts/ directory to your child theme twentytwenty-child/template-parts/

Add the following code at the very bottom of the file.

else{

    ?>
    <p style="text-align: center;">
        <a href="#">
            <img style="margin: auto;" src="<https://website-address.com/location-of-the-image/image.jpg">
        </a>

    </p>

<?php
}

Change the src="location" to the location of the file and upload it to the exact same location, and make sure it matches. Don’t forget to save the featured-image.php file and upload it to the directory where it belongs.

 

Overriding the Parent Theme Function

You can do this by adding the following function to your functions.php from your Child theme.

if ( ! function_exists( 'parent_theme_function' ) ) {
 parent_theme_function() {
// what_you_want_it_to_do
 }
}

Unhooking/Removing The Parent Function

If a function is not pluggable you can still stop it from running. All you have to do is look at the parent theme code and see where it is hooked to and with what priority. In most cases it is running with priority 20 when no priority is given.

Example of parent theme function hooked to init below.

function parent_function() {
 //contents of function here
 }

add_action( ‘init’, ‘parent_function’, 20 );

 

 

To remove “unhook” this function you can do this by adding the following code to your functions.php of your child theme.

function remove_parent_function() {
 remove_action( ‘init’, ‘parent_function’, 20 );
 }
add_action( ‘wp_head’, ‘remove_parent_function’ );

 

Add More To a Existing Parent Theme Function

If the parent theme has a called function_header_content for example. Sometimes you want to add something to an existing function, instead of rewriting it all. What you want to do is create a new function and add it to the same hook.

For example the parent hook looks like this below.

function parent_header_content() {
 // content of function here
 }
add_action( ‘parent_header’, ‘parent_header_content’ );

 

What you want to do is add the following code in your Child Theme functions.php

function child_header_extra_content() {
 // contents of function here
 }
add_action( ‘parent_header’, ‘child_header_extra_content’, 20 );

As you can see we inject the code into the parent_header function.

 


 

How To Troubleshoot a Child Theme / Parent Theme

How To Troubleshoot a Child Theme / Parent Theme

If things doesn’t seem to work as it should we have to troubleshoot the problem. We can do this by so called debugging.

  1.  Make sure your child theme is activated; You do this by going to Appearance > Themes and make sure you have activated the Child Theme.
  2. Disable the caching plugin and try to clear your browser cache. If you use CloudFlare try to clear the cache there too.
  3. Set the wp-debug to true. You can do this in the wp-config.php configuration file in your “WordPress” root directory. Open your FileZilla FTP client; go to the public_html directory “if your hosting provider installed WordPress there” right click on the file and click edit and scroll down until you see;
    /**
    * For developers: WordPress debugging mode.
    *
    * Change this to true to enable the display of notices during development.
    * It is strongly recommended that plugin and theme developers use WP_DEBUG
    * in their development environments.
    *
    * For information on other constants that can be used for debugging,
    * visit the Codex.
    *
    * @link https://codex.wordpress.org/Debugging_in_WordPress
    */
    define( 'WP_DEBUG', false ); and change false to true.
  4. Now you can start pinpointing the problem you are facing, WordPress should be able to output any warnings and errors. If you got a blank page or a function is not working it will tell you the problem. It could be a very simple mistake.
  5. You could also try to debug stylesheets in your web browser by hitting the F12 function on your keyboard. and select console and make sure you enable errors and warnings.
  6. You could also check your Child Theme CSS stylesheet with csslint.net, this will also help you code better.
  7. Install Show Current Template, this will help you find which template file is being loaded.

 

As you can see WordPress is extremely flexible and pluggable, there is always a way around things to modify the Parent Theme.

 

I hope this guide was helpful for you and this guide gets you on the right track designing your WordPress Child Theme.

Feel free to drop a comment below. And don’t forget to follow and like and share this article if you found this post helpful on facebook and Pinterest!

Have fun Coding!

COMMENTS