Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Understanding Child Themes in WordPress

38 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

×