Build Log

Opened the Docker stack and found two containers — wordpress on port 8080 and mysql:8.0 — with the web root bind-mounted at ./wordpress. WordPress core was not yet installed: the site was still redirecting to wp-admin/install.php.

Confirmed Salient 18.3.0, its child theme and all ten Salient plugins were present but inactive. The container had no WP-CLI, so the first real action was installing wp-cli.phar 2.12.0 into the container to drive the whole build from the command line.

Pulled ploughwestcliff.co.uk apart: its Yoast sitemap gave twelve pages and five posts; its HTML revealed an Elementor build on hello-elementor, with the Facebook feed delivered through the standard Facebook Page Plugin.

That last detail mattered — it meant the new site could reproduce the same live feed with no API keys, no tokens and nothing to expire. Also recovered: the phone number, the day-by-day hours table, the venue-hire terms (50–100 guests, £150 refundable deposit) and the pub's own claim to 1654.

The old site was thin on the things that actually make The Plough The Plough. The CAMRA pub entry filled the gap: three distinct rooms, Sharp's Doom Bar on cask, darts, sports TV, the rear garden with picnic benches, karaoke every Friday from 8:30pm, live music Sundays from 5pm, kitchen 1pm–9pm, happy hour 5–7pm, and Westcliff station 750m away.

The Facebook page supplied for "Food" turned out to be D'Steakhouse | Essex — "Crafted for meat lovers". That is the kitchen brand running inside the pub, so it became the Food page rather than a generic menu.

Tripadvisor supplied genuine, quotable customer sentiment — including the Irish bands on a Sunday that the CAMRA entry also mentions. Two independent sources agreeing is good enough to build a page on.

Installed WordPress core, set the title to The Plough Westcliff and the tagline to Westcliff-on-Sea since 1654. Switched permalinks to /%postname%/, set the timezone to Europe/London and UK date formats, then cleared out the default Hello World post and sample page.

Activated the Salient child theme and all ten Salient plugins. Hit a wall immediately: the bind-mounted wp-content was owned by the container's www-data user, so nothing could be written from the host. Fixed with a group-writable chown so the build could proceed from either side.

Harvested 36 files from the old site — 23 photographs and 13 brand marks — then built a contact sheet and actually looked at them rather than shuffling filenames blindly.

It was worth it. Among the crowd shots were a warmly lit photo of a band mid-set, a solo guitarist under blue stage light, four different angles of the decked beer garden, the pool table, the main bar — and, best of all, a photograph of the chalkboard by the door listing that month's live music in the landlord's own handwriting. That board became a feature section of its own.

Every photo was renamed semantically (hero-live-band.jpeg, garden-benches.jpeg, board-live-music.jpeg) so the templates read like English.

The existing logo — a shire horse and ploughman above the words The Plough / Traditional Pub & Local — was already light artwork on transparency, which is exactly right for a dark site. It was also only 241 × 120 pixels.

Rather than redraw it, the horse-and-ploughman mark was cut out programmatically by scanning the alpha channel for the empty band above the wordmark, then upscaled 5× with Lanczos resampling and unsharp-masked. The wordmark is now set in live type beside it, so the header lockup stays crisp at any size. A 512px favicon was generated from the same mark.

A dark site for a pub should feel like the inside of one at nine o'clock, not like a developer's IDE. The palette is built on near-black (#0B0B0C) with warmer charcoal panels, lifted by brass (#D6A03C) for anything that would be polished in a real pub, and a deep oxblood for depth. Text is warm cream, never pure white.

Type does the heavy lifting: Oswald condensed for headings and signage, Inter for body copy, and Cormorant Garamond italic for the heritage flourishes. A fine film grain sits over the whole page so the flat blacks read as atmosphere rather than emptiness.

Salient's header is driven by several hundred theme options and fights hard against bespoke design. Rather than bend it, the child theme overrides header.php, footer.php and page.php outright and dequeues the Salient frontend JS that expects markup no longer on the page.

The result: a two-tier sticky header with an address-and-phone strip on top, a live "open now" indicator that calculates state from the real opening hours (including the Friday-night rollover past midnight), the logo lockup, navigation, and a full-screen drawer on mobile.

Every page is assembled from a small vocabulary of section shortcodes — [plough_hero], [plough_rooms], [plough_food], [plough_facebook] and a dozen more. Each takes arguments, so the same section can be reused across pages with different copy.

All of the pub's facts — phone, email, hours, kitchen times, social URLs — live in a single plough_data() array. Change the phone number once and it updates the header, the footer, every call button and the structured data together.

The Facebook timeline is embedded with the official Page Plugin — the same mechanism the old site used, and deliberately so. It needs no app ID, no access token and no plugin licence, and it cannot silently expire. It sits inside a dark browser-chrome frame, sized to the 500px the plugin actually renders at, so a white panel isn't left floating in a dark column.

The kitchen has its own page, so the Food page carries a second feed pointed at D'Steakhouse. Instagram blocks unauthenticated embeds outright, so that section is an honest linked grid of the pub's own photography rather than a feed that would render empty.

Then the build took a turn. The first screenshot of the finished homepage showed the Facebook embed working — and inside it, a photograph of an actual D'Steakhouse menu. So the feed was loaded on its own, at full size, and every image in both pages' timelines was pulled out and read.

The placeholder menu written from general knowledge went in the bin. In its place came the pub's own published artwork:

• The Sunday roast, with real prices — sirloin £17.50, pork shoulder, chicken and nut roast £12.50, three courses from £17.50, kids' roast £10, served Sundays 1pm–4.30pm with a bookings address of dsteakhouseplough@gmail.com.
• The Lite Bites menu — Wednesday, Friday and Saturday, 4pm–10pm.
• The à la carte board — fillet, rib-eye, sirloin and rump, with red wine jus, peppercorn and blue cheese sauces.
• Quiz Night — Wednesdays 7:30pm, teams of six, £2 a player, cash prize and bar tabs, with quiz master Rebecca.
• Karaoke — Friday nights, 8:30pm until late. "Sing loud and sing proud."
• Sunday Sessions — live bands, free admission, and ample parking at Hamlet Court car park, three minutes' walk.

Prices that could not be read cleanly at the resolution Facebook serves were not guessed — those dishes are listed by name and the page sends you to the board at the bar. Dated posters were deliberately left out of the templates so they can't go stale; only the two standing weeknights, which carry no date, are baked in.

Every page was rendered in a headless browser and read back at full size. That caught what code review would not have: Salient's body.plough img reset out-specifying the logo rule, so the horse rendered six times too large and pushed the navigation off-screen; bullet markers on the nav because Salient forces display:list-item; a lone fourth room card stranded on its own row; the chalkboard cropped through its own heading; and a [plough_timeline] shortcode that printed as literal text because its registration was lost in a refactor.

Reset-level rules now go through :where() so they carry zero specificity and never out-rank a component. The rest were sized, re-gridded and re-registered.

Added BarOrPub + Restaurant JSON-LD carrying the address, geo coordinates, founding date, every day's opening hours and the full amenity list — beer garden, live music, karaoke, darts, pool, sports TV, function room, cask ale, late licence. That is what puts the right hours in a Google listing.

Alongside it: a skip link, focus-visible rings throughout, prefers-reduced-motion support that stops the ticker, a keyboard-dismissable mobile drawer, real aria-current on the active nav item, Google's map filtered to suit a dark page, and a sticky call button on mobile — because the single most likely thing a visitor wants from a pub website is the phone number.