Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress...
Transcript of Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress...
![Page 1: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/1.jpg)
Dipping Into Child Themes● https://joseph-dickson.com● Twitter: @joe4ska
● https://joseph-dickson.com/dipping-into-child-themes/
![Page 2: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/2.jpg)
What is a Child Theme?
●Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*)
●A Child Theme inherits features from a Parent Theme
![Page 3: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/3.jpg)
Why should we use Child Themes?
● Parent Theme receives updates● Child Theme is untouched● Speed up development time*● Learn from other developers
![Page 4: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/4.jpg)
What is a Parent Theme?
![Page 5: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/5.jpg)
Getting Started
functions.phpstyle.css
![Page 6: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/6.jpg)
![Page 7: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/7.jpg)
![Page 8: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/8.jpg)
![Page 9: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/9.jpg)
![Page 10: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/10.jpg)
![Page 11: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/11.jpg)
CSS in Action
![Page 12: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/12.jpg)
![Page 13: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/13.jpg)
Advantages of CSS● Tweak typography, borders, color etc. ● Adjust negative space● Improve readability● Hide elements● Portability
![Page 14: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/14.jpg)
functions.php
● Add ‘plugin like’ support to a theme● Best used for theme specific
improvements● Add menus, specific plugin support
and adjustments to “functionality”
![Page 15: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/15.jpg)
Example: Open Graph Support
![Page 16: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/16.jpg)
Replace Google Fonts...
v
v
![Page 17: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/17.jpg)
With Self Hosted Fonts
![Page 18: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/18.jpg)
Template Hierarchy
● A Child Theme’s template will override the Parent Theme version
● Useful for small adjustments● Fantastic for introducing new
templates
![Page 19: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/19.jpg)
![Page 20: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/20.jpg)
![Page 21: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/21.jpg)
Template Hierarchy
● Add custom page templates● Customize archive templates● Create conditional templates
![Page 22: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/22.jpg)
Template Tags
● Used within templates to display information from the database
● Dynamically or otherwise customize your site
● https://codex.wordpress.org/Template_Tags
![Page 23: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/23.jpg)
Template Tag Examples
● the_title() ● get_the_title()
● the_excerpt() ● get_the_excerpt()
![Page 24: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/24.jpg)
Conditional tags
● Conditional Tags can be used in your Template files depending on what conditions are met
● https://codex.wordpress.org/Conditional_Tags
![Page 25: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/25.jpg)
Conditional Tags● is_home() ● is_front_page ● is_front_page()
and is_home()
● is_admin() ● has_tag() ● in_category()
![Page 26: Dipping Into Child Themes - WordCamp Los Angeles 2018 · Child Themes were introduced in WordPress 2.7 “Coltrane” (2008*) A Child Theme inherits features from a Parent Theme.](https://reader035.fdocuments.net/reader035/viewer/2022071101/5fdad12dbd073804645ba6ca/html5/thumbnails/26.jpg)
Make it your theme!