Birthing a Child Theme - WordCamp Scranton

BIRTHING A CHILD THEMEBIRTHING A CHILD THEMEPresented by / Lauren Pittenger @laurenpittenger

Slides:

Download Child Theme:

http://bit.ly/birthing-child-themes

github.com/lepittenger/twentyfifteen-child

Front End Designer & Developer at LBDesign, a globalcommunications consultancyInstructor for the Women's Coding Collective ofWordPress Basics and JavaScript & jQuery coursesTA & Volunteer for GirlDevelopIt

ABOUT LAURENABOUT LAUREN

You manage a WordPress siteYou have a blog that's powered by WordPressthat uses a default themeYou want to learn more about WordPresstheme developmentYou want to get your feet wet in PHP and CSSYou want to be able to customize your website

ABOUT YOUABOUT YOU

What is a child theme?Why use a child theme?How to create a child themeThree examples of what we cando with a child theme

WHAT WE'LL COVERWHAT WE'LL COVER

LET'S GO!LET'S GO!

A Child Theme is a theme that inherits the styles andfunctionality of another theme, but lets us override and add

our own elements without touching any of the ParentTheme's code

WHAT IS A CHILD THEME?WHAT IS A CHILD THEME?

WHY USE A CHILD THEME?WHY USE A CHILD THEME?

#1 RULE#1 RULENEVER MODIFY WORDPRESS THEME (OR CORE) FILESNEVER MODIFY WORDPRESS THEME (OR CORE) FILES

CHILD THEMES PREVENT USCHILD THEMES PREVENT USFROM LOSING OUR CHANGESFROM LOSING OUR CHANGES

CREATING A CHILD THEMECREATING A CHILD THEME1. Child theme folder2. style.css3. functions.php

CHILD THEME DIRECTORYCHILD THEME DIRECTORYwp-content/themes/my-child-theme

TWO NECESSARY FILESTWO NECESSARY FILES

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

STYLE.CSSSTYLE.CSS

/* Theme Name: Twenty Fifteen Child Theme Template: twentyfifteen*/

FUNCTIONS.PHPFUNCTIONS.PHPfunction 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!NOW WE CAN ACTIVATE OUR BABY!

SCREENSHOT.PNGSCREENSHOT.PNG 880×660

AT THIS POINT,AT THIS POINT,CHILD THEME LOOKS & BEHAVESCHILD THEME LOOKS & BEHAVES

EXACTLY AS PARENT THEMEEXACTLY AS PARENT THEME

NOW WHAT?NOW WHAT?1. CSS changes2. Template changes3. functions.php changes

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

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

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

FUNCTIONS.PHP CHANGESFUNCTIONS.PHP CHANGES

TEMPLATE CHANGESTEMPLATE CHANGES

TEMPLATE CHANGESTEMPLATE CHANGES1. Figure out where you want your change2. Find the appropriate parent theme

template (header.php)3. Copy template into child theme,

preserving its file name4. Edit away!

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

header.php

ADDING OUR OWN TEMPLATESADDING OUR OWN TEMPLATESWe can leverage the WordPress template hierarchy to our

advantage if our parent theme doesn't provide us with atemplate that we need

LOCATING THEME DIRECTORIESLOCATING THEME DIRECTORIESThe Parent Theme Directory

The Child Theme Directory

get_stylesheet_directory()

get_stylesheet_directory_uri()

get_template_directory()

get_template_directory_uri()

PARENT THEME SELECTIONPARENT THEME SELECTIONWhen selecting a parent theme,consider your needs carefullyRemember that if you need to makea lot of major changes, perhaps anothersolution would be better suited

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