Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Genesis Framework: Hooks & Filters for Theme Development

571 views

Published on

Learn how to use the action and filter hooks that the Genesis Framework gives you for your WordPress theme, such as the following:

- switch out the sidebar on certain pages
- customize post meta
- reposition page and post titles
- add custom schema
- add a widget area
- list posts with a certain tag on a WP page
- create a streamlined landing page

Published in: Technology
  • Be the first to comment

The Genesis Framework: Hooks & Filters for Theme Development

  1. 1. The Genesis Framework: ooks and Filters 
 for Theme Development H
  2. 2. Genesis Framework a premium theme from StudioPress.com
  3. 3. Why I Like Genesis • WordPress-like: uses child themes, template hierarchy, hooks, css in stylesheet • Adds 50+ action and filter hooks to add and remove content • Well-documented child themes that you can actually read through and learn how Genesis works • Adds only 2 settings pages in admin • Great community of searchable snippets, tutorials, and forums where you can give and receive help
  4. 4. How do Genesis hooks work?
  5. 5. “It’s like 
 making sites 
 out of Lego” 
 ~ Dee Teal, thewebprincess.com
  6. 6. Action Hooks Help Us Move Blocks of Content
  7. 7. Action hooks can do this… Before After
  8. 8. Hooks in Action 1. Remove from current position 
 
 
 
 2. Add to new position
  9. 9. Action hooks in child theme PHP code in functions.php 
 CSS code in style.css
  10. 10. Filter Hooks Help Us Change Pieces of Content
  11. 11. Filter hooks can do this… Before After
  12. 12. Filters in Action 1. Hook into function via a filter 
 
 
 
 2. Make changes
  13. 13. Why use Genesis hooks?
  14. 14. Use Genesis Hooks to… • Change the structure of your website • Change the HTML output • Customize the loop • Add a new widget area • Insert ads or other content 
 in specific places
  15. 15. Let’s practice using hooks!
  16. 16. Before After Switch Sidebar 
 on ‘Books’ Category http://sarah-moyer.com/wclanc2015/category/books 1
  17. 17. PHP code in functions.php Switch Sidebar on ‘Books’ Category
  18. 18. Switch Sidebar on ‘Books’ Category http://sarah-moyer.com/wclanc2015/category/books
  19. 19. Reposition 
 the Entry Meta 2
  20. 20. PHP code in functions.php 
 
 CSS code in style.css Reposition the Entry Meta
  21. 21. Reposition the Entry Meta
  22. 22. Before After Customize the Entry Meta 3
  23. 23. PHP code in functions.php Customize the Entry Meta
  24. 24. Customize the Entry Meta
  25. 25. Before After Reposition 
 Page & Post Titles 4
  26. 26. PHP code in functions.php Reposition Page & Post Titles
  27. 27. Reposition Page & Post Titles
  28. 28. PHP code in functions.php Reposition Page & Post Titles CSS code in style.css
  29. 29. Reposition Page & Post Titles
  30. 30. Add Custom Schema5 HTML Inspect View in Chrome
  31. 31. PHP code in functions.php Add Custom Schema
  32. 32. Add a Widget Area6
  33. 33. PHP code in functions.php Add a Widget Area Appearance > Widgets
  34. 34. Appearance > Widgets Add a Widget Area PHP code in functions.php
  35. 35. PHP code in functions.php Add a Widget Area
  36. 36. Add a Widget Area
  37. 37. List Posts 
 Tagged ‘genesis’ 7
  38. 38. PHP code in functions.php List Posts Tagged ‘genesis’
  39. 39. CSS code in style.css List Posts Tagged ‘genesis’
  40. 40. List Posts Tagged ‘genesis’
  41. 41. Create a Landing Page 8 Before After
  42. 42. Page Template in themes/wclanc2015/page_landing.php
  43. 43. Create a Landing Page Choose Template: Landing
  44. 44. Create a Landing Page
  45. 45. Resources to Get Started
  46. 46. Genesis Visual Hook Guide http://genesistutorials.com/visual-hook-guide/
  47. 47. Plugins from WordPress.org plugin repository • Visual Hook Guide plugin
 see hooks in your own theme • Genesis Simple Hooks plugin
 easy access to Genesis hooks
  48. 48. Tutorials, Snippets, & More from WordPress.org plugin repository • http://studiopress.com/snippets • http://studiopress.com/tutorials • http://studiopress.com/resources 
 (tuts by the community) • http://studiopress.com/forums
  49. 49. Additional Resources • SLIDE 2 - Buy Genesis
 http://studiopress.com/themes • SLIDE 3 - Building Child Themes
 http://my.studiopress.com/docs/ building-child-themes/ (members only)
 http://studiopress.com/free-themes/ sample • SLIDE 18 - Conditional Tags
 http://codex.wordpress.org/ Conditional_Tags • SLIDE 24 - PHP Datetime Formats 
 http://php.net/manual/en/ datetime.formats.date.php • SLIDE 24 - Genesis Shortcode Reference 
 http://my.studiopress.com/docs/shortcode- reference/ (members only) • SLIDE 31 - Schema.org Full List
 http://schema.org/docs/full.html • SLIDE 39 - Customize WordPress Query
 http://www.billerickson.net/custom- wordpress-queries/ • Search for WordPress Hooks
 https://developer.wordpress.org/reference/
  50. 50. Thanks 
 for listening! Any questions? sarah-moyer.com linkedin.com/in/sarahmoyer be.net/moyer

×