Header Elements

warning

Large header images and heavy sliders are a common cause of poor LCP. Treat header elements as performance-critical.

Header Elements Explained

Capability	What it enables	Example
Conditional headers	Different headers per page type	Blog header vs landing page header
Hero sections	Headline + CTA + background	Homepage hero
Consistent branding	Reusable header design tokens	Shared spacing/typography

Why It Matters

• Headers appear on the most valuable pages (home, landing, archives).
• Done well, they reduce template overrides and keep design consistent.
• Done poorly, they dominate LCP and create CLS.

How It Works

Header Elements render conditionally based on rules and integrate with header hook points and theme layout regions.

flowchart TD
  RULES[Header Element rules] -->|match| RENDER[Render header content]
  RENDER --> HEADER[Header region]
  HEADER --> PAGE[Page output]
  RULES -->|no match| SKIP[No custom header]

Practical Walkthrough

Step 1: Find Header Hooks and Regions

find-header-hooks.sh

cd /var/www/html/wp-content/themes/generatepress
grep -R "do_action( 'generate_" -n inc/structure/header.php 2>/dev/null | head -n 80

Step 2: Audit Existing Elements (Optional)

audit-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: Locate Header-Related Code in the Plugin (Optional)

inspect-header-element-plugin-code.sh

cd /var/www/html
ls -lah wp-content/plugins/gp-premium/elements 2>/dev/null || true
grep -R "header" -n wp-content/plugins/gp-premium/elements 2>/dev/null | head -n 40

Practical Examples

Example 1: A Lightweight Hero Pattern

Hero content should be simple:

• One primary heading (H1)
• One supporting sentence
• One CTA button
• One optimized background image (optional)

Example 2: Archive Header

Use a Header Element for:

• Category archives
• Blog index
• Custom post type archives

Keep the same spacing tokens so archives match pages.

Example 3: A Simple Hero Styling Pattern (CSS)

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

.gp-hero {
  padding: 64px 0;
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
}

.gp-hero h1 { margin: 0 0 12px; line-height: 1.1; }
.gp-hero p { margin: 0 0 20px; max-width: 60ch; }

Example 4: Header Performance Checklist

Check	Target	Why
Background image size	as small as possible	LCP sensitive
Image dimensions	explicit	Prevent CLS
Font weights	minimal	Avoid render delay
DOM depth	shallow	Better INP

Best Practices

Practice	Why
Optimize header images	Headers often dominate LCP
Use responsive images	Prevents oversized downloads on mobile
Use one H1 per page	SEO and accessibility
Avoid autoplay sliders	Performance and UX
Use display rules narrowly	Prevent accidental global headers
Keep hero copy short	Reduces layout complexity
Test on mobile first	Headers often break on small screens

Troubleshooting

Symptom	Cause	Fix
Header not showing	Rule mismatch	Start with one page rule, then expand
Layout shifts	Image dimensions missing	Set explicit sizes and use responsive images
Header duplicates	Two elements target same pages	Audit inventory and disable one
Two H1s on the page	Title + hero both H1	Use one H1 and demote the other to H2/H3
Hero looks fine but slow	Heavy image or font	Optimize assets and re-test with cache warmed

Hands-On

1. Create a Header Element for one page only.
2. Add a single optimized image and verify no CLS.
3. Confirm you can disable the element and revert quickly.
4. Capture the hero image file size from wp-content/uploads/ and document your budget.

Quick Reference

Task	Command
Find header hooks	grep -R "do_action( 'generate_" -n inc/structure/header.php
List elements	wp post list --post_type=gp_elements --fields=ID,post_title,post_status

What's Next

• Next module: GenerateBlocks Integration
• Next lesson: Introduction