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

Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

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

Page 1: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

by sara cannon / sara-cannon.com / follow @saracannon

Saturday, August 21, 2010

Page 2: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

LOVE A THEME BUT WANT TO

CUSTOMIZE IT?No Problem!

Saturday, August 21, 2010

Page 3: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

CHILD THEMES TO THE RESCUE!

Saturday, August 21, 2010

Page 4: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

WHAT IS A CHILD THEME?(and why should I use it?)

Saturday, August 21, 2010

Page 5: Customizing WordPress Themes / Child Themes - WordCamp Savannah 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

Page 6: Customizing WordPress Themes / Child Themes - WordCamp Savannah 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

Page 7: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

EXAMPLES OF CHILD THEMES

Saturday, August 21, 2010

Page 8: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

TWENTYTEN

Saturday, August 21, 2010

Page 9: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

SPEAKY BY WPBEGINNER

PARENT THEME: TWENTYTEN

Saturday, August 21, 2010

Page 10: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

HALE COUNTY HUMANE SOCIETY BY DAN GAVIN

PARENT THEME: TWENTYTEN

Saturday, August 21, 2010

Page 11: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

FD LAWFIRM BY SCOUT BRANDING

PARENT THEME: TWENTYTEN

Saturday, August 21, 2010

Page 12: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

WHY IS CHILD THEMING AN IMPORTANT PRACTICE?

Saturday, August 21, 2010

Page 13: Customizing WordPress Themes / Child Themes - WordCamp Savannah 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

Page 14: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

HOW DO I MAKE MY OWN CHILD THEME?

Saturday, August 21, 2010

Page 15: Customizing WordPress Themes / Child Themes - WordCamp Savannah 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

Page 16: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

TWENTYTEN

Saturday, August 21, 2010

Page 17: Customizing WordPress Themes / Child Themes - WordCamp Savannah 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

Page 18: Customizing WordPress Themes / Child Themes - WordCamp Savannah 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

Page 19: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

MAKING A CHILD THEME

Saturday, August 21, 2010

Page 20: Customizing WordPress Themes / Child Themes - WordCamp Savannah 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

Page 21: Customizing WordPress Themes / Child Themes - WordCamp Savannah 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

Page 22: Customizing WordPress Themes / Child Themes - WordCamp Savannah 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

Page 23: Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010

by sara cannon / sara-cannon.com / follow @saracannon

Saturday, August 21, 2010