Child Themes

Why Use a Child Theme?

In the previous exercise you hacked a theme and hopefully during the process learned a lot about how WordPress is structured. Hacking a theme can be  an effective and, in some cases, may be the only way to achieve your formatting goals, but there is one big problem. Themes can update automatically and all of your hacks can disappear when they do. There are ways to prevent themes from updating, such as changing the name of the theme folder to something other than the default name, but preventing updates can be a bad idea because updates usually bring improvements.  The best way to avoid losing everything by a surprise update is to use a child theme.

Before I explain how to use a child theme, be aware that I am currently exploring the parameters of child themes and this lesson will evolve along with my understanding. The one thing that I can say for certain at this point is that  if your goals for theme modification are relatively modest, changing fonts and background colors for example, child themes are a great option.  It would be possible, for example, to create an alternative template with a child theme (as we did in the previous lesson without a child theme), but perhaps a bit more complicated.

How Child Themes Work

The way child themes work is that, once you select them, the contents of a file inside of your child folder, such as style.css, overwrites the same content in the parent theme. For example, if the parent theme’s style.css file defines the body tag’s default font size as 12px ( body {font-size:12px;} )and you add a body tag to to a style.css file inside of the child theme folder that defines the font as 84px
( body {font-size:84px;} ), you should suddenly notice some really big text on your wordpress site.

If none of this makes sense yet, hopefully it will once you experience how a child theme functions. Let’s get started on that experience.

1. Pick a theme to modify and activate it (Twenty Fifteen). For this lesson we will play with a very common theme called Twenty Fifteen. WordPress.org designates sort of a ‘theme of the year’ every year, and that theme, along with themes from a few previous years, is typically included with the default WordPress installation. Which means that you should find Twenty Fifteen among your already installed themes. Once you find Twenty Fifteen
2. Create the  twentyfifteen-child folder. Your child theme needs a home. To create the home, login to your web account with your ftp client (Cyberduck most likely). Inside of your wordpress folder you should find another folder named wp-content. Open wp-content and next open the themes folder. The themes folder should contain folders named after every one of your currently installed themes, including one named twentyfifteen.  Right-click and create a new folder named twentyfifteen-child. 
   [footnote] You can name the child theme folder anything that you want to, but it’s a good idea to name it after the parent theme and append child to the name so that you won’t confuse it with something else. [/footnote]
3. Open Brackets and create two new files: style.css and functions.php. Add the following text to style.css

   /*
    Theme Name: twenty fifteen child theme
    Theme URI: http://whatever.com
    Description: twenty fifteen child theme
    Author: whatever you want here
    Author URI: http://example.com
    Template: twentyfifteen
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: blue
    Text Domain: twentyfifteen
   */

   Next, add all of the following hocus pocus to functions.php

   <?php
   add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
   function theme_enqueue_styles() {
   $parent_style = 'parent-style';
   wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style )
    );}
   add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
   ?>

4. Save and upload both files into the twentyfifteen-child folder.
5. Login to your WordPress site. From the dashboard, click Appearance and then Themes.  Activate twentyfifteen-child.
6. Select Appearance, and then Editor, as shown at right. This step should automatically open the styles.css file that you just uploaded to the twentyfifteen-child folder.
7. Add the following style to style.css (after the */ tag)
   body {font-size: 34px; }. 
8. Preview your site. See that bigger font size?  If so, make a few more changes to style.css and see if they show up on your site.