child themes in wordpress

slideshare.net/jdcohan

Child Themes

Get Started On The Right Foot With Creating

Jeff Cohan, nSiteful Web Builders

WordCamp Atlanta 2012

@jdcohan

[email protected]


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*


How?

• 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