# EXE 2025 Theme - Header & Footer Consistency Guide

## Overview
Your EXE 2025 theme now has a complete, consistent header and footer system implemented using WordPress FSE best practices.

## Theme Structure
```
exe-2025/
├── assets/
│   ├── css/
│   │   └── custom.css              # Sticky header, transitions, responsive styles
│   └── js/
│       └── theme.js                # Sticky header scroll behavior
├── parts/
│   ├── header.html                 # Header template part ⭐
│   └── footer.html                 # Footer template part ⭐
├── templates/
│   ├── index.html                  # Main blog template
│   ├── home.html                   # Home page template
│   ├── single.html                 # Single post template
│   └── page.html                   # Page template
├── functions.php                   # Enqueues styles, scripts, fonts
├── style.css                       # Child theme metadata
├── theme.json                      # Design system (colors, typography, spacing)
└── README.md                       # Full documentation
```

## How Consistency is Achieved

### 1. Template Parts (The Key to Consistency)
Header and footer are defined ONCE in the `parts/` directory:
- **parts/header.html** - Single source of truth for all headers
- **parts/footer.html** - Single source of truth for all footers

### 2. All Templates Reference These Parts
Every template file uses the same header and footer:

```html
<!-- At the top of every template -->
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- Template content here -->

<!-- At the bottom of every template -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
```

This means:
✅ Edit header.html once → Changes apply everywhere
✅ Edit footer.html once → Changes apply everywhere
✅ No duplicate code
✅ No inconsistencies

## Header Implementation

### Structure
```
┌─────────────────────────────────────────────────────┐
│  [Logo + Site Title]        [Navigation Menu]       │
│  • Site Logo (40px)         • About Us              │
│  • Site Title               • Our Work              │
│                             • Partners               │
│                             • Services               │
│                             • Connect                │
└─────────────────────────────────────────────────────┘
```

### Features
- **Sticky Positioning**: Stays at top during scroll
- **Dynamic Shadow**: Subtle shadow appears after scrolling 50px
- **Responsive Spacing**: Adjusts padding on mobile devices
- **Smooth Transitions**: Color and shadow changes are animated

### Styling Approach
- Base structure defined in `parts/header.html`
- Sticky behavior in `assets/css/custom.css`
- Scroll effects via `assets/js/theme.js`

## Footer Implementation

### Structure
```
┌─────────────────────────────────────────────────────┐
│  [Brand Section]              [Navigation Menu]      │
│  • "Execution Space" heading  • About Us            │
│  • Description text           • Our Work            │
│                               • Partners             │
│                               • Services             │
│                               • Connect              │
├─────────────────────────────────────────────────────┤
│  © 2025 / Execution Space | Designed with WordPress │
└─────────────────────────────────────────────────────┘
```

### Features
- **Flexible Layout**: Two-column design on desktop, stacks on mobile
- **Reused Navigation**: Same menu as header for consistency
- **Semantic Colors**: Uses text-alt colors for hierarchy
- **Visual Separator**: Horizontal line between sections

## Design System (theme.json)

### Typography - Figtree Font
All defined as CSS custom properties:
```
H0:  96px / 6rem       → var(--wp--preset--font-size--heading-0)
H1:  64px / 4rem       → var(--wp--preset--font-size--heading-1)
H2:  48px / 3rem       → var(--wp--preset--font-size--heading-2)
H3:  40px / 2.5rem     → var(--wp--preset--font-size--heading-3)
H4:  32px / 2rem       → var(--wp--preset--font-size--xxx-large)
H5:  24px / 1.5rem     → var(--wp--preset--font-size--xx-large)
H6:  20px / 1.25rem    → var(--wp--preset--font-size--x-large)
```

### Colors
All defined as CSS custom properties:
```
Background:     #FFFFFF → var(--wp--preset--color--background)
Background Alt: #F5F5F5 → var(--wp--preset--color--background-alt)
Text:          #000000 → var(--wp--preset--color--text)
Text Alt 1:    #666666 → var(--wp--preset--color--text-alt-1)
Text Alt 2:    #999999 → var(--wp--preset--color--text-alt-2)
Accent:        #0066FF → var(--wp--preset--color--accent)
```

### Layout Constraints
```
Content Width: 1200px
Wide Width:    1400px
Full Width:    100vw (site edge to edge)
```

## How to Edit Header & Footer

### Option 1: Site Editor (Recommended for Visual Changes)
1. Go to **Appearance → Editor**
2. Click **Patterns** in the sidebar
3. Find "Header" or "Footer" under "Template Parts"
4. Click to edit visually
5. Changes save automatically and apply site-wide

### Option 2: File Editor (For Code Changes)
1. Edit `/parts/header.html` or `/parts/footer.html`
2. Use WordPress block markup
3. Upload via FTP or theme file editor
4. Changes apply immediately across all templates

### Option 3: Through Templates
1. Go to **Appearance → Editor → Templates**
2. Select any template (Index, Home, Page, etc.)
3. Click on the header or footer section
4. Choose "Edit template part"
5. Changes apply everywhere that part is used

## Navigation Menu Setup

1. **Create Menu**:
   - Go to **Appearance → Navigation** (or Site Editor → Navigation)
   - Create menu with: About Us, Our Work, Partners, Services, Connect

2. **Automatic Usage**:
   - Header uses navigation block (ref:1)
   - Footer uses same navigation block (ref:1)
   - Both pull from same menu source
   - Update once, changes reflect in both locations

## Key Benefits of This Approach

✅ **Single Source of Truth**: Edit once, update everywhere
✅ **No Duplication**: Header and footer defined only once
✅ **Easy Maintenance**: Change navigation in one place
✅ **FSE Compatible**: Works perfectly with Site Editor
✅ **Semantic Structure**: Proper HTML5 <header> and <footer> tags
✅ **Clean Code**: No inline styles, uses design system

## Common Editing Scenarios

### Change Header Logo
1. Edit `parts/header.html`
2. Find `<!-- wp:site-logo -->`
3. Or use Site Editor to upload new logo

### Update Navigation Items
1. Go to **Appearance → Navigation**
2. Edit primary menu
3. Changes appear in both header and footer

### Adjust Header Background
1. Edit `parts/header.html`
2. Change `backgroundColor="background"` attribute
3. Or add custom background via Site Editor

### Modify Footer Text
1. Edit `parts/footer.html`
2. Update copyright year or description text
3. Changes apply site-wide immediately

### Change Sticky Header Behavior
1. Edit `assets/css/custom.css`
2. Modify `.site-header` styles
3. Or adjust scroll threshold in `assets/js/theme.js`

## Next Development Steps

Your header and footer foundation is complete. Priority areas:

1. **Button Patterns** - Create reusable button blocks
2. **Hero Sections** - Build hero patterns matching Figma
3. **Content Sections** - Create patterns for various content layouts
4. **Footer CTA** - Add "Let's Discuss Your Project" section
5. **Blog Layouts** - Refine post listing and single post designs

## Files You Can Safely Customize

### Always Safe to Edit:
- `parts/header.html` - Header structure
- `parts/footer.html` - Footer structure
- `theme.json` - Colors, typography, spacing
- `assets/css/custom.css` - Additional styles
- `assets/js/theme.js` - JavaScript behaviors

### Edit with Caution:
- `functions.php` - Theme functionality (backup first)
- Template files - Changes affect specific page types

### Don't Edit:
- Parent theme files (twentytwentyfive/)
- WordPress core files

## Testing Checklist

✅ Header appears consistently on all page types
✅ Footer appears consistently on all page types
✅ Navigation menu works in both locations
✅ Sticky header functions on scroll
✅ Responsive layout works on mobile
✅ Logo and site title display correctly
✅ All links are functional
✅ Accessibility: Focus states visible
✅ Page loads without JavaScript errors

## Support & Documentation

- **WordPress FSE Guide**: https://developer.wordpress.org/block-editor/
- **Template Parts**: https://developer.wordpress.org/themes/block-themes/templates-and-template-parts/
- **theme.json**: https://developer.wordpress.org/themes/global-settings-and-styles/

---

**Ready to Activate**: Your theme is ready to be installed and activated in WordPress. All header and footer consistency mechanisms are in place and following WordPress best practices.