How to Setup a Child Theme for your WordPress Blog

Sharing is caring!

Disclosure: Please note that this article may contain affiliate links. You can read my full disclosure here.
    Need help with the Tech-side of blogging? Join my Facebook Group and get some answers.
~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~

What is a Child Theme in WordPress?

A Child Theme is an extension of your parent theme that allows you to customize and modify your theme, so that when the Parent Theme is updated, your Child Theme modifications remain in place.

Who would use a Child Theme?

Anyone who would want to make customizations or modifications to their theme files – do you want to add the Google Analytics code to the header and not lose it each time the theme updates? That is just one really small reason to add a Child Theme.

Another example would be from our other blog, we wanted to set the blog title to “h2” and our blog post’s titles to “h1” for SEO, so we needed to modify the header and single post templates of our theme to accomplish this and using the Child Theme allows us to maintain those changes, when our theme updates.

Mainly you can make the modifications to your theme without adding extra plugins to make each of the modifications for you. What’s more, additional plugins may slow down your site or conflict with one another and cause problems, so it is recommended to only use the plugins that you really need.

As a side note, let me know in the comments how easy or difficult you find this tutorial and if it was useful to you. Include Any steps you needed to modify as it may help other readers.

How do you setup a Child Theme?

Option 1: using a plugin

Pros:
This method is easy to do.
You can disable the plugin after the Child Theme is created, so it will not affect site load time.

Cons:
You may need to temporarily disable some plugins for the Child Theme Configurator to work.

I have used the plugin Child Theme Configurator to create Child Themes on most of my sites.

Child Theme Configurator is feature rich, and yet easy enough for the beginner to use.
They provide a fair amount of “how to” information on using their plugin.
You can use this method at any point before or after starting your blog to add the child theme, but it is best when you are first setting up your website/theme.

Note:
Always backup your website before you make new changes to your website
If you don’t already have a backup method, check out the free plugin Updraft Plus
Make sure to live preview your Child Theme before activating.

I have had only 1 Child Theme not work out of the several that I have generated through the Child Theme Configurator plugin.

So let’s get started.

  1. Login to WordPress
  2. Go to your Plugins menu and click to add a new Plugin.
  3. Search for “Child Theme Configurator” to install and activate.
  4. Screenshot of the Add Plugins - Child Theme Configurator

  5. In my case, I had to temporarily disable a couple plugins for Child Theme Configurator to work
  6. – My image lazy loader
    Screenshot of error from lazy loader

    – My minify plugin
    Screenshot of error from minify

    If you do run into errors when you analyze your theme, and want assistance you can check out my services and schedule a time for me to assist you.

  7. Go to Tools on the menu and select “Child Theme”
  8. Select your “new” Child Theme, and select your theme from the drop down box.
  9. Screenshot of CTC Settings 1-3

  10. Analyze the Parent Theme:
  11. Screenshot of Child Theme Configurator Parts 2-4

  12. Most settings are fine at their defaults for most themes.
  13. Screenshot of Child Theme Configurator Parts 5-6a

  14. For the first time generating the Child Theme, Checkmark to copy over the menus, widgets and other items from the Parent Theme to the Child Theme.
  15. Screenshot of Child Theme Configurator Parts 6b-9

  16. Click to configure the Child Theme.

 

 

Option 2: Build the Child Theme Manually

Pros:
This is more of a learning experience, of the WordPress file structure and a little bit of how it works.
No need to disable any currently installed plugins

Cons:
Much more difficult
You may break your website if you are not careful

**Make sure to take a backup of your website before you start** Instructions to backup with UpdraftPlus

First, you will need to login to your cPanel or FTP site on your host. You may also be able to do this from the WordPress file editor, however, on our sites this is disabled by our security settings.

The instructions contain examples from the Bluehost cPanel.
  1. Login to your Bluehost account
  2. Click Advanced
  3. Select the File Manager
  4. Screenshot of finding the Bluehost cpanel File Manager
  5. Navigate to your wordpress install theme folder
  6. This is the location of the default install folder, yours may be slightly different. "public_html/wp-content/themes/" screenshot of public html Screenshot of the Wordpress Themes Folder
  7. Create a new folder and name it “theme”-child
  8. For this example it is twentynineteen-child

    – Click the “Folder +” menu item
    Screenshot of the button to create a new folder

    Screenshot of creating the child theme folder

  9. Create the following files in your folder
  10. – style.css
    – functions.php

    Click the “+File” menu item, then name your file.

    Screenshot of the button to create a file in Bluehost cPanel

    Screenshot of creating the empty style.css file

    Screenshot of creating the empty functions.php file

  11. Copy the theme Screenshot.png file into the Child Theme folder
  12. – Navigate to the Parent Theme folder
    – Right click on screenshot.png and click copy

    Before:
    Screenshot of copying the theme screenshot file over to the child theme folder

    – Add “-child” to the theme name, click “copy files”

    After:
    after copy screenshot text

    So you will now have these 3 files in your Child Theme folder:
    Screenshot of basic Child Theme structure

  13. Edit the style.css file
  14. – right-click and select “edit” this is the code for the Twenty NineTeen Child Theme style.css file.
    Modify to suit your theme.


    /*
    Theme Name: Twenty Nineteen Child
    Theme URI: https://github.com/WordPress/twentynineteen
    Template: twentynineteen
    Author: the WordPress team
    Author URI: https://wordpress.org/
    Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
    Requires at least: WordPress 4.9.6
    Version: 1.2
    Updated: 2019-01-25 21:14:29
    */

    Make sure to save your changes to the file.
    Screenshot of the Save Button

  15. Edit the functions.php file

Here is sample code for the Child Theme Functions.php. If you are going to modify the Functions.php file, enter your custom code under this part.


<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

//Enqueue Child Theme Style
add_action( 'wp_enqueue_scripts', 'enqueue_parent_css', 10 );
function enqueue_parent_css() {
wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css', array( ) );
}

//End of Child Theme Style

Again, make sure to save your changes.

Test your Child Theme

No matter which option you chose to create your Child Theme, you will want to test and confirm that it appears as you like before activating it.

Login to your WordPress

Go to Appearance, click on the “customize” menu item

Screenshot of the appearance > customize menu

Once the Customizer loads, click the button by the theme name to change themes.

Screenshot of the change your theme button

Select your Child Theme

Twenty Nineteen Theme Tiles

Confirm it looks exactly like or very similar to the parent theme as we have not made any changes yet. If so, you can activate & publish the Child Theme.

Twenty NineTeen Parent Theme
Screenshot of the 2019 Theme Preview

Twenty NineTeen Child Theme

Screenshot of the Twenty Nineteen Child Theme live preview

If the Child Theme does not look like the Parent Theme and does not look appealing to you, exit the previewer. Do not publish and activate. From this point, if you used the Child Theme Configurator I would seek their support, or as mentioned previously you can check out my services to schedule a time for me to assist you.

REMEMBER if you change themes at some point, any changes made to your theme (or Child Theme) now, will need to be re-applied to the new theme (or new Child Theme), like if you add the Google Analytics code to your header file.

If you would like to see a post on adding the Google Analytics code to the header file of your Child Theme, see this post: Add Google Analytics Code to your Child Theme Header

Got blogging questions? Join my Facebook group here WP Blogger Assist Questions Advanced WordPress user with coding knowledge? Advanced Coding on WordPress

Tara, WP Blogger Assist

I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

Leave a Reply

Your email address will not be published. Required fields are marked *