26
Dipping Into Child Themes https://joseph-dickson.com Twitter: @joe4ska https://joseph-dickson.com/dipping-into-child-themes/

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

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

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

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

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

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

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

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
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
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
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
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
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

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
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

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

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

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

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

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

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
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
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

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

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

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

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

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

Make it your theme!