Header & Navigation

warning

Avoid editing parent theme header templates. Use hooks/filters or a child theme to keep updates safe.

Header & Navigation Explained

Component	What it controls	Where to look
Header region	Site branding and header layout	inc/structure/header.php
Navigation region	Menu markup and mobile behavior	inc/structure/navigation.php (or similar)
Hook points	Injection points around header/nav	do_action( 'generate_*' )
Menu assignment	Which menu is attached to a location	wp theme mod get nav_menu_locations

Why It Matters

• The header is the most reused component across the site.
• Navigation affects accessibility and performance (DOM size, JS behavior).
• Clean header customization prevents future regressions when the theme updates.

How It Works

GeneratePress constructs the header and navigation via structure functions and fires hook points before/after regions. Your child theme can inject markup or adjust layout decisions without copying templates.

flowchart TD
  TPL[templates/*.php] --> HEADER[inc/structure/header.php]
  HEADER --> HOOKS[generate_* header hooks]
  HOOKS --> CHILD[Child theme callbacks]
  HEADER --> NAV[inc/structure/navigation.php]
  NAV --> ASSETS[assets/js/*]

Practical Walkthrough

Step 1: Find Header and Navigation Files

locate-header-navigation-files.sh

cd /var/www/html/wp-content/themes/generatepress
ls inc/structure | grep -E "header|navigation" || true

Step 2: List Hook Points Around the Header

list-header-hooks.sh

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

Step 3: Validate Menu Locations via WP-CLI

check-nav-menu-locations.sh

cd /var/www/html
wp theme mod get nav_menu_locations --format=json 2>/dev/null || echo "Theme mod command not available"

Expected output (example):

{
  "primary": 12
}

Step 4: Find Default Header/Nav Callbacks

find-default-header-callbacks.sh

cd /var/www/html/wp-content/themes/generatepress
grep -R "add_action( 'generate_" -n inc/structure | head -n 60

Step 5: List Menus (Optional)

list-wp-menus.sh

cd /var/www/html
wp menu list 2>/dev/null || echo "No wp menu command found"

Practical Examples

Example 1: Add a Simple Top Notice Above the Header

wp-content/themes/generatepress-child/functions.php

<?php

add_action( 'generate_before_header', function() {
    echo '<div class="gp-top-notice">Free shipping over $50</div>';
} );

Example 2: Find the Navigation Script Reference

find-navigation-js.sh

cd /var/www/html/wp-content/themes/generatepress
grep -R "navigation" -n assets inc functions.php | head -n 40

Example 3: Add a Skip Link for Accessibility

wp-content/themes/generatepress-child/functions.php

<?php

add_action( 'wp_body_open', function() {
    echo '<a class="skip-link" href="#main">Skip to content</a>';
} );

Best Practices

Practice	Why
Keep header markup minimal	Reduces DOM cost and improves INP
Ensure menu toggle is accessible	Keyboard and screen-reader usability
Prefer hooks for injected content	Avoids template forks
Document custom header behavior	Prevents future surprises
Keep header assets small	Header is visible on every page

Troubleshooting

Symptom	Cause	Fix
Menu not showing	No menu assigned to location	Assign a menu to the primary location and re-check theme mods
Mobile menu broken	JS/CSS conflict	Disable minify/optimization plugins on staging to isolate
Notice shows on admin only	Cached vs uncached views	Test logged-out + purge LSCache
Skip link not visible	CSS missing	Add minimal CSS for .skip-link and test with keyboard

Hands-On

1. List hook points in inc/structure/header.php.
2. Add a top notice with generate_before_header.
3. Verify the notice renders on mobile and does not cause CLS.
4. Add a skip link and confirm it works with keyboard navigation.

Quick Reference

header-nav-cheatsheet.sh

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

What's Next

• Next: Footer & Widgets
• Related: Hooks Overview