Child Themes in WordPress


Published on

For WordCamp ATL 2012

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Child Themes in WordPress

  1. 1. Child Themes Get Started On The Right Foot With Creating Jeff Cohan, nSiteful Web Builders WordCamp Atlanta 2012 @jdcohan [email_address]
  2. 2. Survey <ul><li>By a show of hands, who... </li></ul><ul><ul><li>has given presentations on child themes? </li></ul></ul><ul><ul><li>has created and used child themes? </li></ul></ul><ul><ul><li>understands child themes enough to explain what they are? </li></ul></ul>
  3. 3. What is a WordPress Theme? <ul><li>A collection of files that work together to determine the look and presentation (and functionality) of a WordPress site. </li></ul><ul><li>Consists of: </li></ul><ul><ul><li>style sheet(s) </li></ul></ul><ul><ul><li>template file(s) </li></ul></ul><ul><ul><li>images </li></ul></ul><ul><ul><li>code files (functions) </li></ul></ul>
  4. 4. What is a Child Theme? <ul><li>Official Definition: </li></ul><ul><ul><li>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. </li></ul></ul><ul><li>Inherit = either or both of: </li></ul><ul><ul><li>supplement </li></ul></ul><ul><ul><li>override </li></ul></ul>
  5. 5. WHY Use Child Themes? <ul><li>Security: </li></ul><ul><ul><li>Avoid screwing up a perfectly good theme, crashing site </li></ul></ul><ul><li>Maintainability: </li></ul><ul><ul><li>Preserves your modifications when parent theme is updated </li></ul></ul><ul><li>Self-Education: </li></ul><ul><ul><li>Helps you learn WordPress' innards (clone and go) </li></ul></ul>
  6. 6. WHEN to Use Child Themes: <ul><li>As soon as you want to modify the site's look, presentation, or functionality </li></ul><ul><li>I.e., ALWAYS! </li></ul><ul><li>Examples: </li></ul><ul><ul><li>change color scheme </li></ul></ul><ul><ul><li>change &quot;read more&quot; </li></ul></ul><ul><ul><li>match blog to non-WP site </li></ul></ul><ul><ul><li>change footer contents* </li></ul></ul>
  7. 7. How? <ul><li>Create a directory under /wp-content/themes/ </li></ul><ul><ul><li>as sibling directory of parent (yeah: counterintuitive) </li></ul></ul><ul><li>Upload a properly-formatted (?) stylesheet. </li></ul><ul><li>Voila. Honest. Voila. </li></ul>
  8. 8. Child Theme Components <ul><li>Required: </li></ul><ul><ul><li>Style Sheet: style.css (S and/or O) </li></ul></ul><ul><li>Optional: </li></ul><ul><ul><li>Template files (O) </li></ul></ul><ul><ul><li>functions.php (S) </li></ul></ul><ul><ul><li>other files (images, JavaScript, php includes) </li></ul></ul><ul><li>REALLY optional: </li></ul><ul><ul><li>screenshot.png (300x225) </li></ul></ul>
  9. 9. Style Sheet (style.css) Format <ul><li>Required Commented Information Block (at top) </li></ul><ul><ul><li>Required elements: </li></ul></ul><ul><ul><ul><li>Theme Name </li></ul></ul></ul><ul><ul><ul><li>Template (parent theme name) </li></ul></ul></ul><ul><ul><li>Optional elements: </li></ul></ul><ul><ul><ul><li>Theme URI, Description, Author URI, Author, Version </li></ul></ul></ul><ul><li>@import directives (optional) </li></ul>
  10. 10. Sample Child Style Sheet
  11. 11. Pecking Order Quick Review <ul><li>style.css: supplements and/or overrides </li></ul><ul><ul><li>The Cascade: weight, origin, specificity, order </li></ul></ul><ul><li>Template Files: override </li></ul><ul><ul><li>understand Template Hierarchy </li></ul></ul><ul><li>functions.php: supplements - overridable! </li></ul><ul><ul><li>child loads first </li></ul></ul><ul><ul><li>use function names NOT used by parent theme* </li></ul></ul>
  12. 12. Mods Through CSS <ul><li>Options: </li></ul><ul><ul><li>Override any rule from parent* </li></ul></ul><ul><ul><ul><li>*beware of specificity </li></ul></ul></ul><ul><ul><li>Add rule(s) for new components </li></ul></ul><ul><li>Let's change that footer with CSS: </li></ul><ul><ul><li>#footer { background: url(images/cclogos.png) no-repeat right center transparent;} </li></ul></ul>
  13. 13. Mods Through Templates <ul><li>Building Blocks: </li></ul><ul><ul><li>Template Tags </li></ul></ul><ul><ul><li>Function Reference </li></ul></ul><ul><ul><li>Template Hierarchy </li></ul></ul>
  14. 14. WordPress Template Hierarchy
  15. 15. Mods Through Templates <ul><li>Options: </li></ul><ul><ul><li>replace parent template </li></ul></ul><ul><ul><ul><li>e.g., customized home.php </li></ul></ul></ul><ul><ul><li>add specific template lacking in parent </li></ul></ul><ul><ul><ul><li>e.g., tag.php instead of archives.php </li></ul></ul></ul><ul><ul><li>add custom template </li></ul></ul><ul><ul><ul><li>e.g., custom php code </li></ul></ul></ul><ul><li>Let's change that footer with template... </li></ul>
  16. 16. Mods Through Functions <ul><li>Building Blocks: </li></ul><ul><ul><li>Function Reference </li></ul></ul><ul><ul><li>Hooks (Actions & Filters) </li></ul></ul><ul><li>Examples: </li></ul><ul><ul><li>favicon link </li></ul></ul><ul><ul><li>change the &quot;read more&quot; text </li></ul></ul><ul><ul><li>complex scripts </li></ul></ul>
  17. 17. Favicon via Function
  18. 18. Read More via Function
  19. 19. All of the Above <ul><li>Custom Template, Custom Scripts, Custom CSS </li></ul>
  20. 20. Add Blog to Existing Site <ul><li>client might love existing site </li></ul><ul><li>client might not have the budget to redo site in WordPress </li></ul><ul><li>client just wants a blog that integrates seamlessly </li></ul>
  21. 21. Eaton Academy Main Site
  22. 22. Eaton Academy Blog
  23. 23. Lessons In Your Home Main Site
  24. 24. Lessons In Your Home Blog
  25. 25. Starkers! <ul><li>The completely naked theme for WordPress </li></ul><ul><li>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. </li></ul><ul><li> </li></ul>
  26. 26. Why Starkers? <ul><li>What's Removed: </li></ul><ul><ul><li>non-semantic presentational class names (class=&quot;alignleft&quot;) </li></ul></ul><ul><ul><li>non-semantic HTML elements (<hr />, <br /> </li></ul></ul><ul><ul><li>unnecessary elements (<div class=&quot;entry&quot;>) </li></ul></ul><ul><li>What's Kept: </li></ul><ul><ul><li>IDs to preserve functionality (<h3 id=&quot;respond&quot;>) </li></ul></ul>
  27. 27. Wait for it...
  28. 28. Resources
  29. 29. WordPress Function Reference
  30. 30. WordPress Template Tags
  31. 31. PHP.NET
  32. 32. PHPXref of WP Trunk (Yoast)
  33. 33. WordPress Answers - Stack Exchange
  34. 34. LinkedIn WordPress Group
  35. 35. Color Scheme Designer
  36. 36. Digging Into WordPress
  37. 37. CSS: The Definitive Guide 3rd Edition
  38. 38. TopStyle
  39. 39. Firebug