Child Themes in WordPress
Upcoming SlideShare
Loading in...5

Child Themes in WordPress



For WordCamp ATL 2012

For WordCamp ATL 2012



Total Views
Views on SlideShare
Embed Views



1 Embed 3 3



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Child Themes in WordPress Child Themes in WordPress Presentation Transcript

  • Child Themes Get Started On The Right Foot With Creating Jeff Cohan, nSiteful Web Builders WordCamp Atlanta 2012 @jdcohan [email_address]
  • 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
  • Read More via Function
  • All of the Above
    • Custom Template, Custom Scripts, Custom CSS
  • Add Blog to Existing Site
    • client might love existing site
    • client might not have the budget to redo site in WordPress
    • client just wants a blog that integrates seamlessly
  • Eaton Academy Main Site
  • Eaton Academy Blog
  • Lessons In Your Home Main Site
  • Lessons In Your Home Blog
  • Starkers!
    • The completely naked theme for WordPress
    • Free of all style, presentational elements, and non-semantic markup, Starkers is the perfect ‘blank slate’ for your projects, as it’s a stripped-back version of the ‘Twenty Ten’ theme that ships with WordPress.
  • Why Starkers?
    • What's Removed:
      • non-semantic presentational class names (class="alignleft")
      • non-semantic HTML elements (<hr />, <br />
      • unnecessary elements (<div class=&quot;entry&quot;>)
    • What's Kept:
      • IDs to preserve functionality (<h3 id=&quot;respond&quot;>)
  • Wait for it...
  • Resources
  • WordPress Function Reference
  • WordPress Template Tags
  • PHPXref of WP Trunk (Yoast)
  • WordPress Answers - Stack Exchange
  • LinkedIn WordPress Group
  • Color Scheme Designer
  • Digging Into WordPress
  • CSS: The Definitive Guide 3rd Edition
  • TopStyle
  • Firebug