WordPress Core Theme · Live Event Production Platform

Black and White Craft: A Tactile Platform for Site-Specific Live Art

Black and White Craft is an independent live event production agency and cultural curation studio led by Artistic Director Opeyemi Farimoyo, staging site-specific theatre, socially engaged art and community festivals across the UK, Nigeria and Zambia. Cr8v Stacks built its site as a native WordPress theme and, with it, the first version of the cr8v-events-core engine that runs the production archive, the discipline catalogue and the commissioning desk.

WordPress Core Custom Theme Events Core Engine Native Customizer

ClientBlack and White Craft

ServicesTheme architecture · Brand system · Events engine

StackWordPress core · PHP · CSS custom properties · Customizer API

Live Domainblackandwhitecraft.co.uk ↗

Overview · The Brief

Five Disciplines, Three Nations
& One Engine

Opeyemi Farimoyo's productions happen in places a venue website never has to describe: a botanical glasshouse, the market halls of Lusaka, a floating community in Lagos. The site had to present every production as a technical dossier, let visitors browse five disciplines at a glance, and take commissions, all editable by the studio itself.

Static pages would have needed a developer for every new event, and a page builder would have put the design system at risk. Cr8v Stacks built a native theme and a companion plugin designed to be reused, so this site became the first deployment of an engine that a separate client, Red Cap Entertainment, later reused for its own identity.

Production Scope · 5 Core Disciplines UK · Nigeria · Zambia

Site-Specific & Promenade Theatre

Botanical and public spaces turned into performance arenas.

Socially Engaged Art Curation

Festivals and community arts built with the communities they serve.

Cross-Continental Creative Direction

One creative line across the UK, Nigeria and Zambia.

Creative Mentorship & Arts Advocacy

Youth and talent elevation programmes.

Stage & Technical Production

Audio, lighting and rigging for non-traditional venues.

Build Route Triage · Why The Obvious Options Failed 3 Rejected

✕ STATIC PAGESEvery new production needs a developer to add it, and clients change their minds the moment they want to edit.

✕ PAGE BUILDERLayouts live inside builder data, so a casual edit can break the design system.

✕ EVENTS PLUGINBuilt around ticketed venues. These productions are site-specific and need dossiers, not seat maps.

✓ ChosenNative theme + cr8v-events-core: an editable content model that any later theme can reuse.

One Content Model · Five Productions

Calendar SyncFull Event Specs →

Strategic Architecture

Key Engineering Mandates

Active Core

01 / Customizer Governance

Copy, colours and page content are edited through WordPress core's native Customizer, with a dedicated Design Tokens section.

02 / Discipline-Driven Catalogue

One filter model sorts events, services and gallery prints by discipline, so visitors browse the studio's work the way the studio describes it.

03 / Four-Pillar Dossiers

Every production carries audio, lighting, staging and crew specifications, edited in a studio screen and shown as a consistent dossier.

04 / Commissioning Desk

A brief form with a stepped submission flow feeds a four-stage inquiries pipeline, with dual HTML emails to the studio and the client.

5 Disciplines 12 Customizer Sections 55 Settings

Design & Engineering

Core Technical Deliverables

Brand System · Asset 01

Black and White Craft Brand System & Theme Tokens

The tactile identity captured as a working system: Anton display type with Plus Jakarta Sans, Space Mono and a hand-written accent, a monochrome base with five earth-and-water accents, and the component language of filter pills, hard-shadow cards, paperclip pins and stamp badges, all mapped to the --bwc-* custom properties the theme ships with.

Engine Architecture · Asset 02

One Engine, Many Themes

The architecture that made this site the origin of a reusable platform: a companion plugin written once, and themes that supply identity only (templates, tokens, copy and the services list) through hooks such as cr8v_theme_services_list.

Diagram of the cr8v-events-core plugin in the centre with the Black and White Craft and Red Cap themes plugging in through hooks

Platform Architecture · Asset 03

Tactile Staging Platform

The architecture board: three raised blocks carrying the whole public experience, mounted on a native theme with a shared engine behind it.

01Five-discipline catalogue: one filter model drives events, services and gallery prints.

02Four-pillar dossiers: audio, lighting, staging and crew specifications per production.

03Commission desk: a brief form with server-side gates and a stepped submission flow.

Architecture board on a granite table with three blocks: five-discipline catalogue, four-pillar dossiers, commission desk

Showcase 01 · Production Interface Captures

The Website Itself in Production

Scrolled captures of the live site beyond the hero: the production catalogue, the five disciplines, a single production dossier and the commissioning form.

blackandwhitecraft.co.uk/events/

Black and White Craft events page with discipline filter pills and full-width production cards

Production Catalogue · archive-event.php

Filterable Production Catalogue

Filter pills by discipline above full-width production cards: poster, kicker, venue and excerpt, with Calendar Sync and Full Event Specs actions.

blackandwhitecraft.co.uk/services/

Black and White Craft services page with the Site-Specific and Promenade Theatre discipline card

Capabilities · page-services.php

Five Disciplines With Methodologies

One card per discipline with a photograph, a paperclip pin, a hard black shadow and a four-point list of key methodologies, each ending in a Commission Event action.

blackandwhitecraft.co.uk/events/the-makoko-creative-talent-awards/

Makoko Creative Talent Awards production dossier with artistic direction callout, narrative, press quote and sticky production panel

Production Dossier · single-event.php

Single Production Dossier

An artistic-direction callout, curatorial narrative and press quote, followed by the four-pillar technical specification, beside a sticky panel with the lead producer, a Commission Similar Event action and share buttons.

blackandwhitecraft.co.uk/contact/

Black and White Craft project intake and brief form with ten rounded service pills

Commissioning Intake · page-contact.php

Project Intake & Brief

Name or organisation, work email, optional phone, ten rounded service pills and a project brief, promising a reply within 24 hours.

Showcase 02 · WordPress Core Engine

Engineered Systems & Workflows

Six interactive recreations of the systems that make this site editable by the studio: the theme layer on top of the cr8v-events-core engine. Widgets use illustrative data with the real field names, hooks and stages.

SYSTEM 01 · DISCIPLINE FILTER ENGINE

One Filter Model, Three Catalogues

Events, services and gallery prints all carry a discipline category. A single filter component reads data-category attributes and shows or hides cards without a page reload, so the same pill row works on every catalogue page. Click a pill to filter the sample items.

pill.dataset.category === item.dataset.category || category === 'all'

Filter by typeIllustrative mapping

The Unseen NarrativeEvent

A Day in Colonial GardenEvent

Makoko Creative Talent AwardsEvent

The Marketplace MonologuesEvent

Site-Specific & Promenade TheatreService

Stage & Technical ProductionService

Opeyemi Farimoyo, SheffieldGallery print

7 of 7 shown

SYSTEM 02 · FOUR-PILLAR SPEC STUDIO

Type Four Fields, Get a Dossier

The block editor is switched off for productions in favour of a studio screen. Four meta fields (audio, lighting, staging, crew) render as the pillar cards on the public page. Older records are migrated on read: a legacy spec labelled “truss” or “deck” lands in staging automatically. Type in the fields to see the cards update.

_cr8v_spec_audio · _cr8v_spec_lighting
_cr8v_spec_staging · _cr8v_spec_crew

Event Studio · Technical Stagingevent

_cr8v_spec_audio _cr8v_spec_lighting _cr8v_spec_staging _cr8v_spec_crew

Audio engineering

Lighting & ambience

Staging & rigging

Crew & logistics

SYSTEM 03 · META-DRIVEN GALLERY

Layout and Ribbon Colour Per Print

Each gallery item stores its own grid span and ribbon colour. The studio picks col-4 or col-6 and one of the five brand accents in the admin, and the public masonry grid composes itself on a twelve-column track. Change the first print to see it.

_cr8v_gallery_grid_span: 'col-6'
_cr8v_ribbon_color: '#C85C38'

Gallery Item · Grid Layout & Ribbon Pingallery_item

Print 1 span ribbon

Unseen Narrative

Colonial Garden

Makoko

Moonlight

Marketplace

SYSTEM 04 · THEME HOOKS

The Engine Asks the Theme Who It Serves

The plugin ships a default list of twelve services and passes it through cr8v_theme_services_list. This theme returns the list in its own studio language. Red Cap Entertainment, a separate client whose site was later built on the same engine, returns a different set of ten, with an icon and colour for each. Same plugin, no fork. Switch between the two to see the commissioning chips change.

return apply_filters( 'cr8v_theme_services_list', $default_services );

cr8v_get_available_services_list()

SYSTEM 05 · INQUIRIES REPORTS

The Pipeline as a Funnel

Beside the inquiry list, the engine's Reports page turns the four stages (New, In Review, Contacted, Concluded) into a funnel with a conversion rate and a complete CSV download, so the studio can see how briefs become bookings. Figures here are illustrative.

$conversion_rate = round( ( $count_concluded / $count_all ) * 100, 1 );

Project Inquiries · ReportsIllustrative data

All briefs15

Concluded2

Conversion13.3%

Stage 01 · New

Stage 02 · In Review

Stage 03 · Contacted

Stage 04 · Concluded

SYSTEM 06 · BRANDED ADMIN

An Admin That Speaks Studio

The WordPress admin is re-columned for the work: events list a visual, docket title, date, staging venue, category and a live or concluded badge; gallery items show print preview, grid layout and ribbon pin. An onboarding card offers one-click demo content on a fresh install.

add_filter('manage_event_posts_columns', 'cr8v_set_event_admin_columns');

CR8V EVENTSEventsGalleryProject InquiriesAppearanceTools

Welcome to the studioNo productions yet? Seed sample content in one click.

Event & Docket Title	Staging Venue	Calendar Status
The Makoko Creative Talent Awards	Makoko Slum, Lagos	● CONCLUDED
Moonlight Tales	Lagos, Nigeria	● ACTIVE / LIVE
The Marketplace Monologues	Lusaka, Zambia	● ACTIVE / LIVE

Illustrative statuses

Showcase 03 · Interaction Design & Commissioning Flow

Tactile Interaction Design

How the front end feels: a commissioning flow that narrates every step of submission, a hero card that behaves like a pinned print, and a clip-and-ribbon system that carries the identity everywhere.

INTERACTION 01 · THE COMMISSION FLOW

A Submission That Narrates Itself

Visitors pick from ten rounded service pills and write a brief. On submit, a modal overlay walks through three steps (validating, saving, dispatching to the production desk) while the request runs, then confirms with the studio's 24-hour promise. Behind it sit the same four server-side gates as the Red Cap deployment: honeypot, two-second time gate, rate limit and nonce. Pick a few pills and transmit.

fetch( ajax_url, { method: 'POST', body: FormData } ) → modal: loading | success | error

Commission Specification0 selected

← click to run the flow

INTERACTION 02 · THE PINNED PRINT

Paperclip Hero Card

The home hero is a pinned print: a tilted card with a paperclip, a rotating stamp badge and a poster slider. It auto-advances; use the arrows or dots to take control.

LIVE
PROD
// UK

A Day in Colonial Garden

INTERACTION 03 · THE CLIP SYSTEM

One Pin, Every Surface

The paperclip is the identity's signature. One accent token colours the clip on a discipline card, the ribbon pin on a gallery print and the stamp on a hero card, so the motif stays consistent everywhere. Pick an accent to recolour all three.

Accent token --bwc-terracotta

Discipline cardClip pinned to the top edge, hard 4px shadow, mono kicker.

Ribbon pinGallery printRibbon colour is stored per print and read from the same five tokens.

Hero cardTilted card with a clip and a rotated stamp badge.

/* one token drives all three */ --ac: #C85C38; /* clip, ribbon, stamp shadow */

Showcase 04 · Technical Architecture

Engineering Deep Dive

Nine code-level decisions behind the theme, each one distinct from the systems shown above. Pure typography and live code widgets, no screenshots.

01 / TAXONOMY

Two Post Types, Two Category Trees

Productions and gallery prints each get their own category taxonomy, so the discipline filters have real data behind them rather than hard-coded buttons.

02 / MIGRATION

Legacy Spec Normaliser

Older productions stored specs as a label and value list. On read, label keywords decide which pillar each value belongs to. Type a legacy label.

03 / QUERY

Archive Query Contract

One pre_get_posts filter decides how the catalogue pages are fetched, so every archive behaves the same way.

04 / ROUTING

Redirects Before Templates

A late-priority template_include filter retires old URLs with a permanent redirect and forces key routes to the right template.

05 / LAYOUT

Twelve-Column Gallery Grid

A print's span token maps to a column count on a twelve-column track, and its ribbon colour must be one of the brand accents.

06 / CUSTOMIZER

Twelve Sections, Fifty-Five Settings

Every page has its own Customizer section, with a Design Tokens section for the brand itself.

07 / DESIGN TOKENS

Monochrome Base, Five Accents

Black, white and a ruled grey carry the layout; five earth-and-water accents carry meaning.

08 / ACCESSIBILITY

Contrast of the Real Token Pairs

The brand pairs checked against WCAG 2.1 thresholds. Ratios are computed in your browser from the actual hex values.

09 / NAVIGATION CODE

Drawer Behaviour & Keyboard Escape

The mobile navigation is plain JavaScript: it opens from the toggle, closes from its own button, the overlay, any link, or the Escape key.