SlideShare a Scribd company logo

Child Theme Basics & Twenty Seventeen Theme Demo

•
•
Douglas Yuen
Douglas Yuen

This document provides information on child themes in WordPress. It explains that child themes allow customizations to a parent theme without overwriting the theme's files when upgrading. It outlines how to set up a child theme, including requiring a style.css file, functions.php file, and setting the template. It also demonstrates the Twenty Seventeen theme and best practices for its header images, home page sections, and recommended image dimensions.

Related slideshows

WordPress Theme Basics
WordPress Theme BasicsWordPress Theme Basics
WordPress Theme Basics
 
Food blogging at UBC
Food blogging at UBCFood blogging at UBC
Food blogging at UBC
 
WordPress 101
WordPress 101WordPress 101
WordPress 101
 
1 of 12
Download to read offline
Child Theme Basics & Twenty Seventeen Theme Demo
Child Theme Basics Why use a child theme? • Don’t lose customizations when upgrading the original theme • Don’t be afraid to upgrade
Child Theme Basics What is a child theme? • A layer on top of your theme that you can edit without modifying the original • Inherits the properties of the original theme • “Grandchild” themes are possible, but complicated and not recommended. The child theme system wasn't designed for this, so it involves a bunch of workarounds. • Reference: https://codex.wordpress.org/Child_Themes
Child Theme Basics How to set up a child theme • Requirements: folder, style.css, functions.php • style.css needs to include header information, must set "template" correctly • functions.php can be empty, but recommended to enqueue styles from parent theme • Activate the child theme, don’t delete the parent theme • Optional: page templates, assets (images, JavaScript, etc) • Or use a plugin: • https://wordpress.org/plugins/one-click-child-theme/ (warning: hasn’t been updated in 2 years) • https://wordpress.org/plugins/child-theme-configurator/ (haven’t tested it, but it looks promising)
Child Theme Basics style.css
Child Theme Basics functions.php
Child Theme Basics Alternatives Plugin like My Custom CSS to replace style.css May not need this if custom CSS is built-in like Twenty Seventeen Custom plugin to replace functions.php Note: code is processed in a different order
Twenty Seventeen Theme Demo Overview • Theme page: https://wordpress.org/themes/twentyseventeen/ • Custom full screen header (image or video) • Home page sections with full width images • You can set a color scheme that affects elements throughout the site • Mobile responsive • Good PageSpeed score and load time out of the box (with image header)
Twenty Seventeen Theme Demo Background Dimensions • >75% of screen widths will be between 1366-1920px (excluding mobile) • Data from https://www.w3schools.com/browsers/browsers_display.asp • Check your Google Analytics data for your specific site • You don’t want your image stretched if it’s smaller than the screen size • You don’t want to slow down your site with an excessively large image • Recommendation: 1920px wide, 1200+px high (higher if using parallax) < 1366px 1366px 1365-1919px 1920px > 1920px 16% 35% 21% 19% 9%
Twenty Seventeen Theme Demo Header • Header Image: 2000x1200px recommended dimensions • Switches to a shorter version on other pages, so plan accordingly • License free, high resolution photos: unsplash.com, pixabay.com • Header Video: 2000x1200px recommended dimensions • From YouTube or your media library (not recommended) • Video will autoplay without sound • Can’t put a URL to a video file on another source (i.e. Amazon S3) • Other pages will use a shorter version of your header image
Twenty Seventeen Theme Demo Home Page Sections • Requires “Static Front Page” to be selected • Create a page for each one with a featured image • In the Customizer, you can select up to 4 pages to display their featured image and content in their entirety • You might not want to include those pages in your navigation, as they are exact copies of what you see on the home page (and the featured image is displayed full-size at the top) • Link to home page sections with IDs (#panel1, #panel2, #panel3, #panel4) • Use the absolute URL of the section on the home page so it will work from other pages (http://twentyseventeen.flywheelsites.com#panel1)
THANKS! Doug Yuen Email: doug@efficientwp.com Twitter: @Doug_Yuen Website: EfficientWP.com

More Related Content

Child Theme Basics & Twenty Seventeen Theme Demo

  • 1. Child Theme Basics & Twenty Seventeen Theme Demo
  • 2. Child Theme Basics Why use a child theme? • Don’t lose customizations when upgrading the original theme • Don’t be afraid to upgrade
  • 3. Child Theme Basics What is a child theme? • A layer on top of your theme that you can edit without modifying the original • Inherits the properties of the original theme • “Grandchild” themes are possible, but complicated and not recommended. The child theme system wasn't designed for this, so it involves a bunch of workarounds. • Reference: https://codex.wordpress.org/Child_Themes
  • 4. Child Theme Basics How to set up a child theme • Requirements: folder, style.css, functions.php • style.css needs to include header information, must set "template" correctly • functions.php can be empty, but recommended to enqueue styles from parent theme • Activate the child theme, don’t delete the parent theme • Optional: page templates, assets (images, JavaScript, etc) • Or use a plugin: • https://wordpress.org/plugins/one-click-child-theme/ (warning: hasn’t been updated in 2 years) • https://wordpress.org/plugins/child-theme-configurator/ (haven’t tested it, but it looks promising)
  • 7. Child Theme Basics Alternatives Plugin like My Custom CSS to replace style.css May not need this if custom CSS is built-in like Twenty Seventeen Custom plugin to replace functions.php Note: code is processed in a different order
  • 8. Twenty Seventeen Theme Demo Overview • Theme page: https://wordpress.org/themes/twentyseventeen/ • Custom full screen header (image or video) • Home page sections with full width images • You can set a color scheme that affects elements throughout the site • Mobile responsive • Good PageSpeed score and load time out of the box (with image header)
  • 9. Twenty Seventeen Theme Demo Background Dimensions • >75% of screen widths will be between 1366-1920px (excluding mobile) • Data from https://www.w3schools.com/browsers/browsers_display.asp • Check your Google Analytics data for your specific site • You don’t want your image stretched if it’s smaller than the screen size • You don’t want to slow down your site with an excessively large image • Recommendation: 1920px wide, 1200+px high (higher if using parallax) < 1366px 1366px 1365-1919px 1920px > 1920px 16% 35% 21% 19% 9%
  • 10. Twenty Seventeen Theme Demo Header • Header Image: 2000x1200px recommended dimensions • Switches to a shorter version on other pages, so plan accordingly • License free, high resolution photos: unsplash.com, pixabay.com • Header Video: 2000x1200px recommended dimensions • From YouTube or your media library (not recommended) • Video will autoplay without sound • Can’t put a URL to a video file on another source (i.e. Amazon S3) • Other pages will use a shorter version of your header image
  • 11. Twenty Seventeen Theme Demo Home Page Sections • Requires “Static Front Page” to be selected • Create a page for each one with a featured image • In the Customizer, you can select up to 4 pages to display their featured image and content in their entirety • You might not want to include those pages in your navigation, as they are exact copies of what you see on the home page (and the featured image is displayed full-size at the top) • Link to home page sections with IDs (#panel1, #panel2, #panel3, #panel4) • Use the absolute URL of the section on the home page so it will work from other pages (http://twentyseventeen.flywheelsites.com#panel1)
  • 12. THANKS! Doug Yuen Email: doug@efficientwp.com Twitter: @Doug_Yuen Website: EfficientWP.com