Upload
sara-cannon
View
110
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
by sara cannon / sara-cannon.com / follow @saracannon
Saturday, August 21, 2010
LOVE A THEME BUT WANT TO
CUSTOMIZE IT?No Problem!
Saturday, August 21, 2010
CHILD THEMES TO THE RESCUE!
Saturday, August 21, 2010
WHAT IS A CHILD THEME?(and why should I use it?)
Saturday, August 21, 2010
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.
WHAT IS A CHILD THEME?
WORDPRESS CODEX:
Saturday, August 21, 2010
• Add to the theme’s functionality
• Modify CSS/Design
• Add Custom Templates / Post Types
WHAT IS A CHILD THEME?
USE A CHILD THEME TO:
Saturday, August 21, 2010
EXAMPLES OF CHILD THEMES
Saturday, August 21, 2010
TWENTYTEN
Saturday, August 21, 2010
SPEAKY BY WPBEGINNER
PARENT THEME: TWENTYTEN
Saturday, August 21, 2010
HALE COUNTY HUMANE SOCIETY BY DAN GAVIN
PARENT THEME: TWENTYTEN
Saturday, August 21, 2010
FD LAWFIRM BY SCOUT BRANDING
PARENT THEME: TWENTYTEN
Saturday, August 21, 2010
WHY IS CHILD THEMING AN IMPORTANT PRACTICE?
Saturday, August 21, 2010
• Updates to the Parent without overwriting CSS
wp_list_pages(); to wp_nav_menu();
• Parental updates = longevity
• Saves time in the long run
WHY CHILD THEME?
Saturday, August 21, 2010
HOW DO I MAKE MY OWN CHILD THEME?
Saturday, August 21, 2010
• The parent theme in the theme folder (twentyten is already installed in 3.0!)
• A new directory in the theme folder for your child theme to live
• Your new child theme CSS file
MAKING A CHILD THEME
IT IS AS SIMPLE AS:
Saturday, August 21, 2010
TWENTYTEN
Saturday, August 21, 2010
• Make a new CSS File
• Edit the CSS header to say:
• IMPORT the Parent’s CSS file
MAKING A CHILD THEME
CHILD THEME CSS FILE:
Saturday, August 21, 2010
• Any changes to the new CSS child theme file overwrites any previous selectors
MAKING A CHILD THEME
twentytenCSS:
twentytenchild CSS:
Saturday, August 21, 2010
MAKING A CHILD THEME
Saturday, August 21, 2010
• Keep in mind CSS Specificity
• More specific = WIN!
• Firebug Firefox Plugin
MAKING A CHILD THEME
CSS TIPS:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Saturday, August 21, 2010
• Unlike style.css... functions.php does NOT overwrite functions but ADDS to it.
• Smart choice of a parent theme will have pluggable functions
• Or hooks you can remove with remove_action() or remove_filter()
MAKING A CHILD THEME
CHILD THEME FUNCTIONS FILE:
Saturday, August 21, 2010
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
by sara cannon / sara-cannon.com / follow @saracannon
Saturday, August 21, 2010