24

Intro to WordPress Child Themes

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Intro to WordPress Child Themes
Page 2: Intro to WordPress Child Themes

What the heck is a child theme?

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

- The WordPress Codex

Page 3: Intro to WordPress Child Themes

What can I use a child theme for?• Customize the parent site design• Add in additional functionality• Save a bunch of time

Page 4: Intro to WordPress Child Themes

Why would I use a child theme?• Update the parent theme without losing your

customizations• Did I mention the part about saving time?

Page 5: Intro to WordPress Child Themes

Example of a child theme

Page 6: Intro to WordPress Child Themes

Example of a child theme

Page 7: Intro to WordPress Child Themes

Example of a child theme

Page 8: Intro to WordPress Child Themes

Example of a child theme

Page 9: Intro to WordPress Child Themes

Example of a child theme

Page 10: Intro to WordPress Child Themes

Example of a child theme

Page 11: Intro to WordPress Child Themes

What do I need to get started?• Choose a parent theme

(check out twentyten & twentyeleven)

• A new folder in /wp-content/themes/• A CSS file in your new theme

Page 12: Intro to WordPress Child Themes

Keep in mind…• Your child theme can contain as many or as few files

as you want• Files in your child theme folder override files in the

parent theme folder• Adding a functions.php will add-to rather than

override functions.php from your parent theme

Page 13: Intro to WordPress Child Themes

The CSS file

* Template = folder name of the parent theme

Page 14: Intro to WordPress Child Themes

Themes page

For bonus points, add a screenshot.png fileto your child theme folder. 300 x 225 pixels

Page 15: Intro to WordPress Child Themes

Overriding style elements

Parent Theme Child Theme

Page 16: Intro to WordPress Child Themes

Overriding style elements

Page 17: Intro to WordPress Child Themes

Overriding files

Parent Theme Child Theme

Page 18: Intro to WordPress Child Themes

Overriding files

Page 19: Intro to WordPress Child Themes

Pluggable functions• A function in a parent theme wrapped in

function_exists() can be overridden by defining it in your child theme’s functions.php file

Page 20: Intro to WordPress Child Themes

Overriding functionsParent Theme

Child Theme

Page 21: Intro to WordPress Child Themes

Theme Frameworks

• Genesis – studiopress.com• Thematic – themeshaper.com• Hybrid – themehybrid.com

“A Theme framework is a Theme designed to be a flexible foundation for quicker WordPress development, usually serving as a robust Parent Theme for Child Themes.”

- The WordPress Codex

Page 22: Intro to WordPress Child Themes

Resources• http://codex.wordpress.org/Theme_Development• http://codex.wordpress.org/Child_Themes• http://codex.wordpress.org/images/1/18/

Template_Hierarchy.png• http://codex.wordpress.org/Plugin_API

• http://aaron.jorb.in/thirtyten/

Page 23: Intro to WordPress Child Themes

Questions?

Page 24: Intro to WordPress Child Themes