Brief
Four WordPress themes for the FB-Media properties, sport, politics, lifestyle, business, built as production block themes. Each theme honors a per-niche typographic system designed in Figma. The brief insisted on no third-party theme overlays: themes must be original code, owned by the client, modifiable without an upgrade plan.
GDPR and Romanian-market specifics baked in: cookie banner per page, author box on every article, contact + privacy + cookies pages with the SRL identity inline.
Architecture
Each theme is a standalone block theme directory (wp-content/themes/<site>-figma). They share zero code, the trade-off was deliberate. Sharing a base theme would have meant breaking changes propagate across four production properties on the same deploy. Independent themes mean a sport-theme tweak can ship without touching the politics theme.
The Figma → PHP path uses Figma Variables for tokens (color, type, spacing) exported to a per-theme theme.json block-editor schema. Block patterns mirror the Figma Auto-Layout components 1-to-1. Custom fonts (Inter for politics + business, Playfair Display for lifestyle, Bebas Neue for sport) are self-hosted as preloaded woff2.
A small mu-plugin per site bundles the cookie banner + author box + contact-form shortcodes, these live outside the theme so a theme swap doesn’t break them.
Outcomes
- 4 themes shipped, sport, politics, lifestyle, business.
- Original code, clients own the theme directories outright.
- Per-niche typography, each theme honors its niche’s editorial visual language.
- GDPR-ready, cookie banner, author box, legal pages baked in.
- Lighthouse mobile: above 90 on all four sites at launch (font preloading + minimal JS).
What’s next
Two items on the next-iteration list:
- Spin up a single shared design-token CSS file that all four themes consume, cross-theme typography drift was the biggest QA cost during the FB-Media launch week. A shared
tokens.css(with per-site overrides) would have caught the drift earlier. - Move the mu-plugin code into a private composer package, currently each site has its own copy of the cookie + author + contact code. A shared package (versioned, installable per site) would let updates flow through all four sites at once.