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 Themesopenchamp
 
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 meetupDustin 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
 
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 GANate 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-ThemesLightSpeed
 
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 Themeshenri_makembe
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themesrfair404
 
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-themesDaisyOlsen
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themesDaisyOlsen
 
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-phpapp02sos 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 Swearingmartinwolak
 
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

Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 

Recently uploaded (20)

Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 

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