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