Seattle WordPress Developer's Meetup

Building Child Themes
March 20th, 2012

 

Follow along:
http://iandunn.name/wp-3-20-2012

(use arrow keys to navigate)

Intended Audience

  • Junior Developers
  • Web Designers
  • Hobbyists

Interaction

  • Speak up with comments, advice, tips, etc
  • Ask questions if anything's unclear

Overview

  • Different Approaches to Themes
  • Functionality Plugins
  • Picking the Right Parent Theme
  • Building a Child Theme
  • Common Tasks
  • Lab

Different Approaches

  • Build a custom theme from scratch
  • Buy a premium theme
  • Buy a premium theme and customize it

More: Choosing the Right WordPress Design Strategy for your Website

Child Themes

  • Very similar to regular themes
  • Lay on top of parent theme
  • Can make non-destructive edits

More: Child Themes Codex page

Child Themes

Directory Structure

Child Themes

Stylesheet Header

Why Not Just Edit the Parent Theme?

  • Upgrades overwrites changes
  • Separates you from clutter

Functionality Plugins

  • Small, custom plugin to hold random behavioral snippets
  • Won't lose them when switching themes

More: Create a Functionality Plugin Instead of Using Functions.php

Choosing the Right Parent theme

Building a child theme starts with picking the right parent theme.

Look for:

  • Close to desired look/features
  • All functions are pluggable
  • Include() files from child directory if they exist

Choosing the Right Parent theme

Building a child theme starts with picking the right parent theme.

Look for:

  • Comes with the PSDs
  • Code/markup/styles are readable
  • Responsive layout

Choosing the Right Parent theme

Avoid:

  • Packaged as parent/child instead of a single theme
  • Bloated with useless eye-candy
  • CSS instead of tables

Choosing the Right Parent theme

What do you normally look for?

Theme Shops I Like

More: List of shops, marketplaces, ranking sites, etc

How to Build a Child Theme

  • Create new directory in wp-content/themes
  • Create style.css with template header
  • @import parent CSS (optional)
    • Must be before other CSS rules

How to Build a Child Theme

  • Create functions.php (optional)
    • Will run before parent's functions.php
  • Override parent's template files (optional)

Paths and URLs

Common Examples

  • New templates
  • Overriding existing templates
  • CSS tweaks

Common Examples

  • Removing bloat
    • Make sure remove_action() runs after parent's add_action()
  • Load jQuery from Google's CDN
  • Removing spam links in footer

Common Examples

What tweaks do you normally make?

Summary

  • Build on top of parent themes
  • Make non-destructive edits
  • Start with a good parent theme
  • Add the template tag to style.css

Summary

  • functions.php runs before parent's
  • Visual changes are appropriate, but behavioral changes are for functionality plugins

Additional Resources

Q&A


 

Lab

Download files from:
http://iandunn.name/wp-3-20-2012-lab.zip

Remember that WiFi is insecure, FTP sends passwords in cleartext, etc