1.
BIRTHING A CHILD THEMEBIRTHING A CHILD THEME
Presented by /Lauren Pittenger @laurenpittenger
Slides:
Download Child Theme:
http://bit.ly/birthing-child-themes
github.com/lepittenger/twentyfifteen-child

2.
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
ABOUT LAURENABOUT LAUREN

3.
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
ABOUT YOUABOUT YOU

4.
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 COVERWHAT WE'LL COVER

5.
LET'S GO!LET'S GO!

6.
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?WHAT IS A CHILD THEME?

7.
WHY USE A CHILD THEME?WHY USE A CHILD THEME?

8.
#1 RULE#1 RULE
NEVER MODIFY WORDPRESS THEME (OR CORE) FILESNEVER MODIFY WORDPRESS THEME (OR CORE) FILES

9.
CHILD THEMES PREVENT USCHILD THEMES PREVENT US
FROM LOSING OUR CHANGESFROM LOSING OUR CHANGES

10.
CREATING A CHILD THEMECREATING A CHILD THEME
1. Child theme folder
2. style.css
3. functions.php

11.
CHILD THEME DIRECTORYCHILD THEME DIRECTORY
wp-content/themes/my-child-theme

12.
TWO NECESSARY FILESTWO NECESSARY FILES

13.
STYLE.CSSSTYLE.CSS
/*
Theme Name: Twenty Fifteen Child Theme
Theme URI: http://themeuri.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: Lauren Pittenger
Author URI: http://laurenpittenger.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: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-re
Text Domain: twenty-fifteen-child
*/

14.
STYLE.CSSSTYLE.CSS
/*
Theme Name: Twenty Fifteen Child Theme
Template: twentyfifteen
*/

15.
FUNCTIONS.PHPFUNCTIONS.PHP
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' );

16.
NOW WE CAN ACTIVATE OUR BABY!NOW WE CAN ACTIVATE OUR BABY!

17.
SCREENSHOT.PNGSCREENSHOT.PNG
880×660

18.
AT THIS POINT,AT THIS POINT,
CHILD THEME LOOKS & BEHAVESCHILD THEME LOOKS & BEHAVES
EXACTLY AS PARENT THEMEEXACTLY AS PARENT THEME

19.
NOW WHAT?NOW WHAT?
1. CSS changes
2. Template changes
3. functions.php changes

20.
BASIC STYLE CHANGESBASIC 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;
}

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

22.
LITTLE BIT FANCIER STYLE CHANGESLITTLE BIT FANCIER STYLE CHANGES
* {
font-family: 'Andika', sans-serif;
}
.entry-title,
.widget-title,
.site-title {
font-family: 'Underdog', serif;
}
style.css
functions.php
function child_theme_enqueue_styles() {
wp_enqueue_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=Andika|Underdog')
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

23.
FUNCTIONS.PHP CHANGESFUNCTIONS.PHP CHANGES

24.
TEMPLATE CHANGESTEMPLATE CHANGES

25.
TEMPLATE CHANGESTEMPLATE 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!

26.
ADDING BANNER IMAGEADDING BANNER IMAGE
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/header.jpg">
header.php

27.
ADDING OUR OWN TEMPLATESADDING 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

28.
LOCATING THEME DIRECTORIESLOCATING THEME DIRECTORIES
The Parent Theme Directory
The Child Theme Directory
get_stylesheet_directory()
get_stylesheet_directory_uri()
get_template_directory()
get_template_directory_uri()

29.
PARENT THEME SELECTIONPARENT 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

30.
ANY QUESTIONS?ANY QUESTIONS?
Slides:
Demo Child Theme:
Note: demo theme depends on twentyfifteen theme
bit.ly/birthing-child-themes
github.com/lepittenger/twentyfifteen-child
@laurenpittenger
laurenpittenger.com