Interested in customizing themes to fit your needs and design? We'll be using the new default WordPress theme Twentyten as a base for looking at best practices and how to's for theme customization. We will demonstrate how to make a child theme and what are some good standard practices that you should know to keep your new theme healthy and update-able in order to save you time as well as keep it relevant in the future.

1. by sara cannon / sara-cannon.com / follow @saracannon
Saturday, August 21, 2010

2. LOVE A THEME BUT WANT TO
CUSTOMIZE IT?
No Problem!
Saturday, August 21, 2010

3. CHILD THEMES TO THE RESCUE!
Saturday, August 21, 2010

4. WHAT IS A CHILD THEME?
(and why should I use it?)
Saturday, August 21, 2010

5. WHAT IS A CHILD THEME?
WORDPRESS CODEX:
A WordPress child theme is a theme that
inherits the functionality of another theme,
called the parent theme, and allows you to
modify, or add to, the functionality of that
parent theme.
Saturday, August 21, 2010

6. WHAT IS A CHILD THEME?
USE A CHILD THEME TO:
• Add to the theme’s functionality
• Modify CSS/Design
• Add Custom Templates / Post Types
Saturday, August 21, 2010

7. EXAMPLES OF CHILD THEMES
Saturday, August 21, 2010

8. TWENTYTEN
Saturday, August 21, 2010

9. SPEAKY BY WPBEGINNER
PARENT THEME: TWENTYTEN
Saturday, August 21, 2010

10. HALE COUNTY HUMANE SOCIETY BY DAN GAVIN
PARENT THEME: TWENTYTEN
Saturday, August 21, 2010

11. FD LAWFIRM BY SCOUT BRANDING
PARENT THEME: TWENTYTEN
Saturday, August 21, 2010

12. WHY IS CHILD THEMING AN
IMPORTANT PRACTICE?
Saturday, August 21, 2010

13. WHY CHILD THEME?
• Updates to the Parent without
overwriting CSS
wp_list_pages(); to wp_nav_menu();
• Parental updates = longevity
• Saves time in the long run
Saturday, August 21, 2010

14. HOW DO I MAKE MY OWN
CHILD THEME?
Saturday, August 21, 2010

15. MAKING A CHILD THEME
IT IS AS SIMPLE AS:
• The parent theme in the themein 3.0!)
(twentyten is already installed
folder
• A new directory in the theme folder for
your child theme to live
• Your new child theme CSS file
Saturday, August 21, 2010

16. TWENTYTEN
Saturday, August 21, 2010

17. MAKING A CHILD THEME
CHILD THEME CSS FILE:
• Make a new CSS File
• Edit the CSS header to say:
• IMPORT the Parent’s CSS file
Saturday, August 21, 2010

18. MAKING A CHILD THEME
• Anyoverwritesto theprevious selectors
file
changes
any
new CSS child theme
twentyten
CSS:
twentyten
child CSS:
Saturday, August 21, 2010

19. MAKING A CHILD THEME
Saturday, August 21, 2010

20. MAKING A CHILD THEME
CSS TIPS:
• Keep in mind CSS Specificity
http://www.smashingmagazine.com/2007/07/27/css-specificity-
things-you-should-know/
• More specific = WIN!
• Firebug Firefox Plugin
Saturday, August 21, 2010

21. MAKING A CHILD THEME
CHILD THEME FUNCTIONS FILE:
• Unlike style.css... functions.phpto it. NOT
overwrite functions but ADDS
does
• Smart choice of a parent theme will have
pluggable functions
• Or hooks you canor remove_filter()
remove_action()
remove with
Saturday, August 21, 2010

22. RESOURCES:
CODEX:
http://codex.wordpress.org/Child_Themes
CSS SPECIFICITY:
http://www.smashingmagazine.com/2007/07/27/css-specificity-
things-you-should-know/
MODIFYING THEMES:
http://themeshaper.com/modify-
wordpress-themes/
Saturday, August 21, 2010

23. by sara cannon / sara-cannon.com / follow @saracannon
Saturday, August 21, 2010