The Genesis Framework: ooks and Filters
for Theme DevelopmentH
Genesis Frameworka premium theme from StudioPress.com
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
How do Genesis hooks
work?
“It’s like making sites out of Lego”
~ Dee Teal, thewebprincess.com
Action Hooks Help Us Move Blocks of Content
Action hooks can do this…
Before After
Hooks in Action
1. Remove from current position
2. Add to new position
Action hooks in child theme
PHP code in functions.php
CSS code in style.css
Filter Hooks Help Us Change Pieces of Content
Filter hooks can do this…
Before After
Filters in Action
1. Hook into function via a filter
2. Make changes
Why use Genesis hooks?
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
Let’s practice using hooks!
Before After
Switch Sidebar on ‘Books’ Category
http://sarah-moyer.com/wclanc2015/category/books
1
PHP code in functions.php
Switch Sidebar on ‘Books’ Category
Switch Sidebar on ‘Books’ Category
http://sarah-moyer.com/wclanc2015/category/books
Reposition the Entry Meta2
PHP code in functions.php
CSS code in style.css
Reposition the Entry Meta
Reposition the Entry Meta
Before After
Customize the Entry Meta3
PHP code in functions.php
Customize the Entry Meta
Customize the Entry Meta
Before After
Reposition Page & Post Titles
4
PHP code in functions.php
Reposition Page & Post Titles
Reposition Page & Post Titles
PHP code in functions.php
Reposition Page & Post Titles
CSS code in style.css
Reposition Page & Post Titles
Add Custom Schema5
HTML Inspect View in Chrome
PHP code in functions.php
Add Custom Schema
Add a Widget Area6
PHP code in functions.php
Add a Widget Area
Appearance > Widgets
Appearance > Widgets
Add a Widget Area
PHP code in functions.php
PHP code in functions.php
Add a Widget Area
Add a Widget Area
List Posts Tagged ‘genesis’7
PHP code in functions.php
List Posts Tagged ‘genesis’
CSS code in style.css
List Posts Tagged ‘genesis’
List Posts Tagged ‘genesis’
Create a Landing Page8
Before After
Page Template in themes/wclanc2015/page_landing.php
Create a Landing Page
Choose Template: Landing
Create a Landing Page
Resources to Get Started
Genesis Visual Hook Guide http://genesistutorials.com/visual-hook-guide/
Plugins from WordPress.org plugin repository
• Visual Hook Guide pluginsee hooks in your own theme
• Genesis Simple Hooks plugineasy access to Genesis hooks
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
Additional Resources
• SLIDE 2 - Buy Genesishttp://studiopress.com/themes
• SLIDE 3 - Building Child Themeshttp://my.studiopress.com/docs/building-child-themes/ (members only)http://studiopress.com/free-themes/sample
• SLIDE 18 - Conditional Tagshttp://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 Listhttp://schema.org/docs/full.html
• SLIDE 39 - Customize WordPress Queryhttp://www.billerickson.net/custom-wordpress-queries/
• Search for WordPress Hookshttps://developer.wordpress.org/reference/
Thanks for listening!
Any questions?
sarah-moyer.com linkedin.com/in/sarahmoyer be.net/moyer