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

1. Child Themes
Understanding Child Themes in WordPress
16 March 2020

2. Edmund Chan
WordPress Engineer @ XWP
edmund.chan@xwp.coedmundcwm.com @edmundcwm/ /

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. The parent and child theme relationship
What is a Child Theme

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. What is a Child Theme
Full Theme Full Theme

7. What is a Child Theme
Child theme Parent themeFull theme

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. What is a Child Theme
File directory

10. What is a Child Theme
Parent theme Child theme

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. What is a Child Theme
footer.php (parent)

13. What is a Child Theme
footer.php (parent)
footer.php (child)

14. Why use a Child Theme?

15. Why use a Child Theme
Problem: No easy way of updating themes without losing
all the custom styling and changes.

16. Why use a Child Theme

17. Why use a Child Theme
- Allows you to safely modify the Parent theme

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. 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. 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. When to use a Child Theme?

22. When to use a Child Theme
If you are:
- constantly adding new functions or modifying styles

23. When to use a Child Theme
If you are:
- constantly adding new functions or modifying styles
- introducing larger changes like template overrides

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. How to create a Child Theme?

26. How to create a Child Theme
With a plugin - Child Theme Generator

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. How to create a Child Theme
Without a plugin
2. Create a “style.css” file (required)

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. How to create a Child Theme
Without a plugin
4. Create a “functions.php”

31. How to create a Child Theme
Without a plugin
5. Enqueue parent and child theme styles

32. How to create a Child Theme
Activate Child Theme

33. DEMO

34. Edmund Chan
WordPress Engineer @ XWP
edmund.chan@xwp.coedmundcwm.com @edmundcwm/ /