Learn how to create a WordPress child theme.

1. WORDPRESS CHILD THEMES
Presented by /Lauren Pittenger @laurenpittenger
Slides:
Download Child Theme:
http://bit.ly/wp-child-themes
https://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 LAUREN

3. You manage a WordPress site
You have a blog that's powered by WordPress
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 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 COVER

5. 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?

7. WHY USE A CHILD THEME?

8. #1 RULE
NEVER MODIFY WORDPRESS FILES

9. Using a child theme prevents our changes from being lost
when there's an update to WordPress core or when the
original theme author releases an update
Great way to ease into custom theme development &
learn PHP
WHY USE A CHILD THEME?

10. HOW TO CREATE A CHILD THEME
1. Child Theme Directory
2. style.css
3. functions.php

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

12. TWO NECESSARY FILES

13. STYLE.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-
Text Domain: twenty-fifteen-child
*/

14. FUNCTIONS.PHP
<?php
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
function child_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
http://childthemes.dev/wp-content/themes/twentyfifteen/style.css

15. NOW WE CAN ACTIVATE OUR BABY!

17. SCREENSHOT.PNG
880×660

18. CHILD THEME LOOKS & BEHAVES
EXACTLY AS PARENT THEME

20. NOW WHAT?
1. Style changes
2. Template changes
3. Function changes

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

22. LITTLE BIT FANCIER STYLE CHANGES
* {
font-family: 'Andika', sans-serif;
}
.entry-title,
.widget-title,
.site-title {
font-family: 'Underdog', serif;
}
style.css
functions.php
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
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' );
}

24. FUNCTION CHANGES

31. TEMPLATE CHANGES

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

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

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

35. ANY QUESTIONS?
Slides:
Download Child Theme:
bit.ly/wp-child-themes
github.com/lepittenger/twentyfifteen-child
@laurenpittenger
laurenpittenger.com