Building a Food & Beverage Style for Elayne: Part 3 – Pattern Refinement & Reusability

February 5, 2026 • By Jasper Frumau

In Part 1, we outlined our vision and design system. In Part 2, we shipped the core style variation with our first patterns—the Drinks Menu Grid and the Food & Beverage header. Now, in Part 3, we’re going to show you something that happens in every real-world development project: refactoring for reusability.

What changed since Part 2:

Renamed and generalized the F&B-specific header pattern for use across all style variations
Created a light version of the header for versatile styling options
Built a blog post grid pattern optimized for the F&B color palette
Improved pattern categorization for better WordPress editor discoverability

This phase is all about refinement. We discovered that our “Food & Beverage Header” was actually too good to limit to just restaurants. It became a general-purpose header pattern that works across multiple industries.

The Header Evolution: From Niche to Universal

Why We Refactored the Header

When we built the original header-fandb.php pattern in Part 2, we designed it specifically for restaurant and cafe websites. The three-zone layout (social icons left, logo center, hamburger menu right) worked beautifully for food service businesses.

But then we tested it on a spa website. And a law firm. And a photography portfolio.

It worked everywhere.

The layout’s simplicity and focus on social proof + branding turned out to be valuable far beyond the food industry. Limiting it to the F&B category was artificially constraining a universally useful pattern.

The original problem:

Pattern was named elayne/header-fandb (industry-specific)
Categorized under elayne/food-beverage (hidden from other style users)
Title referenced “Food & Beverage” explicitly
Only discoverable when using the F&B style variation

What we realized: This wasn’t a food & beverage pattern. This was a universal header pattern that happened to be designed while building the F&B style.

Refactoring Strategy: Delete and Replace

We took a bold approach: delete the vertical-specific pattern entirely and replace it with two generalized versions.

Pattern transformation:

Before (Part 2):

patterns/header-fandb.php
├─ Title: "F&B Header with Social Icons"
├─ Slug: elayne/header-fandb
├─ Categories: elayne/food-beverage
└─ Description: "Restaurant/cafe header..."

After (Part 3):

patterns/header-social-logo-hamburger.php (Dark)
├─ Title: "Header with Social, Logo, and Hamburger (Dark)"
├─ Slug: elayne/header-social-logo-hamburger
├─ Categories: header
└─ Description: "Clean dark header with left social icons..."

patterns/header-social-logo-hamburger-light.php (Light)
├─ Title: "Header with Social, Logo, and Hamburger (Light)"
├─ Slug: elayne/header-social-logo-hamburger-light
├─ Categories: header
└─ Description: "Clean light header with left social icons..."

What Changed in the Code

The header structure stayed identical—same three-zone flex layout, same spacing, same hamburger menu behavior. Only the naming and categorization changed.

Dark Version (header-social-logo-hamburger.php):

Uses backgroundColor="primary-alt" (Dark Moss in F&B style)
Uses textColor="base" (white text)
Overlay menu with dark background
Keywords: header, navigation, menu, logo, social, centered, hamburger, dark

Light Version (header-social-logo-hamburger-light.php – NEW):

Uses backgroundColor="base" (white/light background)
Uses textColor="main" (dark text)
Adds subtle bottom border with border-light color
Overlay menu with light background
Keywords: header, navigation, menu, logo, social, centered, hamburger, light

Key difference: The light version includes a 1px bottom border for visual separation:

"border":{
  "bottom":{
    "color":"var:preset|color|border-light",
    "width":"1px"
  }
}

This subtle border prevents the header from disappearing into the page background when both use light colors.

Category Standardization

We also cleaned up pattern categorization across the board. WordPress has built-in pattern categories (header, footer, posts, etc.), and custom categories should be used sparingly.

Before:

Categories: elayne/food-beverage (custom category)

After:

Categories: header (WordPress core category)

Why this matters:

Users browsing “Headers” in the pattern inserter now see these patterns
No need to explain custom category hierarchies
Better compatibility with third-party block plugins
Follows WordPress core conventions

We also updated header-top-bar-centered-menu.php (our Spa & Wellness header) to use Categories: header instead of Categories: elayne/header.

Result: All header patterns now appear together in the WordPress editor’s header category, making them easy to discover and compare.

Pattern #3: Blog Post Grid with Cream Background

The third pattern we built is a blog post grid optimized for the Food & Beverage color palette. This pattern solves a specific F&B design challenge: displaying blog posts on warm, cream-colored backgrounds.

The Problem with Default Blog Patterns

Elayne ships with several blog post grid patterns, but most use:

White or transparent backgrounds
Dark text on light backgrounds
Generic spacing and card styles

When you apply the F&B style variation, your site’s global background becomes Light Cream (#f3efe4). The default blog patterns suddenly look visually disconnected—white cards floating on cream backgrounds with no visual hierarchy.

We needed: A blog pattern that embraces the F&B color system from the start.

Pattern Design: Three-Column Grid

Pattern Slug: elayne/blog-post-columns-fandb

Layout Structure:

Full-width container with backgroundColor="secondary" (Light Cream)
Wide-aligned query block (respects theme’s content width)
CSS Grid with minimumColumnWidth: 20rem (auto-responsive 3 → 2 → 1 columns)
Individual post cards with matching cream background

Responsive Behavior:

Desktop (1200px+): 3 columns
Tablet (782px-1199px): 2 columns
Mobile (<782px): 1 column (vertical stack)

Card Styling:

2:3 aspect ratio featured images (portrait orientation)
5px border radius (softer than typical 8px)
Cream background matching the section background
Small padding (var:preset|spacing|medium)
Date display with subtle separator dot

Typography:

Post titles use fontFamily: bitter (serif contrast against Asap Condensed body)
Font weight 600, line-height 1.3 for readability
Font size medium (responsive via theme settings)
Titles have has-partial-underline class for decorative underlines

Visual Hierarchy Through Negative Space

The key design decision here was background-on-background. The cards use the same Light Cream color as the section background, creating a subtle, cohesive look.

How it works:

Section background: secondary (Light Cream)
Card background: secondary (Light Cream)
Visual separation comes from border-radius and spacing, not color contrast

This creates a softer, more elegant presentation than harsh white cards on cream backgrounds. The featured images provide the color and visual interest.

Spacing Strategy:

Large vertical padding on outer container (x-large)
Large block gap between cards (large)
Small internal card padding to keep content compact
No excessive margins (let the grid gaps do the work)

Featured Image Strategy: Portrait Orientation

Most blog patterns use landscape or square images. We chose 2:3 portrait aspect ratio for a specific reason: food photography.

Why portrait works for F&B blogs:

Plate presentations are often vertical (stack of pancakes, tall cocktails, layered cakes)
Portrait orientation mimics Instagram posts (where food bloggers share content)
Creates visual consistency with social media feeds
More dramatic, editorial feel than landscape orientation

The pattern uses sizeSlug="elayne-portrait-xs" with forced 2:3 aspect ratio cropping. This ensures visual consistency even when blog post images vary in original dimensions.

Query Configuration

The pattern uses a WordPress Query Loop block with these settings:

"query":{
  "perPage":3,
  "pages":"2",
  "offset":0,
  "postType":"post",
  "order":"desc",
  "orderBy":"date",
  "sticky":"exclude"
}

Key choices:

Shows 3 posts per page (matches 3-column grid perfectly)
Excludes sticky posts (prevents layout breaking with uneven counts)
Orders by date descending (newest first)
Limits to 2 pages of results (6 posts maximum)

This creates a clean, predictable layout that always fills the grid properly.

Pattern Keywords for Discoverability

We added comprehensive keywords to make this pattern easy to find:

Keywords: blog, posts, query, pages, portrait, grid, food, beverage

Users can now search for:

“blog” → finds this pattern
“posts” → finds this pattern
“food” → finds this pattern (even though it’s a blog pattern)

This cross-referencing helps users discover the pattern even when searching for industry terms rather than pattern types.

What We Learned About Pattern Reusability

1. Start Specific, Then Generalize

We initially built the header pattern for a specific vertical (F&B). Only after seeing it work in multiple contexts did we generalize it.

Lesson: Don’t over-engineer for reusability from day one. Build for the specific use case first, then refactor when patterns emerge.

Anti-pattern: Building a “universal mega-header” with 47 configuration options and zero opinionated styling. Nobody uses these.

Better approach: Build three distinct header patterns (dark, light, with-top-bar) that each do one thing extremely well.

2. Naming Matters More Than You Think

The pattern slug elayne/header-fandb telegraphed “this is only for food websites.” The generalized slug elayne/header-social-logo-hamburger describes what it is, not who it’s for.

Good pattern names:

header-social-logo-hamburger (describes structure)
blog-post-columns-fandb (describes purpose + vertical)
menu-drinks-grid (describes content type)

Bad pattern names:

header-fandb (vague, vertical-locked)
restaurant-header-v2 (version numbers in pattern names)
header-new (meaningless without context)

3. WordPress Core Categories Are Your Friends

Custom pattern categories (elayne/food-beverage, elayne/header) seemed like good organization. They weren’t.

Problems with custom categories:

Users don’t know they exist
No visual distinction in pattern inserter
Requires documentation to explain hierarchy
Breaks user expectations

WordPress core categories work better:

header, footer, posts, pages, featured, call-to-action, team, testimonials, gallery, contact
Users already understand these categories
Consistent with other themes and plugins
No learning curve

Our rule now: Use core categories unless you have 10+ patterns in a truly unique category (like elayne/food-beverage for menu patterns).

4. Light and Dark Variants Should Launch Together

We shipped the dark header in Part 2 and added the light version in Part 3. This created a gap where users requested a light header before we built it.

Better approach: If you’re building a header pattern, build both light and dark versions at the same time. The incremental work is minimal (copy pattern file, swap color variables, add border), and users expect both options.

Development cost:

Dark header: 1.5 hours (original build in Part 2)
Light header: 15 minutes (copy, modify, test)

User perception:

Shipping dark only: “This theme doesn’t support light headers?”
Shipping both: “This theme has great header options.”

The perception difference is massive for minimal extra work.

5. Background-on-Background Requires Careful Testing

The blog post pattern uses Light Cream backgrounds on a Light Cream section. This looks elegant if and only if:

Border radius is visible (5px minimum)
Spacing is generous (medium padding, large gaps)
Featured images provide visual anchors
Typography creates hierarchy

When it fails: If you reduce padding, remove border-radius, or omit featured images, the cards disappear into the background. Always test edge cases (missing featured images, long titles, short excerpts).

Development Stats: Part 3

Time spent: ~2.5 hours

Header refactoring and renaming: 45 minutes
Light header variant creation: 30 minutes
Blog post pattern development: 1 hour
Testing across style variations: 15 minutes

Files changed: 5 files

1 file deleted (header-fandb.php)
2 new header patterns (dark + light)
1 new blog post pattern
1 modified header pattern (category update)

Lines of code:

header-social-logo-hamburger.php: 47 lines
header-social-logo-hamburger-light.php: 47 lines
blog-post-columns-fandb.php: 37 lines

Commits involved:

Still in development (not yet committed)
Built on top of commit 6c2f9964 (Add global background colors)

Testing the Patterns Across Style Variations

One major benefit of generalizing the header pattern: we could test it across all eight Elayne style variations.

Style Variation	Dark Header	Light Header	Notes
Food & Beverage	✅ Perfect	✅ Perfect	Original design intent
Spa & Wellness	✅ Excellent	✅ Excellent	Soft colors work beautifully
Legal Blue	✅ Excellent	✅ Good	Dark header preferred for authority
Denim & Copper	✅ Good	✅ Excellent	Light header matches corporate aesthetic
Gray & Gold	✅ Good	✅ Excellent	Gold border accent shines on light
Teal Bay	✅ Excellent	✅ Good	Teal overlay menu looks modern
Orange	✅ Good	✅ Good	Vibrant colors work in both modes
Forest Sage	✅ Excellent	✅ Excellent	Natural palette complements header

Takeaway: The generalized header works in 100% of style variations. The F&B-specific version would have worked in maybe 60%. Refactoring was the right call.

What’s Next: Completing the Menu System

Part 3 focused on refinement and reusability—taking what we built in Part 2 and making it better. We generalized the header, added a light variant, and created a blog pattern that embraces the F&B color system.

Where we are now:

✅ Style variation complete (Part 2)
✅ Drinks Menu Grid pattern (Part 2)
✅ Header patterns generalized and expanded (Part 3)
✅ Blog post grid pattern (Part 3)
⏳ Food Menu Grid pattern (coming in Part 4)
⏳ Daily Specials pattern (coming in Part 4)
⏳ Complete demo site (coming in Part 5)

Part 4 Preview: We’ll complete the menu system with a Food Menu Grid pattern for full restaurant menus (appetizers, mains, desserts, sides). We’ll also build a Daily Specials pattern for highlighting chef’s specials and seasonal offerings.

We’ll show you:

How to structure complex menu layouts with nested subsections
Handling variable menu item counts without breaking the grid
Adding dietary indicators (vegetarian, gluten-free, vegan icons)
Creating reusable menu item components
Making menus editable without breaking the design

Part 4 is coming soon. We’re diving deep into the menu patterns that make this style truly restaurant-ready.

Pattern Files Reference

New Patterns Created in Part 3:

header-social-logo-hamburger.php – Dark header with social icons
header-social-logo-hamburger-light.php – Light header variant
blog-post-columns-fandb.php – F&B blog grid

Deleted Patterns:

header-fandb.php – Replaced by generalized versions

Modified Patterns:

header-top-bar-centered-menu.php – Category updated to core header

About Elayne Theme

Elayne is Imagewize’s flagship Full Site Editing theme, designed for digital agencies and web professionals who need flexible, industry-specific solutions. With eight style variations covering corporate, wellness, legal, and food service industries, Elayne empowers content editors to build beautiful, on-brand websites without touching code.

Current Style Variations:

Denim & Copper (Corporate)
Forest Sage (Wellness/Eco)
Gray & Gold (Luxury)
Legal Blue (Legal Services)
Orange (Vibrant)
Spa & Wellness (Spa Industry)
Teal Bay (Modern/Tech)
Food & Beverage (Version 2.4.0 – In Development)

Learn more: https://imagewize.com/themes/elayne/

GitHub: https://github.com/imagewize/elayne