How to create and customise a WordPress Child theme?

WordPress.org has a vast library of themes for blogs, ecommerce and brochure websites. They are a great solution to help speed up development time and to enable non technical users to create websites. It maybe necessary to make modifications to a theme to match your branding. This is where you need a child theme.

Category: WordPress | Read time: 10 minutes

Read more

What is a WordPress Child theme?

The definition of a child theme is that inherits the functionality and styling of another theme. This theme is called the parent theme.

If you want to change the look and feel or any functionality of a parent theme it is essential you create a child theme before any modifications are made.

What is required to create a WordPress child theme?

To create a child theme it is important to have the following. These are as follows:

  1. FTP credentials – Provides access to WordPress theme files and directories.
  2. Code Editor (Notepad will suffice) – To allow you to add the necessary content to make the child theme work

How to create your WordPress child theme?

  1. To create your child theme you first need to connect to the hosting server where your WordPress files and directories are hosted. I use FileZilla.
  2. Once connected, navigate to the folder where your WordPress installation is hosted. Everything outside of the four directories are the Core WordPress files.
  3. Open wp-content.
  4. Select the Themes folder
  5. You will see the parent theme will be located here. To create the child theme you now need to create a blank folder. Name the folder with the parent theme name followed by a hyphen and add child. This is common practice for Child theme creations. Eg. Parent Theme is called TwentyEighteen then you child theme should look like this: twentyeighteen-child
  6. Now in your code editor of choice eg. Notepad, Notepad ++, Code etc. You need to create two files. These are:
    1. functions.php
    2. style.css
  7. In style.css however you will need to add the following to the top of your file
/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 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, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/
  • Theme Name: Change the name of theme to the parent theme and append child on the end.
  • Theme URI: I don’t use this line. If you were to sell your own theme I would advise adding a URI
  • Description: I usually add the theme name here and add ‘theme‘ to the end. You can add further details here if you wish. I like to keep it simple.
  • License – Add any appropriate licence information you have.
  • Tags – These are good if you want to sell your own theme. These work with the search and filters in the theme directory.

8. Inside your functions.php file you need to add the following:

<?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' );

}
?>

The following method will only work if the parent theme only has one main style-sheet. If it has multiple this requires further dependencies for the child theme to work probably.

9. Now you can upload your two files inside your child theme folder. Once uploaded. Login to your WordPress dashboard.

10. You now are in the position to activate your child theme. Under Appearance >  Themes you will now see your child theme is sitting alongside your parent theme that is currently activated.

11. Press activate on your child theme

12. Once activated, visit your website again and you should at this point there are no differences.

13. To see if the child theme has been a success go to Appearance > Editor > style.css. Inside here add the following:

p{color:#F30;} 

14. When you visit your website you should see that any p tags (paragraph tags) are now being displayed in red. This means your child theme is working.

What are the advantages of a child theme?

Now your WordPress child theme is active on the website  you are now able to make the necessary modifications.

The advantages of an active child theme are as follows:

  • Parent theme can be updated without worry of losing previous modifications
  • If you don’t like your modifications you can simply deactivate the child theme
  • Speeds up development time as you can modify another persons theme to suit your own visions
  • Gives you insight on how WordPress works

If you have any further questions about child themes or would like some support, visit my contact page and submit an enquiry, I would love to help.