Ward&Westminster Hugo Theme

You are an expert at working with the Ward&Westminster Hugo theme - a sophisticated theme designed for long-form editorial content with features like series navigation, corrections tracking, author pages, and responsive image processing.

Project Context

Ward&Westminster is a Hugo theme deployed to GitHub Pages. It's mobile-first, includes dark mode support, and is optimized for reading long-form articles.

Development Workflow

When working with this project:

1. **Run dev server** from exampleSite directory:

- `cd exampleSite && hugo server --themesDir ../.. --theme wardwestminster`

- Add `-D` flag to show drafts

2. **Build production** from root (layouts are in root):

- `hugo --gc --minify`

3. **Create new content:**

- `hugo new posts/article-title.md`

4. **Test deployment** - GitHub Actions automatically deploys on push to main/master

Architecture Overview

Directory Structure

```

wardwestminster/

├── .github/workflows/hugo.yml # GitHub Pages deployment

├── archetypes/default.md # Content template

├── assets/

│ ├── css/main.css # All styles (variables, dark mode)

│ ├── js/main.js # Nav, progress, animations

│ └── images/ # Processed images

├── content/

│ ├── posts/ # Articles

│ ├── authors/ # Author archives

│ ├── about.md

│ └── search.md

├── data/

│ ├── authors.yaml # Author metadata

│ └── series.yaml # Series metadata

├── layouts/ # Hugo templates

├── static/

│ ├── CNAME

│ └── pdf/ # PDF embeds

└── hugo.toml # Configuration

```

Layout Hierarchy

Key Partials

| Partial | Purpose |

|---------|---------|

| `nav.html` | Fixed navigation with mobile menu |

| `picture.html` | Responsive images (WebP + srcset) |

| `reading-time.html` | Medium-style reading time (265 WPM) |

| `toc.html` | Auto-generated table of contents |

| `series-nav.html` | Series "Part X of Y" navigation |

| `corrections.html` | Corrections/versioning display |

| `share.html` | Social share buttons |

| `head-custom.html` | Extension point for custom styles |

| `scripts-custom.html` | Extension point for custom JS |

Content Management

Front Matter Template

```yaml

---

title: "Article Title"

date: 2025-12-15

draft: false

description: "SEO description"

subtitle: "Optional subtitle"

author: "Dr Matt Kneale" # Must match data/authors.yaml

categories: ["Tech"]

tags: ["AI", "Healthcare"]

featured_image: "/images/header.png"

featured_image_alt: "Accessibility text"

featured_image_caption: "Optional caption"

series: ["Series Name"] # Optional

series_weight: 1 # Part number

lastmod: 2025-12-20 # Shows "Updated"

corrections: # Optional

- date: 2025-12-18

type: correction # correction | update | clarification

description: "Fixed statistics error"

---

```

Use `<!--more-->` for summary break point.

Series / Multi-Part Articles

**1. Add series front matter:**

```yaml

series: ["NHS Data Scandal"]

series_weight: 1 # Part 1, 2, 3...

```

**2. Add series metadata (optional) in `data/series.yaml`:**

```yaml

"NHS Data Scandal":

title: "NHS Data Scandal"

description: "Investigative series on data governance"

featured_image: "/images/series/nhs.jpg"

```

**Features:**

Corrections & Versioning

```yaml

lastmod: 2025-12-20 # Triggers "Updated" indicator

corrections:

- date: 2025-12-18

type: correction # Red badge - factual errors

description: "Corrected percentage from 45% to 35%"

- date: 2025-12-20

type: update # Burgundy - new information

description: "Added NHS spokesperson response"

- date: 2025-12-19

type: clarification # Blue - clarity improvements

description: "Clarified timeline in paragraph 3"

```

Author System

**1. Define in `data/authors.yaml`:**

```yaml

"Dr Matt Kneale":

name: "Dr Matt Kneale"

bio: "Emergency medicine clinical fellow..."

avatar: "/images/authors/matt-kneale.jpg"

twitter: "drmattuk"

bluesky: "drmattuk.bsky.social"

```

**2. Create archive page: `content/authors/{slug}.md`** (minimal front matter)

Styling & Customization

CSS Variables (`:root` in `main.css`)

**Colors:**

**Typography:**

**Layout:**

**Dark Mode:** Automatic via `prefers-color-scheme`. Override with `body.dark-mode` / `body.light-mode` classes.

Extension Points

Shortcodes

```markdown

{{< pullquote cite="Author" >}}Quote text{{< /pullquote >}}

{{< break symbol="◇" >}}

{{< figure-wide src="/image.jpg" alt="..." caption="..." >}}

{{< pdf src="/pdf/doc.pdf" width="100%" height="600px" caption="..." >}}

```

Responsive Images

Use `picture.html` partial for automatic WebP + srcset:

```html

{{ partial "picture.html" (dict "src" .Params.featured_image "alt" "Description" "class" "article-image" "loading" "lazy") }}

```

Generates 480w, 800w, 1200w WebP variants with JPG fallback.

Configuration Reference

```toml

baseURL = "https://wardwestminster.com/"

languageCode = "en-GB"

title = "Ward&Westminster"

[pagination]

pagerSize = 10

[taxonomies]

category = "categories"

tag = "tags"

series = "series"

[permalinks]

posts = "/:year/:month/:slug/"

[params]

description = "Site description"

tagline = "Medicine · Tech · Politics"

topics = ["Medicine", "Tech", "Politics"]

[params.social]

twitter = "wardwestminster"

bluesky = "wardwestminster.bsky.social"

[outputs]

home = ["HTML", "RSS", "JSON"] # JSON for search

[markup.goldmark.renderer]

unsafe = true # Allow HTML in markdown

[markup.tableOfContents]

startLevel = 2

endLevel = 3

[related]

includeNewer = true

threshold = 80

[[related.indices]]

name = "categories"

weight = 100

[[related.indices]]

name = "tags"

weight = 80

```

Development Conventions

Deployment

GitHub Actions workflow (`.github/workflows/hugo.yml`) automatically builds and deploys to GitHub Pages on push to main/master. DNS managed via Cloudflare with CNAME in `static/`.

Instructions

When working with this theme:

1. **Always verify Hugo version compatibility** (0.153.2 extended)

2. **Use the correct working directory** (`exampleSite` for dev server, root for build)

3. **Maintain author data in `data/authors.yaml`** before referencing in front matter

4. **Place images in `assets/images/`** (not `static/`) for processing

5. **Use `picture.html` partial** for responsive images (never raw `<img>` tags)

6. **Test series navigation** when adding multi-part articles

7. **Add corrections with proper type** (correction/update/clarification)

8. **Check dark mode appearance** after CSS changes

9. **Verify mobile responsiveness** (theme is mobile-first)

10. **Test GitHub Pages deployment** after structural changes

Common Tasks

**Add new article:**

1. `hugo new posts/article-name.md`

2. Fill front matter (author must exist in `data/authors.yaml`)

3. Add `<!--more-->` for summary break

4. Place images in `assets/images/posts/`

**Create series:**

1. Add series front matter to each article

2. Optionally add series metadata to `data/series.yaml`

3. Verify "Part X of Y" navigation displays

**Add correction:**

1. Update `lastmod` date in front matter

2. Add correction entry with date, type, description

3. Verify correction box displays above content

**Customize styling:**

1. Override CSS variables in `layouts/partials/head-custom.html`

2. Or modify `assets/css/main.css` directly

3. Test both light and dark modes