One of the basic elements of WordPress best practices is to use a Child Theme. This allows you to make customizations to your theme without worrying about losing those changes when the theme author releases an update. It’s simple to set up and should be a standard practice when setting up a new site.
This example will create a child theme of the WordPress default theme Twenty Seventeen. The purpose of this exercise is to help you get a custom child theme so you can store custom functions for customizing WP-Members. It is not intended to be a complete process of developing child themes and custom template files. There are plenty of those resources available on the Internet, starting with the WordPress Codex.
What exactly is a child theme?
You might be asking yourself, “What exactly is a child theme?” A child theme is nothing more than a subset of the theme that is set as the parent.
All WordPress themes have a list of required minimum files. Depending upon your theme, you may have many more files including various templates. Some of these files may be:
- style.css
- index.php
- functions.php
- header.php
- footer.php
While there may be others (in some cases, many others), every theme will have these files.
The way a child theme works is to load any custom files in the child in place of those in the parent. For any files that a child theme does not have, the parent will be loaded.
The exception to this is the functions.php file. The child theme functions.php will load as will the parent.
The only required files to create a child theme are:
- style.css
- functions.php
Creating your first child theme
To create a simple child theme for the purpose of keeping your custom functions all you need are the two previously mentioned files. As I mentioned earlier, there are many other possible customizations – custom templates, custom loops, sidebars, pages, etc; but the purpose of this exercise is to help those that might not know how to create a child theme set one up in order to store their WP-Members custom functions outside the parent theme.
Prepare a directory for your child theme
Your child theme files will need their own directory. This will be a directory in your themes directory, just like any other theme.
In your /wp-content/themes/ directory, create a new directory. This example will use /my-first-child/.
Note: the child theme gets its own directory within the /themes/ directory – it should not be inside the directory of the parent.
Create the child theme stylesheet
The first required file for the child theme is the stylesheet. This file is what tells WordPress about the theme itself (the child theme is the theme). It also identifies to WordPress that this theme has a parent and what that parent theme is.
Every theme, including child themes, as a header in the stylesheet. A child theme header looks like this:
/*
Theme Name: My First Child
Theme URI: http://example.com/my-first-child/
Description: My First Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyseventeen
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: my-first-child
*/
/* Although not required, you can add custom style elements for your child theme beginning here */Save this file as “style.css” in your new child theme folder.
This header has a lot of information that WP needs. The one critical element in this one for the child is the “Template” specification. This tells WP what the parent is.
The child theme stylesheet only requires this header information. If you want to customize CSS styles, you certainly can save them in this file, but it is by no means required.
The “Template” should be the tag of the parent theme. In this example, the parent is Twenty Seventeen, the tag of which is “twentyseventeen”. Use whatever is relevant to the theme you’re making a child of.
NOTE: if you were to change the template name after activating the child to declare a different parent, you will need to deactivate the theme, then reactivate it. This is because WordPress stores the parent theme information once activated rather than loading it directly from the child every time.
Create the custom functions file
The custom functions file is also required for a child theme. It didn’t used to be that way, but now it is considered the best practice for loading the parent styles rather than using @import in the stylesheet.
The custom functions file really only needs two things. It needs to open with an opening php delimiter (<?php) and it needs to apply the wp_enqueue_scripts action to load the parent stylesheet. That’s really it.
<?php
/**
* This is a custom functions file for My First Child.
*
* Creating a child theme requires only the style.css
* and funtions.php file. The functions.php is used to
* load the parent stylesheet and for storing any custom
* functions you would like to keep separate from the
* parent theme.
*
* This file does not end with a closing php delimiter.
* They are not required for execution and leaving it
* out makes it easier for new users to get comfortable
* working with funtions.php.
*
* You can just add custom code snippets and functions
* as need to the end of the file.
*/
/**
* This is required to load the parent theme. Do not
* take it out. You may add any custom scripts following
* this function (or before, provided that you don't
* remove it.
*/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
$parent_style = get_template_directory_uri() . '/style.css';
wp_enqueue_style( 'parent-style', $parent_style );
}
/** CUSTOM FUNCTIONS CAN BE ADDED BELOW THIS LINE **/Save this file as “functions.php” in your child theme folder.
Conclusion
That’s it!
You’ve created a basic simple child theme that you can now use for storing your custom functions outside of your parent theme.