Birthing a child theme

  • Front End Designer & Developer at LBDesign, a global communications consultancy
  • Instructor for the Women's Coding Collective of WordPress Basics and JavaScript & jQuery courses
  • TA & Volunteer for GirlDevelopIt


  • You manage a WordPress site
  • You have a blog that's powered by WordPress that uses a default theme
  • You want to learn more about WordPress theme development
  • You want to get your feet wet in PHP and CSS
  • You want to be able to customize your website


  • What is a child theme?
  • Why use a child theme?
  • How to create a child theme
  • Three examples of what we can
    do with a child theme

What WE'll Cover

Let's Go!

A Child Theme is a theme that inherits the styles and functionality of another theme, but lets us override and add our own elements without touching any of the Parent Theme's code

What is a child theme?

Why use a child theme?

#1 Rule

never modify wordpress theme (or core) files

Child themes prevent us
from losing our changes

creating a child theme

  1. Child theme folder
  2. style.css
  3. functions.php

Child Theme Directory


Two Necessary Files


 Theme Name:   Twenty Fifteen Child Theme
 Theme URI:
 Description:  Twenty Fifteen Child Theme
 Author:       Lauren Pittenger
 Author URI:
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child


 Theme Name:   Twenty Fifteen Child Theme
 Template:     twentyfifteen


function child_theme_enqueue_styles() {

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );


add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Now we can activate our baby!



At this point,

Child theme looks & behaves
exactly as parent theme

Now what?

  1. CSS changes
  2. Template changes
  3. functions.php changes

Basic Style changes

.page-header {
    border-left-color: orange;

.entry-footer {
    background: url('images/bg.png') repeat;
    color: white;
.entry-footer a {
    color: white;

#sidebar {
    background: #772322;
    color: white;
.widget-title, #sidebar a {
    color: white;


.page-header {
    border-left-color: orange !important;

Little bit fancier Style changes

* {
    font-family: 'Andika', sans-serif;

.site-title {
    font-family: 'Underdog', serif;
function child_theme_enqueue_styles() {

    wp_enqueue_style( 'google-fonts', '|Underdog');
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Functions.php changes

Template changes

Template changes

  1. Figure out where you want your change
  2. Find the appropriate parent theme template (header.php)
  3. Copy template into child theme, preserving its file name
  4. Edit away!

Adding Banner Image

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/header.jpg">

Adding Our Own Templates

We can leverage the WordPress template hierarchy to our advantage if our parent theme doesn't provide us with a template that we need

Locating Theme Directories

  • The Parent Theme Directory
    • get_stylesheet_directory()
    • get_stylesheet_directory_uri()
  • The Child Theme Directory
    • get_template_directory()
    • get_template_directory_uri()

Parent Theme Selection

  • When selecting a parent theme,
    consider your needs carefully
  • Remember that if you need to make
    a lot of major changes, perhaps another
    solution would be better suited

Any Questions?


Demo Child Theme:

Note: demo theme depends on twentyfifteen theme


WordPress Child Themes

By Lauren Pittenger

WordPress Child Themes

Are you using a theme on your blog or website that is almost what you’re looking for but that could use a bit of customization? Don’t want to look like everyone else using the twenty fifteen theme? Child themes let us inherit the functionality of an existing theme, while adding our own custom functionality and style to suit our tastes and needs. In this session we’ll look at how to create a child theme and some ways which we can make that baby our own.

  • 9,055