Hook Elements (GP Premium)

warning

Hook Elements can run on every page. Keep output minimal and avoid untrusted scripts.

Hook Elements (GP Premium) Explained

Feature	Hook Element provides	Child theme provides
Placement	hook name + rules	stable hook map
Content	HTML/block/snippet	helper shortcodes
Styling	basic classes	CSS files + tokens

Why It Matters

• Hook Elements reduce the need to edit templates.
• Display rules keep output scoped.
• Child theme keeps styles and helpers versioned.

How It Works

GeneratePress fires a hook. GP Premium checks rules and renders the Hook Element content.

flowchart LR
  HOOK[do_action] --> RULES[Display rules]
  RULES -->|match| OUT[Hook Element output]
  RULES -->|no match| SKIP[No output]

Practical Walkthrough

Step 1: Locate Hook Points

locate-hook-points.sh

cd /var/www/html/wp-content/themes/generatepress
grep -R "do_action( 'generate_" -n inc templates | head -n 80

Step 2: Inventory Elements (Optional)

inventory-elements.sh

cd /var/www/html
wp post list --post_type=gp_elements --fields=ID,post_title,post_status --format=table 2>/dev/null || true

Step 3: Create a CSS Target for Element Output

wp-content/themes/generatepress-child/assets/css/elements.css

.gp-hook-element {
  padding: 12px 16px;
  background: #f1f5f9;
}

Step 4: Common Hook Locations (Cheat Sheet)

Region	Hook examples	Typical use
Header	generate_before_header, generate_after_header	notices, breadcrumbs
Content	generate_before_main_content, generate_after_entry_content	CTAs, banners
Footer	generate_footer, generate_after_footer	credits, links

Practical Examples

Example 1: Announcement Banner

Element content:

Hook Element content

<div class="gp-hook-element">Maintenance window: Sunday 02:00 UTC</div>

Example 2: Verification Meta Tag

Hook: wp_head

Verification tag

<meta name="example-verification" content="..." />

caution

Prefer site-level configuration for verification when possible. Keep secrets out of elements.

Example 3: Use a Child Theme Shortcode Inside an Element

Child theme:

functions.php

<?php
add_shortcode( 'year', fn() => esc_html( gmdate( 'Y' ) ) );

Element content:

Hook Element content

<small>© [year] Example Co.</small>

Best Practices

Practice	Why
Start with narrow display rules	Prevent global accidents
Keep scripts scoped	Reduce performance impact
Style via child theme CSS	Better caching
Document element intent	Future maintenance
Prefer elements for small UI changes	Avoids template forks
Keep a list of element IDs	Faster rollback

Troubleshooting

Symptom	Cause	Fix
Element not visible	Rule mismatch	Widen rules temporarily and re-test
Output duplicates	Multiple elements	Audit inventory and priorities
Changes not visible	Cache	Purge LSCache
Element shows everywhere	Rules too broad	Restrict rules and re-test

Hands-On

1. Create one Hook Element on a single page.
2. Add one CSS class and style it via elements.css.
3. Disable the element and confirm rollback.
4. Move the element to a different hook and compare placement.

Quick Reference

hook-elements-gp-premium-cheatsheet.sh

cd /var/www/html
wp post list --post_type=gp_elements --fields=ID,post_title,post_status --format=table 2>/dev/null || true

What's Next

• Next: Shortcodes & Template Tags
• Related: Hook Elements