Successfully reported this slideshow.
Your SlideShare is downloading. ×

Understanding Child Themes in WordPress

Understanding Child Themes in WordPress

Download to read offline

Presentation slides for the 16 Mar 2020 WordPress Singapore Meet-up. Visit https://www.edmundcwm.com/presentations/ to view other presentation resources.

Presentation slides for the 16 Mar 2020 WordPress Singapore Meet-up. Visit https://www.edmundcwm.com/presentations/ to view other presentation resources.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Understanding Child Themes in WordPress

  1. 1. Child Themes Understanding Child Themes in WordPress 16 March 2020
  2. 2. Edmund Chan WordPress Engineer @ XWP edmund.chan@xwp.coedmundcwm.com @edmundcwm/ /
  3. 3. - What is a Child Theme - Why use a Child Theme - When to use a Child Theme - How to create a Child Theme - Demo Agenda
  4. 4. The parent and child theme relationship What is a Child Theme
  5. 5. Parent theme - A full theme consisting of all required files/templates for a theme to work - Becomes a parent theme if declared by a child theme - E.g., TwentyTwenty, GeneratePress, Underscores, Astra What is a Child Theme
  6. 6. What is a Child Theme Full Theme Full Theme
  7. 7. What is a Child Theme Child theme Parent themeFull theme
  8. 8. Child theme - A theme that is intended to work with the parent theme - Inherits the parent theme’s look and functions - Changes only parts that you want to be different - Cannot work without a parent theme What is a Child Theme
  9. 9. What is a Child Theme File directory
  10. 10. What is a Child Theme Parent theme Child theme
  11. 11. What is a Child Theme Parent theme Child theme Any file (except functions.php) added to them child theme will override the same file in the parent theme
  12. 12. What is a Child Theme footer.php (parent)
  13. 13. What is a Child Theme footer.php (parent) footer.php (child)
  14. 14. Why use a Child Theme?
  15. 15. Why use a Child Theme Problem: No easy way of updating themes without losing all the custom styling and changes.
  16. 16. Why use a Child Theme
  17. 17. Why use a Child Theme - Allows you to safely modify the Parent theme
  18. 18. Why use a Child Theme - Allows you to safely modify the Parent theme - Speeds up development time i.e., build on something that already exists
  19. 19. Why use a Child Theme - Allows you to safely modify the Parent theme - Speeds up development time i.e., build on something that already exists - Updates on parent theme will flow seamlessly into child theme
  20. 20. Why use a Child Theme - Allows you to safely modify the Parent theme - Speeds up development time i.e., build on something that already exists - Updates on parent theme will flow seamlessly into child theme - Great way to learn about how themes work in WP
  21. 21. When to use a Child Theme?
  22. 22. When to use a Child Theme If you are: - constantly adding new functions or modifying styles
  23. 23. When to use a Child Theme If you are: - constantly adding new functions or modifying styles - introducing larger changes like template overrides
  24. 24. When to use a Child Theme If you are: - constantly adding new functions or modifying styles - introducing larger changes like template overrides - not building a theme from scratch
  25. 25. How to create a Child Theme?
  26. 26. How to create a Child Theme With a plugin - Child Theme Generator
  27. 27. How to create a Child Theme Without a plugin 1. Create a new folder in the themes directory • Best practice to use the same name as parent and appending “-child”
  28. 28. How to create a Child Theme Without a plugin 2. Create a “style.css” file (required)
  29. 29. How to create a Child Theme Without a plugin 3. Insert required header comment at the top of “style.css” • “Template” must match the name of the parent theme directory
  30. 30. How to create a Child Theme Without a plugin 4. Create a “functions.php”
  31. 31. How to create a Child Theme Without a plugin 5. Enqueue parent and child theme styles
  32. 32. How to create a Child Theme Activate Child Theme
  33. 33. DEMO
  34. 34. Edmund Chan WordPress Engineer @ XWP edmund.chan@xwp.coedmundcwm.com @edmundcwm/ /

×