Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BIRTHING A CHILD THEMEBIRTHING A CHILD THEME
Presented by /Lauren Pittenger @laurenpittenger
Slides:
Download Child Theme:...
Front End Designer & Developer at LBDesign, a global
communications consultancy
Instructor for the Women's Coding Collecti...
You manage a WordPress site
You have a blog that's powered by WordPress
that uses a default theme
You want to learn more a...
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 th...
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...
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/
Descript...
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_director...
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 PARE...
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...
!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,
.w...
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 (h...
ADDING BANNER IMAGEADDING BANNER IMAGE
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/header.jpg">
header....
ADDING OUR OWN TEMPLATESADDING OUR OWN TEMPLATES
We can leverage the WordPress template hierarchy to our
advantage if our ...
LOCATING THEME DIRECTORIESLOCATING THEME DIRECTORIES
The Parent Theme Directory
The Child Theme Directory
get_stylesheet_d...
PARENT THEME SELECTIONPARENT THEME SELECTION
When selecting a parent theme,
consider your needs carefully
Remember that if...
ANY QUESTIONS?ANY QUESTIONS?
Slides:
Demo Child Theme:
Note: demo theme depends on twentyfifteen theme
bit.ly/birthing-chil...
Birthing a Child Theme - WordCamp Scranton
Birthing a Child Theme - WordCamp Scranton
Birthing a Child Theme - WordCamp Scranton
Birthing a Child Theme - WordCamp Scranton
Birthing a Child Theme - WordCamp Scranton
Birthing a Child Theme - WordCamp Scranton
Birthing a Child Theme - WordCamp Scranton
Birthing a Child Theme - WordCamp Scranton
Birthing a Child Theme - WordCamp Scranton
Birthing a Child Theme - WordCamp Scranton
Birthing a Child Theme - WordCamp Scranton
Upcoming SlideShare
Loading in …5
×

Birthing a Child Theme - WordCamp Scranton

239 views

Published on

Are you using a theme on your blog or website that is almost what you’re looking for but that could use a bit of customization? Don’t want to look like everyone else using the twenty fifteen theme? Child themes let us inherit the functionality of an existing theme, while adding our own custom functionality and style to suit our tastes and needs. In this session we look at how to create a child theme and some ways which we can make that baby our own.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Birthing a Child Theme - WordCamp Scranton

  1. 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. 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. 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. 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
  5. 5. LET'S GO!LET'S GO!
  6. 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. 7. WHY USE A CHILD THEME?WHY USE A CHILD THEME?
  8. 8. #1 RULE#1 RULE NEVER MODIFY WORDPRESS THEME (OR CORE) FILESNEVER MODIFY WORDPRESS THEME (OR CORE) FILES
  9. 9. CHILD THEMES PREVENT USCHILD THEMES PREVENT US FROM LOSING OUR CHANGESFROM LOSING OUR CHANGES
  10. 10. CREATING A CHILD THEMECREATING A CHILD THEME 1. Child theme folder 2. style.css 3. functions.php
  11. 11. CHILD THEME DIRECTORYCHILD THEME DIRECTORY wp-content/themes/my-child-theme
  12. 12. TWO NECESSARY FILESTWO NECESSARY FILES
  13. 13. 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 */
  14. 14. STYLE.CSSSTYLE.CSS /* Theme Name: Twenty Fifteen Child Theme Template: twentyfifteen */
  15. 15. 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' );
  16. 16. NOW WE CAN ACTIVATE OUR BABY!NOW WE CAN ACTIVATE OUR BABY!
  17. 17. SCREENSHOT.PNGSCREENSHOT.PNG 880×660
  18. 18. AT THIS POINT,AT THIS POINT, CHILD THEME LOOKS & BEHAVESCHILD THEME LOOKS & BEHAVES EXACTLY AS PARENT THEMEEXACTLY AS PARENT THEME
  19. 19. NOW WHAT?NOW WHAT? 1. CSS changes 2. Template changes 3. functions.php changes
  20. 20. 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; }
  21. 21. !IMPORTANT!IMPORTANT .page-header { border-left-color: orange !important; }
  22. 22. 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' );
  23. 23. FUNCTIONS.PHP CHANGESFUNCTIONS.PHP CHANGES
  24. 24. TEMPLATE CHANGESTEMPLATE CHANGES
  25. 25. 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!
  26. 26. ADDING BANNER IMAGEADDING BANNER IMAGE <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/header.jpg"> header.php
  27. 27. 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
  28. 28. 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()
  29. 29. 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
  30. 30. 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

×