birthing a child theme - wordcamp scranton
TRANSCRIPT
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
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?
#1 RULE#1 RULENEVER MODIFY WORDPRESS THEME (OR CORE) FILESNEVER MODIFY WORDPRESS THEME (OR CORE) 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*/
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' );
AT THIS POINT,AT THIS POINT,CHILD THEME LOOKS & BEHAVESCHILD THEME LOOKS & BEHAVES
EXACTLY AS PARENT THEMEEXACTLY AS PARENT THEME
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;}
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' );
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