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.
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
- Name three problems Elements solve without touching theme files.
- For a hypothetical CTA, choose the Element type (Hook vs Block vs Layout) and explain why.
- 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