A WordPress Child Theme is a subset of a theme that allows you to make changes to the theme without losing them when you upgrade. It inherits the functionality from its parent theme.
There are times when you want to change the theme’s CSS or underlying theme PHP files, for example to remove or change footer information. In these cases, if you change the actual theme files, you will lose your changes when you update the theme. To avoid losing changes, creating a child theme is recommended. Note that some themes will keep changes added to a Custom CSS block in a control panel during updates. All themes require a child theme to keep PHP changes. Some require one for CSS changes.
Recommended Protocol for Building a Child Theme
It is recommended to add a wp_enqueue_scripts action and use wp_enqueue_style to create a child theme. This requires the creation of two files:
- style.css
- functions.php
The parent theme has its own version of these two files. The files of the parent and child work in conjunction with each other. The child style.css file will override the parent file while the child functions.php file is loaded first and doesn’t override the parent file settings.
Please don’t stop if this seems complex. For most themes, it’s as easy as creating a new file and pasting in some code. Stay with me.
In the past, child themes were frequently created using the @import command to import the parent style.css into the child style.css. Because this increases page load times which can slow down the site, it is not recommended.
Video Demonstration of Creating a WordPress Child Theme
How to Create a WordPress Child Theme
For the purpose of this post, we are going to create the most basic option of a child theme and change the footer.php file.
First, Create Your Theme Directory
First create a directory, on your local computer, with your child theme’s name. Themename-child is a common standard, but is not required. For example, I’m going to show the creation of a child theme for the Elegant Themes premium theme Divi. I will name it divi-child.
Important: Use a Text Editor to Create and Edit Your Files
You will need to use a text editor, or other software meant for PHP or CSS coding not a word-processor or desktop publisher to create these files. The files must be created as basic text. WordProcessors and desktop publishers frequently add proprietary codes and formatting to the files, in which case the files will not work.
Developer tools designed specifically to create PHP and CSS will also work. The difference in these and plain text editors is that they display syntax coloring and line numbers making it easier for programmers to read the files. This is important when working with large blocks of code. For our purposes, a basic text editor will work.
If you are using a Mac, Text Edit is your default text editor and on a Windows machine, it is called Notepad. Text Wrangler is a free Mac text editor that includes the line editing and syntax coloring of a full fledged developer tool. For Windows Notepad++ offers the same functionality for free.
By default, in WordPress, the theme’s CSS is contained in a file within the theme folder called style.css. Note that some premium themes with their own control panels and/or multiple color schemes may change this. If this protocol doesn’t work for your theme, you may need to include additional stylesheets.
The child theme’s style.css overrides the main style.css. So every configuration in the parent theme’s CSS will be used unless it is configured differently in the child theme style.css. For example, you may change a hyperlink color in the child theme’s CSS file.
Note that if you are using a Custom CSS box in an theme’s control panel, you may not need to actually make changes to the style.css, but you will still need to create the initial file for the child theme.
Use Your Text Editor to Create the File named style.css
Enter the code that is displayed below between the two horizontal lines from /* to the final */ Note that you may copy and paste, if desired.
/*
Theme Name: Your theme name – in my case Divi Child
Theme URI: http://yoururl.com/yourchildname
Description:Your theme name
Author: yourname
Author URI: http://yoururl.com
Template: Divi
Version: 1.0.0
Text Domain: divi-child
*/
/* =Theme customization starts here
————————————————————– */
Screen Capture of my style.css file:
Use Your Text Editor to Create the File named functions.php
The second file you will add is the functions.php file. In the past, when using @import, the only file needed was the style.css file. To properly create a child theme using wp_enqueue, you will need to create a functions.php file within the child theme directory.
If your theme contains one main css file within the parent theme directory, the following should work.
If you want to copy the text to paste into your file, please copy everything between the horizontal lines from < to > and paste it into your own file.
<?php
/**
* Enqueues child theme stylesheet, loading first the parent theme stylesheet.
*/
function my_child_theme_scripts() {
wp_enqueue_style( ‘parent-theme-css’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_child_theme_scripts’ );
add_filter(‘widget_text’, ‘do_shortcode’);
?>
Once you have created the above two files, you have essentially created your child theme. You can copy this theme into your WordPress themes directory and activate it. Since we haven’t made any changes, you shouldn’t notice any difference.
For the purpose of the demonstration video, I changed the footer.php file of the Divi theme on the website http://podcastaday.com. Here’s how:
How to Edit Footer.php for Your Child Theme
In the Divi theme, and many other themes, in order to change the text in the footer, you must edit the footer.php file. In order to preserve these changes during theme updates, this should be done in a child theme.
Copy footer.php from your theme directory into your child theme directory on your computer. On your website, you should find your theme directory under wp-content/themes/themename. For example, wp-content/themes/divi.
Use your text editor to open the file.
Scroll down to near the bottom of the file. This will be at approximately line 35 depending on how you have your text set to wrap within your text editor.
Delete everything between the paragraph codes for the id-footer-info. This is the area highlighted in the image.
Enter the text you want to display between the two paragraph marks, then save the file.
Adding the Copyright Symbol
To add a copyright symbol, you must use the HTML code for copyright (©).
Now when the child theme is uploaded to our example website and activated, you will see the changes in the footer. See the video in this post for the full demonstration and visit http://podcastaday.com to view the actual footer.
For more information, see the WordPress Codex – https://codex.wordpress.org/Child_Themes
Associated Articles:
How to use FTP (File Transfer Protocol)
5 Reasons Why Divi is the Best WordPress Theme for Beginners
Make sure you’re on the mailing list in order to be the first to know when these Coming Soon articles go live.
