SlideShare a Scribd company logo
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

What's hot

WordPress Theme Basics
WordPress Theme BasicsWordPress Theme Basics
WordPress Theme Basics
Jen Jamar
 
Food blogging at UBC
Food blogging at UBCFood blogging at UBC
Food blogging at UBC
Tris Hussey
 
WordPress 101
WordPress 101WordPress 101
WordPress 101
Online Business Owners
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
openchamp
 
Word press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp PresentationWord press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp Presentation
Angela Samuels
 
How to build your list using wordpress
How to build your list using wordpressHow to build your list using wordpress
How to build your list using wordpress
Heidi Richards Mooney
 
Wordpress Page Load Speed - Kenneth sytian
Wordpress Page Load Speed - Kenneth sytianWordpress Page Load Speed - Kenneth sytian
Wordpress Page Load Speed - Kenneth sytian
Grant Merriel
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
Chris Olbekson
 
WordPress 101 less than an hour
WordPress 101 less than an hourWordPress 101 less than an hour
WordPress 101 less than an hour
Angela Samuels
 
Understanding Content Management Services
Understanding Content Management ServicesUnderstanding Content Management Services
Understanding Content Management Services
360ideas
 
Green Hectares Rural Tech Workshop - Adding Content
Green Hectares Rural Tech Workshop - Adding ContentGreen Hectares Rural Tech Workshop - Adding Content
Green Hectares Rural Tech Workshop - Adding Content
Green Hectares
 
April 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesApril 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child Themes
Eric Sembrat
 
How to Start WordPressing in 30 minutes
How to Start WordPressing in 30 minutesHow to Start WordPressing in 30 minutes
How to Start WordPressing in 30 minutes
Rafael Scapin, Ph.D.
 
Web designing chennai
Web designing chennaiWeb designing chennai
Web designing chennai
acspvt14
 
WordPress Beginner: Choosing & Customizing Your Theme
WordPress Beginner: Choosing & Customizing Your ThemeWordPress Beginner: Choosing & Customizing Your Theme
WordPress Beginner: Choosing & Customizing Your Theme
Jamie Schmid
 
Dayton word press meetup
Dayton word press meetupDayton word press meetup
Dayton word press meetup
Dustin Hartzler
 
Web easy8professional2
Web easy8professional2Web easy8professional2
Web easy8professional2
Lorena Sanchez
 
Use Case: integrating a complex e-commerce site - Frenchtoday.com
Use Case: integrating a complex e-commerce site - Frenchtoday.comUse Case: integrating a complex e-commerce site - Frenchtoday.com
Use Case: integrating a complex e-commerce site - Frenchtoday.com
Olivier Karfis
 
New SEO Approaches For WordPress
New SEO Approaches For WordPressNew SEO Approaches For WordPress
New SEO Approaches For WordPress
Affiliate Summit
 
nicoleregowebsite
nicoleregowebsitenicoleregowebsite
nicoleregowebsite
nicolerego01
 

What's hot (20)

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
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
Word press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp PresentationWord press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp Presentation
 
How to build your list using wordpress
How to build your list using wordpressHow to build your list using wordpress
How to build your list using wordpress
 
Wordpress Page Load Speed - Kenneth sytian
Wordpress Page Load Speed - Kenneth sytianWordpress Page Load Speed - Kenneth sytian
Wordpress Page Load Speed - Kenneth sytian
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
 
WordPress 101 less than an hour
WordPress 101 less than an hourWordPress 101 less than an hour
WordPress 101 less than an hour
 
Understanding Content Management Services
Understanding Content Management ServicesUnderstanding Content Management Services
Understanding Content Management Services
 
Green Hectares Rural Tech Workshop - Adding Content
Green Hectares Rural Tech Workshop - Adding ContentGreen Hectares Rural Tech Workshop - Adding Content
Green Hectares Rural Tech Workshop - Adding Content
 
April 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesApril 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child Themes
 
How to Start WordPressing in 30 minutes
How to Start WordPressing in 30 minutesHow to Start WordPressing in 30 minutes
How to Start WordPressing in 30 minutes
 
Web designing chennai
Web designing chennaiWeb designing chennai
Web designing chennai
 
WordPress Beginner: Choosing & Customizing Your Theme
WordPress Beginner: Choosing & Customizing Your ThemeWordPress Beginner: Choosing & Customizing Your Theme
WordPress Beginner: Choosing & Customizing Your Theme
 
Dayton word press meetup
Dayton word press meetupDayton word press meetup
Dayton word press meetup
 
Web easy8professional2
Web easy8professional2Web easy8professional2
Web easy8professional2
 
Use Case: integrating a complex e-commerce site - Frenchtoday.com
Use Case: integrating a complex e-commerce site - Frenchtoday.comUse Case: integrating a complex e-commerce site - Frenchtoday.com
Use Case: integrating a complex e-commerce site - Frenchtoday.com
 
New SEO Approaches For WordPress
New SEO Approaches For WordPressNew SEO Approaches For WordPress
New SEO Approaches For WordPress
 
nicoleregowebsite
nicoleregowebsitenicoleregowebsite
nicoleregowebsite
 

Similar to Child Theme Basics & Twenty Seventeen Theme Demo

Child themes
Child themesChild themes
Child themes
bobwlsn
 
Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child Themes
Andrew Wikel
 
Should you use WordPress for your non-profit websites?
Should you use WordPress for your non-profit websites?Should you use WordPress for your non-profit websites?
Should you use WordPress for your non-profit websites?
Bethany Siegler
 
How To Choose A Theme
How To Choose A ThemeHow To Choose A Theme
How To Choose A Theme
Nicky Pink
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
David Brattoli
 
WordPress Intermediate Workshop
WordPress Intermediate WorkshopWordPress Intermediate Workshop
WordPress Intermediate Workshop
The Toolbox, Inc.
 
Minimize website page loading time – 20+ advanced SEO tips
Minimize website page loading time – 20+ advanced SEO tipsMinimize website page loading time – 20+ advanced SEO tips
Minimize website page loading time – 20+ advanced SEO tips
CgColors
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get thereOptimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get there
Stephen Bell
 
Getting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for BeginnersGetting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for Beginners
New Tricks
 
Child Theme Frameworks
Child Theme FrameworksChild Theme Frameworks
Child Theme Frameworks
ryngrn
 
WCBos13 intermediate workshop
WCBos13 intermediate workshopWCBos13 intermediate workshop
WCBos13 intermediate workshop
Boston WordPress
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
Domestic Equity Studio
 
WordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and PluginsWordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
Joe Querin
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.org
ThemeHorse
 
WP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and PluginsWP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and Plugins
Joe Querin
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
Laura Hartwig
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
stephy123123
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
stephy123123
 
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPressWhat Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
East Bay WordPress Meetup
 
Getting into WordPress
Getting into WordPressGetting into WordPress
Getting into WordPress
Clare Parkinson
 

Similar to Child Theme Basics & Twenty Seventeen Theme Demo (20)

Child themes
Child themesChild themes
Child themes
 
Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child Themes
 
Should you use WordPress for your non-profit websites?
Should you use WordPress for your non-profit websites?Should you use WordPress for your non-profit websites?
Should you use WordPress for your non-profit websites?
 
How To Choose A Theme
How To Choose A ThemeHow To Choose A Theme
How To Choose A Theme
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
 
WordPress Intermediate Workshop
WordPress Intermediate WorkshopWordPress Intermediate Workshop
WordPress Intermediate Workshop
 
Minimize website page loading time – 20+ advanced SEO tips
Minimize website page loading time – 20+ advanced SEO tipsMinimize website page loading time – 20+ advanced SEO tips
Minimize website page loading time – 20+ advanced SEO tips
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get thereOptimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get there
 
Getting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for BeginnersGetting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for Beginners
 
Child Theme Frameworks
Child Theme FrameworksChild Theme Frameworks
Child Theme Frameworks
 
WCBos13 intermediate workshop
WCBos13 intermediate workshopWCBos13 intermediate workshop
WCBos13 intermediate workshop
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
WordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and PluginsWordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.org
 
WP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and PluginsWP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and Plugins
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
 
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPressWhat Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
 
Getting into WordPress
Getting into WordPressGetting into WordPress
Getting into WordPress
 

Recently uploaded

Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
tobbk6s8
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
wkip62b
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
bz42w9z0
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
k4krdgxx
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
etls06p8
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
yqyquge
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
21uul8se
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
w26izoeb
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
i990go7o
 
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptxTOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
BAWAALEX1
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 

Recently uploaded (20)

Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
 
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptxTOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 

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