WordPress Guide : Child themes – Part 1 The Basics

Part 1 – The Basics

A brief guide on how to create a child theme in WordPress, in this guide I will be making a child theme for the Storefront WordPress theme.

Why use a child theme?

Lets say you have found a theme that you really like, but there are a few tweaks to the layout or colours which you want to modify but cant via the customizer only by editing the theme files themselves. If you modify the themes files, then the theme is updated by the author down the line you could lose the changes that you have made.

Using a child theme inherits the functionality and styling of the parent theme, but allows the child theme to override these with there own files.

  • Allows editing the theme without the possibility of the changes being overwritten due to a future theme update
  • Allows for a better understanding on how to create themes for WordPress.

Create a new directory

Within the themes folder wp-content/themes/ create a new folder in the following format ‘parent name – child name’ in this example since I am creating a child theme based on the storefront theme I have created a folder named ‘storefront-sweets

Starting off

Within the newly created folder, create the following files

  • functions.php
  • style.css
  • screenshot.png (recommend size: 880x660px)

Functions file

Open the functions.php file and copy the following, changing the sweets reference to your own:-

/**
* storefront child theme functions.php file.
*
* @package storefront-sweets
*/

// Load parent theme css
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() 
{
  wp_enqueue_style( 'parent-style',  get_template_directory_uri().'/style.css' );
}

/* Add any custom PHP below this line of text */

?>

Style file

Open the style.css file and insert the following, changing the sweets/website reference to your own:-

/*
Theme Name: Storefront - Sweets
Theme URI: http://www.chriscrewdson.co.uk/
Author: Chris Crewdson
Author URI: http://www.chriscrewdson.co.uk/
Template: storefront
Description: Child theme of Storefront, named 'Sweets'
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready
Text Domain: storefront-sweets
*/

Screenshot

The screenshot.png image is used on the theme page to show what your theme is, for now you can just create a solid coloured image and change this later on.

Upload Directory

Upload your child theme to your WordPress theme folder, login to your administration area and under Appearance > Theme your child theme should appear, you can select this theme and view it. Your website should look like the default storefront theme. This will also give your the same customizer options as the storefront theme allows.

These are the basic steps needed to create a child theme, now on to making changes to the child theme.