# Web Development Thoughts — Brentwood WordPress Build *My (Adi's) working notes, as a human dev, on building the WordPress version of the Brentwood site. Companion to my page-by-page block survey in [`tmp/Block planning @brentwood.pdf`](./tmp/Block%20planning%20@brentwood.pdf).* --- ## Foundations ### Header The header is a complex setup, but it should still be easy to manage with menu + sub-menu. The challenge is that it's **not a basic menu** — it's a **contextual menu** that shows child menu items on inner pages, specific to the selected top-level item (e.g. under *Academics* you see Choice / Support / Unique Timetable / etc). So we need some kind of conditional display, but it should stay manageable from the normal **Appearance → Menus** in WordPress. Options to solve it: - conditional menu items, or - a **Kadence Element**, or - a custom `header.php` in the child theme. I lean Kadence-first for editability, custom only where the contextual logic forces it. ### Body template It's a **boxed layout**. We'll mimic the live-site style with the signature **red vertical line** — at ~30% from the left on desktop, and hard to the left edge on mobile. This is body styling via CSS on the content wrapper; set it up once so every page inherits it. ### Footer The footer is custom too, and it reads as **integrated with the body** — the footer area appears consistently throughout the pages. Should be doable as a Kadence footer. --- ## Custom blocks These live in the **child theme**, so they're versioned with our code. The aim: make the **page editor easy** for non-technical staff, and keep **build consistency**. > **Steer:** most of the blocks below are really the *same few blocks with different layout options*. > The win is to build ~**6–8 real blocks** with layout options, use **Kadence Row / Advanced Query Loop** > for the simple ones, and let the dynamic lists ride on the CPTs — instead of 25 separate blocks. ### Hero Media A Gutenberg block to mimic the live-site **page-title media area** (a.k.a. the "featured image" area above the page title). One block with options for what media shows: - single image - slider - dual images - YouTube video - MP4 video ### Page Title A block to produce the page title **H1**, with an editor area below it for content / button / table-nav, a **dashed grey separator**, and a top margin — so on a 100vh hero the title still sits **above the fold** (like the homepage and `/giving`). ### Text with Dual Image Left and right images with a **text column in the middle** (e.g. `/`). Looks simple, but it isn't — the **mobile collapse** is the tricky part, so I'd build a proper custom block for it. ### Table Layout for Links A simple block to output "table-like" link grids — e.g. on `/academics` the Courses / AP Courses / Facilities / Faculty links shown in a table look. ### Video Video + text, with several **layout options** (Layout 1, 2, 3, …). Source selectable: **YouTube or file (MP4)**, with a play-video icon on click. - **Ask Rian:** can we improve consistency by having **fewer layout options** across the site, instead of a different layout on each page with no consistent styling? (Refs: `/academics`, `/athletics/facilities`.) ### Lightbox Image with Border Line + Text Image on the left with the border line, text on the right (e.g. the *Student Support* section on `/academics`). The image has a **zoom (+) lightbox icon**. - **Ask Rian / negotiate:** if the + icon is droppable, this becomes a plain **Kadence Row** and we don't need a custom block. I'd push to drop it. ### Testimonial A testimonial section in a few arrangements: - image-right (with lightbox) - image-left (e.g. `/why-brentwood/university-placement`) - centered, text-only (e.g. `/student-life`) One block with an **image-left / image-right / center** option. Could be a Reusable Block, but I lean custom block for consistency. ### Table Link Probably just **table-link layout 2** — same idea as *Table Layout for Links* above. ### Sub-Page Interlinking A block ("Sub page interlink") with several **layout options**: - layout 1 — angled crop - layout 2 — equal cards (like the grade cards) - layout 3 — as needed, etc. - also a **"Single"** interlink variant Examples: `/academics/ap-courses`, `/academics/courses`, the `/apply` "more information" row, `/why-brentwood`. ### Linked Image Cards Similar to *Sub-Page Interlinking* — probably **interlink layout 2** (e.g. the grade cards 8–12 on `/academics/courses`). ### Team Grid The faculty photo grid (e.g. `/academics/faculty`). Potentially use **Kadence Advanced Query Loop** against the Staff profiles, so editors get filtering for free and we don't build a bespoke block. ### Negative-Margin Section (Text + Button + Link Grid) The card that overlaps up into the hero with a **negative top margin** — heading, text, *Apply Now* button, and a link grid inside (e.g. `/admissions`). Custom-ish because of the overlap + the inner grid. ### Page Interlinking Interlinking block, **layout 3**. ### Page Grid Interlink with Image Interlinking block, **layout 4** — e.g. the athletics grid on `/athletics`, where each image has the sport name + a *Terms 1, 2, 3* label. ### Search A search-results page with **filters on the left**: pages, livestreams, courses, blogs, announcements, photos — with a per-page count (e.g. the `/archives@brentwood.ca` example). Our WP search needs to keep these facets, since the current site has them. ### YouTube List — Completed Events The Video/YouTube block should have a **"Completed Events" layout** (e.g. `/live`). This is the **livestream list**: ~205 items, pagination, each row with a YouTube thumbnail + *Watch Recording* link, scheduled date/time, a **timezone switch** (Brentwood PDT ↔ Asia/Jakarta GMT+7), and a search box. Rides on the **Livestream CPT**. ### 2-Image News A news layout with **two images** (e.g. `/news`) — part of the Posts / News listing styling. ### Text and Video / Embed YouTube with Text More **variations of the Video block** (e.g. `/student-life/student-services`, `/why-brentwood`). The video block should let us select source (YouTube or MP4). If we can negotiate, better to reuse one consistent YouTube layout than build each variation. ### Text Section Curve with Page Interlink Another single interlink, done with a **Kadence Row** layout (e.g. `/why-brentwood`). --- ## Decisions to confirm with Rian (before we start building) 1. **Consolidate layouts** — can we standardise the Video + Interlink layout variations to a few options (consistency over pixel-matching every page)? 2. **Lightbox + icon** — can we drop the zoom "+" so the image-with-border becomes a plain Kadence Row (saves a custom block)? 3. **Dark mode** — only found on `/arts/arts-gallery`. Do we need it at all? My recommendation: skip unless there's budget for a second styling.