SlideShare a Scribd company logo
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
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
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
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
LET'S GO!LET'S GO!
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?
WHY USE A CHILD THEME?WHY USE A CHILD THEME?
#1 RULE#1 RULE
NEVER MODIFY WORDPRESS THEME (OR CORE) FILESNEVER MODIFY WORDPRESS THEME (OR CORE) FILES
CHILD THEMES PREVENT USCHILD THEMES PREVENT US
FROM LOSING OUR CHANGESFROM LOSING OUR CHANGES
CREATING A CHILD THEMECREATING A CHILD THEME
1. Child theme folder
2. style.css
3. functions.php
CHILD THEME DIRECTORYCHILD THEME DIRECTORY
wp-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-re
Text Domain: twenty-fifteen-child
*/
STYLE.CSSSTYLE.CSS
/*
Theme Name: Twenty Fifteen Child Theme
Template: twentyfifteen
*/
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' );
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 changes
2. Template changes
3. 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 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!
ADDING BANNER IMAGEADDING BANNER IMAGE
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/header.jpg">
header.php
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
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()
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
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

More Related Content

What's hot

WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
openchamp
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
Alison Foxall
 
What to include in a boilerplate theme
What to include in a boilerplate themeWhat to include in a boilerplate theme
What to include in a boilerplate theme
Tim Brown
 
Child themes
Child themesChild themes
Child themes
lkagan
 
WordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPressWordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPress
Jonny Allbut
 
Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child Themes
Andrew Wikel
 
Professional WordPress Workflow - WPDay 2015
Professional WordPress Workflow - WPDay 2015 Professional WordPress Workflow - WPDay 2015
Professional WordPress Workflow - WPDay 2015
Maurizio Pelizzone
 
Don't Let the Wrong Theme Choice Ruin Your New WordPress Site
Don't Let the Wrong Theme Choice Ruin Your New WordPress SiteDon't Let the Wrong Theme Choice Ruin Your New WordPress Site
Don't Let the Wrong Theme Choice Ruin Your New WordPress Site
BobWP.com
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
btopro
 
Dayton word press meetup
Dayton word press meetupDayton word press meetup
Dayton word press meetup
Dustin Hartzler
 
Wordpress
WordpressWordpress
Wordpress
CKLS
 
WordPress Meetup Bandung - December 2014
WordPress Meetup Bandung - December 2014WordPress Meetup Bandung - December 2014
WordPress Meetup Bandung - December 2014
Fikri Rasyid
 
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Jazkarta, Inc.
 
The Why, When, How of WordPress Child Themes
The Why, When, How of WordPress Child ThemesThe Why, When, How of WordPress Child Themes
The Why, When, How of WordPress Child Themes
Anthony Hortin
 
Wcto2014
Wcto2014Wcto2014
Wcto2014
Al Davis
 
Smart Development-Happy Clients
Smart Development-Happy ClientsSmart Development-Happy Clients
Smart Development-Happy Clients
Abhishek Rijal
 
Blogging as a Team : how to start a collaborative blog
Blogging as a Team : how to start a collaborative blogBlogging as a Team : how to start a collaborative blog
Blogging as a Team : how to start a collaborative blog
doityvette
 
MAMP: Building WordPress sites in your local environment
MAMP: Building WordPress sites in your local environmentMAMP: Building WordPress sites in your local environment
MAMP: Building WordPress sites in your local environment
Liam Dempsey
 
Why you should be using WordPress child themes
Why you should be using WordPress child themesWhy you should be using WordPress child themes
Why you should be using WordPress child themes
Anthony Hortin
 
WordPress Bootcamp GA
WordPress Bootcamp GAWordPress Bootcamp GA
WordPress Bootcamp GA
Nate Cooper
 

What's hot (20)

WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
What to include in a boilerplate theme
What to include in a boilerplate themeWhat to include in a boilerplate theme
What to include in a boilerplate theme
 
Child themes
Child themesChild themes
Child themes
 
WordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPressWordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPress
 
Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child Themes
 
Professional WordPress Workflow - WPDay 2015
Professional WordPress Workflow - WPDay 2015 Professional WordPress Workflow - WPDay 2015
Professional WordPress Workflow - WPDay 2015
 
Don't Let the Wrong Theme Choice Ruin Your New WordPress Site
Don't Let the Wrong Theme Choice Ruin Your New WordPress SiteDon't Let the Wrong Theme Choice Ruin Your New WordPress Site
Don't Let the Wrong Theme Choice Ruin Your New WordPress Site
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
 
Dayton word press meetup
Dayton word press meetupDayton word press meetup
Dayton word press meetup
 
Wordpress
WordpressWordpress
Wordpress
 
WordPress Meetup Bandung - December 2014
WordPress Meetup Bandung - December 2014WordPress Meetup Bandung - December 2014
WordPress Meetup Bandung - December 2014
 
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
 
The Why, When, How of WordPress Child Themes
The Why, When, How of WordPress Child ThemesThe Why, When, How of WordPress Child Themes
The Why, When, How of WordPress Child Themes
 
Wcto2014
Wcto2014Wcto2014
Wcto2014
 
Smart Development-Happy Clients
Smart Development-Happy ClientsSmart Development-Happy Clients
Smart Development-Happy Clients
 
Blogging as a Team : how to start a collaborative blog
Blogging as a Team : how to start a collaborative blogBlogging as a Team : how to start a collaborative blog
Blogging as a Team : how to start a collaborative blog
 
MAMP: Building WordPress sites in your local environment
MAMP: Building WordPress sites in your local environmentMAMP: Building WordPress sites in your local environment
MAMP: Building WordPress sites in your local environment
 
Why you should be using WordPress child themes
Why you should be using WordPress child themesWhy you should be using WordPress child themes
Why you should be using WordPress child themes
 
WordPress Bootcamp GA
WordPress Bootcamp GAWordPress Bootcamp GA
WordPress Bootcamp GA
 

Similar to Birthing a Child Theme - WordCamp Scranton

2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes
LightSpeed
 
Child Theme
Child ThemeChild Theme
Child Theme
Shinichi Nishikawa
 
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
topher1kenobe
 
Parent and child themes
Parent and child themesParent and child themes
Parent and child themes
Tom Jenkins
 
Week 9 - Introduction to Child Themes
Week 9  - Introduction to Child ThemesWeek 9  - Introduction to Child Themes
Week 9 - Introduction to Child Themes
henri_makembe
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
rfair404
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WPJoburg
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
DaisyOlsen
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
DaisyOlsen
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
DaisyOlsen
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
Joe Querin
 
The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)
Torsten Landsiedel
 
WordPress Child Theme Workshop
WordPress Child Theme WorkshopWordPress Child Theme Workshop
WordPress Child Theme Workshop
Carme Mias
 
Dress Your WordPress with Child Themes
Dress Your WordPress with Child ThemesDress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
Laurie M. Rauch
 
WPAZ Child Themes
WPAZ Child ThemesWPAZ Child Themes
WPAZ Child Themes
certainstrings
 
Child Themes - WordCamp Dublin 2017
Child Themes - WordCamp Dublin 2017Child Themes - WordCamp Dublin 2017
Child Themes - WordCamp Dublin 2017
Damien Carbery
 
Howdoesgettemplatepartworksintwentytentheme 110123234953-phpapp02
Howdoesgettemplatepartworksintwentytentheme 110123234953-phpapp02Howdoesgettemplatepartworksintwentytentheme 110123234953-phpapp02
Howdoesgettemplatepartworksintwentytentheme 110123234953-phpapp02
sos informatique
 
Creating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without SwearingCreating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without Swearing
martinwolak
 
Firstborn child theme word camp presentation - atlanta 2013
Firstborn child theme   word camp presentation - atlanta 2013Firstborn child theme   word camp presentation - atlanta 2013
Firstborn child theme word camp presentation - atlanta 2013
Evan Mullins
 
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
Aban Nesta
 

Similar to Birthing a Child Theme - WordCamp Scranton (20)

2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes
 
Child Theme
Child ThemeChild Theme
Child Theme
 
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
 
Parent and child themes
Parent and child themesParent and child themes
Parent and child themes
 
Week 9 - Introduction to Child Themes
Week 9  - Introduction to Child ThemesWeek 9  - Introduction to Child Themes
Week 9 - Introduction to Child Themes
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)
 
WordPress Child Theme Workshop
WordPress Child Theme WorkshopWordPress Child Theme Workshop
WordPress Child Theme Workshop
 
Dress Your WordPress with Child Themes
Dress Your WordPress with Child ThemesDress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
 
WPAZ Child Themes
WPAZ Child ThemesWPAZ Child Themes
WPAZ Child Themes
 
Child Themes - WordCamp Dublin 2017
Child Themes - WordCamp Dublin 2017Child Themes - WordCamp Dublin 2017
Child Themes - WordCamp Dublin 2017
 
Howdoesgettemplatepartworksintwentytentheme 110123234953-phpapp02
Howdoesgettemplatepartworksintwentytentheme 110123234953-phpapp02Howdoesgettemplatepartworksintwentytentheme 110123234953-phpapp02
Howdoesgettemplatepartworksintwentytentheme 110123234953-phpapp02
 
Creating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without SwearingCreating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without Swearing
 
Firstborn child theme word camp presentation - atlanta 2013
Firstborn child theme   word camp presentation - atlanta 2013Firstborn child theme   word camp presentation - atlanta 2013
Firstborn child theme word camp presentation - atlanta 2013
 
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
 

More from Lauren Pittenger

Systems + Processes for Creatives – WordCamp Philadelphia 2017
Systems + Processes for Creatives – WordCamp Philadelphia 2017Systems + Processes for Creatives – WordCamp Philadelphia 2017
Systems + Processes for Creatives – WordCamp Philadelphia 2017
Lauren Pittenger
 
Using Github to Share Talk Ideas
Using Github to Share Talk IdeasUsing Github to Share Talk Ideas
Using Github to Share Talk Ideas
Lauren Pittenger
 
What The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to FlexboxWhat The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to Flexbox
Lauren Pittenger
 
Web Hosting for WordPress: WP Engine
Web Hosting for WordPress: WP EngineWeb Hosting for WordPress: WP Engine
Web Hosting for WordPress: WP Engine
Lauren Pittenger
 
PSD to WordPress Theme
PSD to WordPress ThemePSD to WordPress Theme
PSD to WordPress Theme
Lauren Pittenger
 
A Single Div: A Learning Experiment
A Single Div: A Learning ExperimentA Single Div: A Learning Experiment
A Single Div: A Learning Experiment
Lauren Pittenger
 
My Favorite Design Tools
My Favorite Design ToolsMy Favorite Design Tools
My Favorite Design Tools
Lauren Pittenger
 
The Art of Minimalist Design
The Art of Minimalist DesignThe Art of Minimalist Design
The Art of Minimalist Design
Lauren Pittenger
 
Using Slickplan to Help Plan a Website Redesign
Using Slickplan to Help Plan a Website RedesignUsing Slickplan to Help Plan a Website Redesign
Using Slickplan to Help Plan a Website Redesign
Lauren Pittenger
 
Systems + Processes for Creatives – WordCamp Pittsburgh 2017
Systems + Processes for Creatives – WordCamp Pittsburgh 2017Systems + Processes for Creatives – WordCamp Pittsburgh 2017
Systems + Processes for Creatives – WordCamp Pittsburgh 2017
Lauren Pittenger
 
Getting Started Speaking Workshop - ELA Conf
Getting Started Speaking Workshop - ELA ConfGetting Started Speaking Workshop - ELA Conf
Getting Started Speaking Workshop - ELA Conf
Lauren Pittenger
 
Command Line for Designers - WordCamp Philly
Command Line for Designers - WordCamp PhillyCommand Line for Designers - WordCamp Philly
Command Line for Designers - WordCamp Philly
Lauren Pittenger
 
Command Line for Designers - WordCamp NYC
Command Line for Designers - WordCamp NYCCommand Line for Designers - WordCamp NYC
Command Line for Designers - WordCamp NYC
Lauren Pittenger
 
Creating a button shortcode
Creating a button shortcodeCreating a button shortcode
Creating a button shortcode
Lauren Pittenger
 

More from Lauren Pittenger (14)

Systems + Processes for Creatives – WordCamp Philadelphia 2017
Systems + Processes for Creatives – WordCamp Philadelphia 2017Systems + Processes for Creatives – WordCamp Philadelphia 2017
Systems + Processes for Creatives – WordCamp Philadelphia 2017
 
Using Github to Share Talk Ideas
Using Github to Share Talk IdeasUsing Github to Share Talk Ideas
Using Github to Share Talk Ideas
 
What The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to FlexboxWhat The Flexbox? An Intro to Flexbox
What The Flexbox? An Intro to Flexbox
 
Web Hosting for WordPress: WP Engine
Web Hosting for WordPress: WP EngineWeb Hosting for WordPress: WP Engine
Web Hosting for WordPress: WP Engine
 
PSD to WordPress Theme
PSD to WordPress ThemePSD to WordPress Theme
PSD to WordPress Theme
 
A Single Div: A Learning Experiment
A Single Div: A Learning ExperimentA Single Div: A Learning Experiment
A Single Div: A Learning Experiment
 
My Favorite Design Tools
My Favorite Design ToolsMy Favorite Design Tools
My Favorite Design Tools
 
The Art of Minimalist Design
The Art of Minimalist DesignThe Art of Minimalist Design
The Art of Minimalist Design
 
Using Slickplan to Help Plan a Website Redesign
Using Slickplan to Help Plan a Website RedesignUsing Slickplan to Help Plan a Website Redesign
Using Slickplan to Help Plan a Website Redesign
 
Systems + Processes for Creatives – WordCamp Pittsburgh 2017
Systems + Processes for Creatives – WordCamp Pittsburgh 2017Systems + Processes for Creatives – WordCamp Pittsburgh 2017
Systems + Processes for Creatives – WordCamp Pittsburgh 2017
 
Getting Started Speaking Workshop - ELA Conf
Getting Started Speaking Workshop - ELA ConfGetting Started Speaking Workshop - ELA Conf
Getting Started Speaking Workshop - ELA Conf
 
Command Line for Designers - WordCamp Philly
Command Line for Designers - WordCamp PhillyCommand Line for Designers - WordCamp Philly
Command Line for Designers - WordCamp Philly
 
Command Line for Designers - WordCamp NYC
Command Line for Designers - WordCamp NYCCommand Line for Designers - WordCamp NYC
Command Line for Designers - WordCamp NYC
 
Creating a button shortcode
Creating a button shortcodeCreating a button shortcode
Creating a button shortcode
 

Recently uploaded

Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
Sease
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
DianaGray10
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
ScyllaDB
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 

Recently uploaded (20)

Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 

Birthing a Child Theme - WordCamp Scranton

  • 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
  • 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.
  • 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!
  • 18.
  • 20. AT THIS POINT,AT THIS POINT, CHILD THEME LOOKS & BEHAVESCHILD THEME LOOKS & BEHAVES EXACTLY AS PARENT THEMEEXACTLY AS PARENT THEME
  • 21.
  • 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; }
  • 24.
  • 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' );
  • 27.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 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