WordPress Child Themes

It has proven very difficult to find simple 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.

So here it is a very quick answer to create a 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
    • 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.
• Important Fact about how WordPress Child Themes Function: A Child Theme is "connected" to a Parent Theme via the default Cascading Style Sheet (CSS) in the Child Theme's directory and is named: style.css
  • "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 can 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 and two very important directives (an example is given later);
  • Theme Name: 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)
• Add the below code to the functions.php file in the Child Theme's directory. 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( 'parent', get_template_directory_uri().'/style.css' );                       
       }
  
  add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

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

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/