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