Child Themes

In the previous exercise you learned how to alter and apply custom CSS to a given theme. In many cases, custom CSS is all that you need but child themes are another powerful tool that you should know about. With a child theme, not only can you change the CSS of a theme but you can also alter the HTML that forms the structure of your site. This lesson is a short and simple introduction to child themes. Should you want to learn more, the folks at wordpress.org have a lot more to say about child themes.

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.

  1. Pick a theme to modify and activate it (Twenty Fifteen). For this lesson we will work with a theme named called Twenty Fifteen, which is also the year that I first wrote this lesson. 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. Twenty Fifteen is getting old so you may have to search for it.
  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-childchild
    [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: https://wordpress.org/themes/twentyfifteen
     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. themsSave 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. Screen Shot 2015-09-18 at 1.45.13 PMSelect 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. Change the color of h1 for example.

Keep in mind that this lesson is a very limited introduction to child themes. Mainly, I wanted you to know about their existence but didn't want to go too far down this particular rabbit hole for an introductory course.  If you have a theme that you can't part with for some reason and need to make radical changes, child themes can be a powerful and useful tool that is worth of further exploration.

Print Friendly, PDF & Email