WordPress Child Themes

Wiki.TerraBase.info
Jump to navigation Jump to search

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.

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.
    • 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 utilized.
    • 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

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/