WordPress Child Themes

This article is about creating a WordPress Child Theme. All of the steps to achieve this are in bold type. Everything else is just for information, examples, etc.

The reason this article was created was because it seemed very difficult to find simple (IE, non-"long winded") information about creating a Child Theme for WordPress website. This article is oriented towards people that are familiar and comfortable with WordPress (themes, etc.), programming, etc. It is not intended to be a granular, detailed step by step tutorial.

Special FYI

Depending on the Parent Theme, if you've already made custom changes to the theme, they may have to be re-done when creating the child theme.

Creating & Enabling a Child Theme

• Create a directory in the website's ./wp-content/themes directory (It can be any name, although...);
  • Suggestion (not a requirement): Name the Child Theme directory in such a manner that it is obviously connected to a Parent Theme directory.
    • Example: Parent Theme is "twentyfourteen", Child Theme: twentyfourteen.child
    • Or, if you want to make all of your child themes easy to find, prepend a letter like X or Z to the name: x.twentyfourteen.child
    • Note: Remember Linux is case sensitive, so a directory named "twentyfourteen" is not the same as "TwentyFourteen". Also keep in mind that may not apply for a WAMP stack (look it up) on Windows as that wasn't tested.
• Create a file in the Child Theme Directory named style.css and add the minimum code shown below (an expanded version is in the Example Section);

  /*
  Theme Name: Any Name You Want (This is the name displayed in the WordPress GUI.  Spaces can be used)
  Template: WhatEverNameOfParentThemeDirectory (Example: twentyfourteen) (NOTE: The name of the Template is not how it appears in the WordPress GUI, but rather the actual directory name)
  Text Domain: WhatEverNameOfChildTheme (Example: twentyfourteen) (NOTE: WordPress recommends keeping this the same as the Parent Theme)
  */

  • Information about how WordPress Child Themes Function;
    • A Child Theme is "connected" to a Parent Theme by the Template: directive in the style.css file of the Child Theme. It has already been stated, but it is worth stating again, the name of the Template: in the style.css file should be the DIRECTORY name of the Parent Theme.
      • "connected"?: By "connecting" a Child Theme to a Parent Theme, all of the Parent Theme's style sheets, functions, capabilities, etc. are available to the Child Theme and are utilized transparently as if all of the Parent Theme's files were copied into the Child Theme's directory.
    • Why not just modify or add functionality to the Parent Theme?
      • If a theme is updated it will most likely eradicate any changes that have been made. Whereas if modifications and additional functionality are added in the form of a Child Theme, all changes are preserved, even if the Parent Theme is updated.
    • The style.css file has two very important directives (this is redundant information, but important);
      • Theme Name Example: x.twentyfourteen.child (This is name of the Child Theme. It is suggested that it be the same as the directory name of the Child Theme, but it doesn't have to be)
      • Template: twentyfourteen (This is the actual name of the directory (not just the name of the theme) in ./wp-content/themes that contains the Parent Theme)

• There are two different ways to do the next step;
  • If there's a directive in the Parent Theme's functions.php file that includes get_template_directory or get_template_directory_uri, then Create a file in the Child Theme Directory and add the below code to the functions.php file (In the below example, the function "child_theme_parent_styles" is arbitrary and could be named anything (as long as it matches in the add_action directive));

    <?php
    
    function childtheme_parent_styles()
         {
         wp_enqueue_style( 'WhatEverNameYouWant', get_template_directory_uri().'/style.css' );                       
         }
    
    add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

    ...and if there is a version number associated with the Parent Theme, then version information can be included in the script (this wasn't tested to see the nuances of how it worked, but included for additional information);

    <?php
    
    function childtheme_parent_styles()
         {
         wp_enqueue_style( 'WhatEverNameYouWant', get_template_directory_uri().'/style.css' ), array ( 'parenthandle' ), wp_get_theme()->get('Version');                       
         }
    
    add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

  • If there's a directive in the Parent Theme's functions.php file that includes get_stylesheets_directory or get_stylesheets_directory_uri, then Create a file in the Child Theme Directory and add the below code to the functions.php file (Again, names are arbitrary as long as the function name matches the add_action directive));

    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
        $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
        $theme = wp_get_theme();
        wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
            array(),  // if the parent theme code has a dependency, copy it to here
            $theme->parent()->get('Version')
        );
        wp_enqueue_style( 'child-style', get_stylesheet_uri(),
            array( $parenthandle ),
            $theme->get('Version') // this only works if you have Version in the style header
        );
    }

• Within the WordPress GUI, Themes, select / activate the new Child Theme

...done (except if you want to add a picture for the WordPress Appearance, Themes page, then include a file titled screenshot.jpg)

Example

Below is an example of the beginning a Child Theme's style.css file. Notice the /* and */, which are comment delimiters for CSS files. And remember, the Template: twentyfourteen directive must match the name of the Parent Theme's directory name (not the "Theme Name", although they could be the same);

/*
Theme Name: Twenty Fourteen CHILD
Theme URI: https://wordpress.org/themes/twentyfourteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentyfourteen
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.   But it didn't suit my needs, so I changed it.
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, news, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen.child

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others
*/

Additional Information

It certainly isn't a very elegant or intuitive method that WordPress uses to enable this feature. But that's because it wasn't part of the original WordPress (Hint: WordPress started out as a different project and the modern WordPress is actually a branch of the original project) code and they shoehorned it in. Oh well, that's how so many things are that humans create.

For a much longer explanation with more details and additional stuff that can be done, see this site: https://kinsta.com/blog/wordpress-child-theme/ There are about ten thousand more like this one.

Here's the official WordPress information on Child Themes: https://developer.wordpress.org/themes/advanced-topics/child-themes/