Elements Overview

warning

Elements can inject markup or code site-wide. Use narrow display rules and test on staging first, especially when inserting scripts or custom PHP.

What Elements Are (and What They Are Not)

Element type	What it does	Best for
Hook	Injects content into a hook location	Banners, notices, tracking code, small sections
Block	Renders block-based content via a hook/display rules	Heroes, CTAs, reusable sections
Layout	Changes layout settings conditionally	Full-width pages, no header/footer on specific URLs
Header	Builds a custom header/hero region conditionally	Landing-page headers, archive headers

Key Concepts

• Elements give you a UI-driven, update-safe way to customize without editing the parent theme.
• Display rules let you target changes precisely (one page, one post type, one category).
• You can often avoid long-lived template overrides by using Elements + hooks.

How It Works

Elements attach behavior to the same GeneratePress hook system you already explored. The difference is that GP Premium stores the element configuration and renders it conditionally.

flowchart TD
  GP[GeneratePress hook points] --> RUN["do_action('generate_*')"]
  RUN --> GPP[GP Premium Elements]
  GPP --> RULES[Display rules]
  RULES --> OUT[Element output]
  CHILD[Child theme hooks] --> RUN

Best Practices

Practice	Why
Name elements consistently	Easier audits (e.g., Header: Blog, Hook: Top notice)
Keep one purpose per element	Easier debugging and rollback
Keep display rules narrow	Prevents accidental site-wide changes
Avoid long inline scripts	Protects performance and maintainability
Document why an element exists	Prevents "mystery" markup later
Plan a rollback path	Disabling an element should be your first response

Troubleshooting

Symptom	Cause	Fix
Element not showing	Display rules too strict	Widen rules temporarily and re-test
Element shows everywhere	Display rules too broad	Restrict to specific pages/post types
Changes not visible	Cache	Purge LSCache and test logged-out
Layout breaks	Element outputs unexpected wrappers	Simplify markup and add targeted CSS
Element behaves differently for admins	Cache varies by role	Test logged-out and review cache configuration

Self-Check

1. Name three problems Elements solve without touching theme files.
2. For a hypothetical CTA, choose the Element type (Hook vs Block vs Layout) and explain why.
3. Describe a safe rollout plan: start narrow, test logged-out, and keep a rollback path.

Quick Reference

If you need to...	Start with...
Inject markup in a specific location	Hook Element + narrow rules
Build a reusable hero/CTA section	Block Element
Change layout for a page type	Layout Element
Replace a header for a landing page	Header Element

What's Next

• Next: Hook Elements
• Related: Hooks Overview