A multi-page demo of a fictional Pacific Northwest architecture firm — Hillcrest Architects — built to show WordPress as a credible platform for image-led, service-business marketing sites. It’s the third demo on the platform and the first to drive a real five-page structure (home, projects archive, project case study, studio, contact) rather than a single landing page. Live at hillcrest.wp.philiprehberger.com.
The challenge
Architecture firms get sold WordPress as a CMS for blogs. The fast-moving tech press has moved on to Webflow, Squarespace, or Framer for design-led portfolio sites, and that’s defensible — until you actually try to scale them across a working studio’s content library, with twenty or forty individual project case studies, each with their own galleries, narratives, and metadata that someone non-technical needs to update.
The pitch we wanted to test: that a well-built FSE block theme plus one well-aimed custom block can do everything an architecture portfolio asks for — image-led navigation, deep individual project case studies, owner-editable copy at every level — without giving up the editor accessibility that WordPress is actually good at. Hillcrest is the worked example.
The approach
Two architectural moves. The first was a per-demo theme: hillcrest, a thin child of the platform’s _chassis parent. The theme owns only a Charter-serif type system (with letter-spacing calibrated for h1/h2/h3), the Atrium forest + brass palette, its own header and footer parts, and a front-page template that renders the post composition. Everything else — block patterns, gotcha-busting CSS, the asset enqueue pipeline, the demo banner — inherits from the chassis.
The second was a new shared block: sfp-blocks/portfolio-grid. Architecture portfolios universally use some form of mixed-size image grid — one or two “hero” projects given visual prominence, smaller projects in support — and we’d resisted building this generically until a demo actually demanded it. The block is server-rendered, takes a JSON array of items, and supports three sizes (small 1×1, medium 2×1, large 2×2) with CSS Grid + grid-auto-flow: dense. Items have an image URL, alt, caption, and size — that’s it. The block lives in the shared platform plugin, available to every future demo without additional integration work.
The six projects shown — Cedar Cove House (Bainbridge Island), Tidewater Library (Eastsound), North Slope Studio (Seattle), Salish Sea Boathouse (Lopez Island), Maritime Heritage Center (Port Townsend), and Coastal Forest Retreat (Olympic Peninsula) — are fictional but compose a plausible PNW portfolio. Cedar Cove House gets the full case-study treatment as a worked example of what a per-project page looks like; the other five carry the same imagined backstory if anyone asked.
What’s on the site
- Home. Hero with a practice statement on a cedar-clad architectural image, a 4-column
sfp-blocks/portfolio-gridof the six featured projects with mixed sizes, and a studio teaser strip - /projects/. Full portfolio in a 3-column grid with Cedar Cove House anchoring the large 2×2 slot and the other five packing densely around it
- /projects/cedar-cove-house/. Full case study: cover hero, narrative prose (the site / the materials / the decisions we’d defend), and a sidebar facts panel with type, location, completed year, square footage, structural system, awards, and photography credit
- /studio/. Why the firm stayed small, what they work on, principal bios, recognition
- /contact/. Direct contact info plus qualifying notes about scope, budget range, and geographic focus
- Demo banner across the top of every page making it explicit that the firm is fictional
The stack in detail
_chassisparent theme — templates, parts, patterns, gotcha-busting CSS, filemtime-based stylesheet enqueue. Inherited from the shared platform via symlinkhillcrestper-demo theme (this repo) — declaresTemplate: _chassis, ships Charter serif for h1/h2/h3, the Atrium palette (forest #2D4A3E / brass #B8945A / warm cream), customparts/header.html(Projects / Studio / Contact) andparts/footer.html(studio bio + office address + nav columns)sfp-blocks/portfolio-grid— the new shared block, server-rendered, lives atplugins/sfp-blocks/src/portfolio-grid/in the platform repo. First consumer is Hillcrest’s home page and projects archive; available to every future demosfp-blocks/trust-stack,sfp-blocks/test-card-helper,sfp-blocks/product-comparison— inherited from the shared plugin (not consumed by Hillcrest)- Four
sfp-*mu-plugins inherited from the platform;hillcrest-banner-config.phpfilters the demo banner text - WordPress 6.x · PHP 8.3 · MySQL 8 on Apache 2.4 (EC2 t3.small, shared with the other two demos)
.scripts/seed-pages.sh— idempotent content seed that uploads photos, runswp media import, renames each attachment’s slug to<name>-imageto keep the page namespace free, and creates or updates all five pages viawp post create/wp post update
Where we made tradeoffs
Per-demo themes vs demo-specific patterns. Pulsar — the previous demo on the platform — gets away with a single front-page.html override on a thin child theme; its identity comes from a custom theme.json palette plus inline block content. For Hillcrest’s five-page structure that wasn’t enough. We built a fuller per-demo theme with its own header/footer parts and a serif type system. The cost is more code per demo. The benefit is per-demo identity — Hillcrest’s serif headings, brass section labels, and matter-of-fact navigation are immediately distinct from Pulsar’s ink-and-coral SaaS look, even though both are children of the same chassis. The chassis stays generic; difference lives in the demo.
Real photography vs Lighthouse perf score. The site ships with seven supplied PNG photographs (one hero + six project covers), at native dimensions, no compression. Total payload is around 12 MB and Lighthouse perf dropped from 96 (with placeholder JPGs that ImageMagick generated as an interim) to 75. We left it that way because an architecture firm portfolio that compresses its hero shots into 90 KB JPGs has fundamentally misunderstood the brief. The right next step is a small ImageMagick pass in the seed (PNG → JPG q85, resize to 1920px max width) — typically 70–85% file-size reduction with no visible quality loss, and a clean recoverable win when the perf-vs-fidelity priorities change. The structural performance is intact: correct lazy loading on every image, CSS-driven layout, no JavaScript on the home page.
A slug-collision gotcha that wasted a debugging hour. The seed uploaded each project photo via wp media import with the project name as the title. WordPress auto-slugged the resulting attachment posts from the title — so the “Cedar Cove House” attachment claimed cedar-cove-house as its post_name. When the seed then tried to create the case-study page with that same slug, WP silently appended -3, -5, -7 instead of failing, producing six duplicate pages and a canonical URL that resolved to the JPG attachment rather than the page. Fix: rename every attachment’s slug to <name>-image immediately after import, freeing the project-slug namespace for case-study pages. Now part of the standard seed pattern across the platform.
Outcomes
- Five-page marketing site live at hillcrest.wp.philiprehberger.com, end-to-end provisioned via the platform’s
provision-demo.shscript - One new shared block authored and shipped (
sfp-blocks/portfolio-grid) — already available to every future demo without additional integration work - Lighthouse: 75 / 96 / 100 / 92 (perf / a11y / best-practices / SEO). The perf number reflects the photographic payload; structural performance is intact (correct lazy loading, CSS-driven layout, no JS)
- Real photos validated end-to-end through the supply pipeline: local
photos/directory → rsynced tosource-photos/on EC2 →wp media import→ portfolio-grid items JSON → live page. Seven photos swapped in incrementally, one at a time, with each swap triggering a singlenpm run deploy && npm run seed:pages - Greenfield-to-live in approximately five hours including the new shared block, the per-demo theme, the seed script, and the full case-study content for Cedar Cove House
- Surfaced a third platform-wide gotcha (the attachment-page slug collision) that’s now codified in the standard seed pattern