Meetup child-themes

1,086 views

Published on

  • Be the first to comment

  • Be the first to like this

Meetup child-themes

  1. 1. What is a Child Theme <ul><li>Installed and activated like any other theme
  2. 2. Dependent on a parent theme for elements not found in the child theme
  3. 3. Only style.css is required
  4. 4. Can be used to re-skin a theme
  5. 5. Can add functionality
  6. 6. Can over-ride parts of the parent theme </li></ul>
  7. 7. Why Use a Child Theme <ul><li>Future-proof your customizations
  8. 8. Rapid development
  9. 9. Build upon a consistent codebase
  10. 10. Understanding of PHP and WordPress themeing is helpful but not required for basic child themes </li></ul>
  11. 11. Child Theme Files <ul><li>WordPress template hierarchy
  12. 12. style.css – Only Child theme file is used.
  13. 13. functions.php – Both parent and child files always run.
  14. 14. Other files – Child theme checked first then Parent theme. First file found runs. Specific -> General </li></ul>
  15. 15. Making a Child Theme <ul><li>Get to Know your Parent Theme
  16. 16. Create style.css
  17. 17. Page Templates
  18. 18. Overriding Parent Theme Files
  19. 19. Demo site : http://wpthemedemos.com </li></ul>
  20. 20. Required in style.css /* Theme Name: Twenty Ten Child Demo Description: A Child Theme for Twenty Ten for Demonstration. Theme URI: http://daisyolsen.com Author: Daisy Olsen Author URI: http://daisyolsen.com Template: twentyten Version: 1.0 */
  21. 21. style.css <ul><li>Option #1 – import style.css from parent theme @import url('../twentyten/style.css');
  22. 22. Option #2 – Copy/Paste entire style.css from parent theme into child theme style.css
  23. 23. Option #3 – Build new style.css from scratch </li></ul>
  24. 24. Hooks <ul><li>Twenty Ten has one hook built in for adding additional content. WordPress also includes some hooks that can be used. </li></ul>do_action( 'twentyten_credits' ); <ul><li>Think of a hook as an insertion point. </li></ul>add_action('twentyten_credits', 'my_credits'); function my_credits() { echo 'This is my credit line using a function'; }
  25. 25. Replace Theme Template Files <ul><li>Our Demo Child theme replaces the footer.php file with a customized version which changes the default footer credits with customized ones.
  26. 26. If a template file exists in the child theme the parent theme file is ignored. </li></ul>
  27. 27. Template Parts <ul><li>New to WordPress 3.0
  28. 28. Twenty Ten allows you to modify the loop by creating a new file in the child theme with a modified version of loop.php
  29. 29. We will modify the way the category archive displays with loop-category.php </li></ul>
  30. 30. Theme Frameworks <ul><li>Built with the intention of being modified via child theme
  31. 31. Extensive Action/Filter Capabilities
  32. 32. Active Development
  33. 33. Popular Parent/Child Frameworks </li><ul><li>Hybrid
  34. 34. Thematic
  35. 35. Genesis (Commercial) - StudioPress
  36. 36. Builder (Commercial) - iThemes </li></ul></ul>
  37. 37. Resources <ul><li>Codex: Child Themes
  38. 38. Aaron Jorbin's Guide
  39. 39. Understanding Child Themes
  40. 40. Modify WordPress Themes The Smart Way </li></ul>

×