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 look at how to create a child theme and some ways which we can make that baby our own.

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?

8. WHY USE A CHILD THEME?WHY USE A CHILD THEME?

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

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

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

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

13. TWO NECESSARY FILESTWO NECESSARY FILES

14. 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
*/

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

16. 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' );

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

19. SCREENSHOT.PNGSCREENSHOT.PNG
880×660

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

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

23. 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;
}

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

26. 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' );

28. FUNCTIONS.PHP CHANGESFUNCTIONS.PHP CHANGES

35. TEMPLATE CHANGESTEMPLATE CHANGES

36. 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!

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

38. 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

39. 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()

40. 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

41. 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