Child Themes in WordPress

transcript

slideshare.net/jdcohan

Child Themes

Get Started On The Right Foot With Creating

Jeff Cohan, nSiteful Web Builders

WordCamp Atlanta 2012

@jdcohan

jeff@nsiteful.com

Survey

• By a show of hands, who...– has given presentations on child themes?– has created and used child themes?– understands child themes enough to explain

what they are?

What is a WordPress Theme?

• A collection of files that work together to determine the look and presentation (and functionality) of a WordPress site.

• Consists of:– style sheet(s)– template file(s)– images– code files (functions)

What is a Child Theme?

• Official Definition:– 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.

• Inherit = either or both of:– supplement– override

WHY Use Child Themes?

• Security:– Avoid screwing up a perfectly good theme,

crashing site

• Maintainability:– Preserves your modifications when parent

theme is updated

• Self-Education:– Helps you learn WordPress' innards (clone

and go)

WHEN to Use Child Themes:

• As soon as you want to modify the site's look, presentation, or functionality

• I.e., ALWAYS!

• Examples:– change color scheme– change "read more"– match blog to non-WP site– change footer contents*

• Create a directory under/wp-content/themes/– as sibling directory of parent (yeah:

counterintuitive)

• Upload a properly-formatted (?) stylesheet.

• Voila. Honest. Voila.

Child Theme Components

• Required:– Style Sheet: style.css (S and/or O)

• Optional:– Template files (O)– functions.php (S)– other files (images, JavaScript, php includes)

• REALLY optional:– screenshot.png (300x225)

Style Sheet (style.css) Format

• Required Commented Information Block (at top)– Required elements:

• Theme Name• Template (parent theme name)

– Optional elements:• Theme URI, Description, Author URI, Author,

Version

• @import directives (optional)

Sample Child Style Sheet

Pecking Order Quick Review

• style.css: supplements and/or overrides– The Cascade: weight, origin, specificity, order

• Template Files: override– understand Template Hierarchy

• functions.php: supplements - overridable!– child loads first– use function names NOT used by parent

theme*

Mods Through CSS

• Options:– Override any rule from parent*

• *beware of specificity

– Add rule(s) for new components

• Let's change that footer with CSS:#footer { background: url(images/cclogos.png)

no-repeat right center transparent;}

Mods Through Templates

• Building Blocks:– Template Tags– Function Reference– Template Hierarchy

WordPress Template Hierarchy

Mods Through Templates

• Options:– replace parent template

• e.g., customized home.php

– add specific template lacking in parent• e.g., tag.php instead of archives.php

– add custom template• e.g., custom php code

• Let's change that footer with template...

Mods Through Functions

• Building Blocks:– Function Reference– Hooks (Actions & Filters)

• Examples:– favicon link– change the "read more" text– complex scripts

Favicon via Function

Child Themes in WordPress

Technology