# Northfield Theatre

A WordPress theme for a fictional 1,200-seat receiving house in West Yorkshire. Built as a portfolio demonstration of the capability required for UK public-sector theatre tenders (Victoria Theatre Halifax and similar).

It demonstrates: a custom branded WordPress theme, a Spektrix-style ticketing integration (mocked with JSON data), a custom localStorage + REST basket, WCAG 2.2 AA accessibility, mobile-first responsive design, Gutenberg block editor support, and a domain-mapped microsite concept (Moorside Town Hall).

## What's in the box

**Pages**

- `front-page.php` — homepage: hero, "This Week" tabs, Now Booking grid, About.
- `page-whats-on.php` — filterable event listing with calendar.
- `single-event.php` — event detail with sticky Book Now bar, tabs, booking modal.
- `page-basket.php` + `page-checkout.php` — custom basket and checkout placeholder.
- `page-seating.php` — interactive SVG seating plan with clickable zones.
- `page-visit.php` — visitor information.
- `page-access.php` — accessibility statement and information.
- `page-our-story.php` — history, values, timeline, team, press.
- `page-contact.php` — contact form with client-side validation.
- `page-moorside.php` — branded microsite for the second venue.
- `home.php` + `single.php` — news archive and single post.
- `404.php`, `search.php`.

**Data**

- `data/events.json` — 21 events (18 main venue + 3 Moorside).
- `data/instances.json` — 94 performance instances.
- `data/ticket-types.json` — four ticket types with price multipliers.

**Custom post types**

- `nt_event` — imported from JSON on activation.
- `nt_instance` — performance dates linked to events.
- `event_category` taxonomy.

**Mock Spektrix REST API** (namespace `spektrix-mock/v1`):

```
GET    /events
GET    /events/{id}
GET    /instances
GET    /ticket-types/{event_id}
GET    /basket
POST   /basket/items
PATCH  /basket/items/{id}
DELETE /basket/items/{id}
```

Basket state is persisted server-side via transients keyed by a session cookie.

**Gutenberg blocks** (server-rendered, no build step)

- `northfield/hero-gallery`
- `northfield/event-grid`
- `northfield/alert-banner`

## Install

1. Copy the theme folder to `wp-content/themes/northfield-theatre/`.
2. In the WordPress admin: **Appearance → Themes → Activate**.
3. On activation the theme will:
   - Import the 21 events and 94 instances from `data/*.json`.
   - Create all content pages (What's On, Basket, Seating Plan, Our Story, Contact, etc.).
   - Create the Primary and Footer navigation menus.
   - Seed 5 sample news posts.
   - Set the static front page and News as the posts page.
4. Permalink structure is set to `/%postname%/` automatically.

If the theme was activated before this release, the missing pages and posts will be created idempotently on the next admin page load.

To re-import event data at any time: **Tools → Import Events**. The "Force re-import" option wipes existing events before re-importing.

## Customising

**Brand colours** — edit the CSS custom properties in `assets/css/main.css` (section 2, `:root`):

```css
--color-primary: #1B4D3E;   /* Deep green */
--color-accent:  #E8A33D;   /* Warm gold */
--color-dark:    #1A1A1A;
/* …etc */
```

**Fonts** — Inter and Fraunces are self-hosted under `assets/fonts/`. Swap the woff2 files and update the `@font-face` blocks at the top of `main.css`.

**Alert banner** — Appearance → Customize → Theme Options (or use the Customizer theme mod `northfield_alert_message`).

**GA4 measurement ID** — replace `G-XXXXXXXXXX` in `inc/analytics.php`. Analytics only load after cookie consent is accepted and not for logged-in admins.

## Swapping the mock API for real Spektrix

The mock layer was deliberately kept isolated. To point the frontend at a real Spektrix instance, only these files need changes:

1. **`inc/data-helpers.php`** — replace each function (`northfield_get_events`, `northfield_get_instances`, `northfield_get_event_ticket_types` etc.) with HTTP calls to the real Spektrix API v3. Function signatures and return shapes stay the same.
2. **`inc/spektrix-mock-api.php`** — either remove (if your frontend can hit Spektrix directly via your API integration user) or repoint the REST handlers to proxy to Spektrix so CORS stays clean.
3. **Basket session** — replace the transient-backed basket with Spektrix's own basket session (cookie-based) via the API.

The frontend JavaScript (`basket.js`, `single-event.js`, `whats-on-filter.js`) does not need to change — it consumes the REST endpoints defined in `northfieldData.restUrl` and the exact payload shape is preserved.

## Accessibility

- WCAG 2.2 AA colour contrast across the palette.
- Semantic landmarks, skip-to-main link, visible focus rings, keyboard-accessible dropdowns, modal, accordion and seating plan.
- `prefers-reduced-motion` respected throughout.
- Public-sector accessibility statement on `/access/`.
- Interactive SVG seating plan uses `role="button"` with keyboard (Enter/Space) activation.

## Performance

- Conditional CSS/JS loading per-template via `inc/enqueue.php`.
- Deferred script strategy for non-critical JS.
- Self-hosted variable fonts with `font-display: swap` and preload.
- No jQuery, no JavaScript frameworks, no CSS preprocessors.
- Images lazy-loaded + `decoding="async"`.

## Deployment

1. Upload the theme directory via SFTP, or commit to a repo and deploy with your preferred tool (Deployer, WP Pusher, `rsync` etc.).
2. Ensure WordPress 6.3+ and PHP 8.0+ are available.
3. On first load the theme will set up pages, menus, CPTs and import events automatically.
4. Set the GA4 Measurement ID in `inc/analytics.php`.
5. Populate the alert banner via the Customizer if needed.

No build step is required — ship the theme as-is.

## Licence

GPL v2 or later. Stock imagery under the Unsplash / Pexels licences. Fraunces and Inter are under the SIL Open Font License.
