Successfully reported this slideshow.
Your SlideShare is downloading. ×

Birthing a Child Theme - WordCamp Scranton

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
WordPress Child Themes
WordPress Child Themes
Loading in …3
×

Check these out next

1 of 41 Ad

Birthing a Child Theme - WordCamp Scranton

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

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

Advertisement

More from Lauren Pittenger (14)

Recently uploaded (20)

Advertisement

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

×