# Screenshot manifest — Brentwood client guides For each guide, the screenshots to capture: the exact wp-admin (or front-end) path, the panel/region to shoot, and a caption. The publishing pipeline captures these; the guide files carry the same markers inline as ``. Screenshots target the Brentwood site's own admin (dev now, production later) — never a fixture. **Capture method for sidebar/inspector shots:** capture the FULL viewport (no `--selector`), then crop. Element-cropping races layout shifts on ACF-heavy screens — the bbox is measured, the meta boxes finish loading and move the page, and the pixels come from stale coordinates while the tool still reports success. **The crop rectangles below are specific to brentwooddev's 1600x1200 admin layout** (settings sidebar at x=1320, content starting y=97) and must be re-measured for any other site — a different admin-notice height moves everything. Measure once with a selector run, then clip. ## 00 — Getting started with your Brentwood website - **id:** dashboard-menu **path:** /wp-admin/ **region:** the full left-hand admin menu (Pages, Posts, Staff, Courses, Livestreams, Careers, Brentwood 100, Landing Pages, Timetable, Forms, Users, Guides) **caption:** Everything lives in the menu down the left of the dashboard. - **id:** block-inserter **path:** /wp-admin/post-new.php?post_type=page **region:** the block inserter opened with the + button, showing the Brentwood blocks **caption:** The + button adds a block, including your custom Brentwood blocks. ## 01 — Managing staff profiles - **id:** staff-add-new **path:** /wp-admin/post-new.php?post_type=staff **region:** the whole edit screen — title field, Staff Details box, Profile (self-service) box, Featured image panel **caption:** The Staff edit screen. The person's name is the title at the top. - **id:** staff-departments **path:** /wp-admin/post-new.php?post_type=staff **region:** the Departments taxonomy box in the right-hand sidebar **caption:** Tick one or more departments, or add a new one. - **id:** staff-connect-user **path:** /wp-admin/post-new.php?post_type=staff **region:** the Connect User Account field inside the Profile (self-service) box **caption:** Link a staff member to their login so they can edit their own profile. ## 02 — Managing courses - **id:** course-add-new **path:** /wp-admin/post-new.php?post_type=course **region:** the full edit screen — title field, main content editor, Course Details box, and the Subjects / Grades / Course Categories boxes **caption:** The Course edit screen. Course Details and the taxonomy boxes sit on the right. - **id:** course-details **path:** /wp-admin/post-new.php?post_type=course **region:** the Course Details box — Advanced Placement, Elective and Credit fields **caption:** Advanced Placement and Elective are on/off switches; Credit is free text. - **id:** course-taxonomies **path:** /wp-admin/post-new.php?post_type=course **region:** the Subjects, Grades and Course Categories panels in the right-hand sidebar (shown closed, as they appear on a new course) **caption:** Click Course Categories, Grades or Subjects to open it and tick the terms that apply. ## 03 — Managing livestreams - **id:** livestream-add-new **path:** /wp-admin/post-new.php?post_type=livestream **region:** the full Add Livestream edit screen — title field, Livestream Details box, Featured image panel and Categories box **caption:** The Livestream edit screen. The event's name is the title at the top. - **id:** livestream-details-box **path:** /wp-admin/post-new.php?post_type=livestream **region:** the Livestream Details box — YouTube Video ID, Start Date & Time, Length, and the Unlisted / Live broadcast only switches **caption:** The Livestream Details box holds the video, timing and the two on/off switches. - **id:** livestream-block-settings **path:** /wp-admin/post-new.php?post_type=page **region:** the Brentwood Youtube List block selected on a page, showing the Layout and Filter settings panels in the sidebar **caption:** Insert the block, then use the Layout and Filter panels on the right to control what shows. ## 04 — Posting jobs (Careers) - **id:** careers-add-new **path:** /wp-admin/post-new.php?post_type=bw_career **region:** the full Add Posting screen — title field, main content area, Posting Details box and Page Attributes box **caption:** The Careers edit screen. The job title goes at the top; the description goes in the main content area. - **id:** careers-posting-details **path:** /wp-admin/post-new.php?post_type=bw_career **region:** the Posting Details box, showing the Open Message and Button Link fields side by side **caption:** Open Message is the bold line beside the button; Button Link is where Apply Now sends people. - **id:** careers-block-settings **path:** /wp-admin/post-new.php?post_type=page **region:** a page with the Brentwood Careers block inserted, showing its Button & empty state settings panel in the right-hand sidebar **caption:** The Brentwood Careers block lists every open posting automatically — only the button text and empty-state message are configurable. ## 05 — Managing the Brentwood 100 - **id:** bw100-add-new **path:** /wp-admin/post-new.php?post_type=bw_hundred **region:** the full Add New Item screen — title field, Featured image panel and Brentwood 100 Details box **caption:** The Brentwood 100 item edit screen. - **id:** bw100-gallery **path:** /wp-admin/post-new.php?post_type=bw_hundred **region:** the Gallery images field inside the Brentwood 100 Details box **caption:** Add extra photos beyond the cover — they show in the pop-up for Modal items. - **id:** bw100-grid-block **path:** /wp-admin/post-new.php?post_type=page **region:** the Brentwood 100 Grid block on the canvas, with the Grid panel open in the settings sidebar **caption:** Insert the block and set how many columns show per row. ## 06 — Building landing pages - **id:** landing-add-new **path:** /wp-admin/post-new.php?post_type=landing **region:** the full Add Landing Page screen — title field and Page Settings box in the sidebar **caption:** The Landing Page edit screen — the same block editor as a page. - **id:** landing-hero-off **path:** /wp-admin/post-new.php?post_type=landing **region:** the Page Settings box in the sidebar, showing the Hero type field set to Off — no hero **caption:** New landing pages start with the hero off. Change Hero type to switch one on. - **id:** landing-list-view **path:** /wp-admin/edit.php?post_type=landing **region:** a row in the All Landing Pages list with the row actions showing **caption:** Hover a row and click View to open the page and copy its address. ## 07 — Writing & publishing blog posts - **id:** blog-add-new **path:** /wp-admin/post-new.php **region:** the full Add New Post screen — title field, content editor, Blog Details box, Categories box and Featured image panel **caption:** The Add New Post screen. The Blog Details box (with the Author field) sits below the content editor. - **id:** blog-author-field **path:** /wp-admin/post-new.php **region:** the Blog Details box below the content editor, showing the Author field **caption:** The Author field sets the byline shown on the post — separate from the account that publishes it. - **id:** blog-categories **path:** /wp-admin/post-new.php **region:** the Categories box in the right-hand sidebar **caption:** Tick one or more categories, or add a new one. - **id:** blog-block-query **path:** /wp-admin/post-new.php?post_type=page **region:** the Brentwood Blog block selected on a page, with its settings panel open in the sidebar (Layout, Featured post and Query panels) **caption:** Insert the Brentwood Blog block, then use the sidebar panels to control what it shows. - **id:** blog-status-date **path:** /wp-admin/post-new.php **region:** the Status / Publish / Slug / Author panel at the top of the settings sidebar, showing the Publish date **caption:** Click the date next to Publish to change when a post is dated. ## 08 — Page settings: titles, heroes and the footer image - **id:** page-settings-panel **path:** /wp-admin/post-new.php?post_type=page **region:** the Page Settings panel (scroll below the content area) **caption:** The Page Settings panel, where the hero, title and footer image live. - **id:** page-settings-hero-type **path:** /wp-admin/post-new.php?post_type=page **region:** the Hero type dropdown in Page Settings, opened to show the options **caption:** One Hero type choice decides what the banner shows. - **id:** page-settings-focus **path:** /wp-admin/post-new.php?post_type=page **region:** the Featured image focus / zoom / height controls in Page Settings **caption:** Focus and zoom choose which part of a photo stays in the banner. ## 09 — Editing the timetable - **id:** tt-overview **path:** /wp-admin/admin.php?page=timetable-management **region:** the whole Timetable settings page — the page heading "Edit Timetable Content", the How this works box, and the Content Panels / Academic Block Rotation tabs **caption:** The Timetable page. Content Panels and Academic Block Rotation are separate tabs. - **id:** tt-panel-row **path:** /wp-admin/admin.php?page=timetable-management **region:** the Timetable Panels list — the first category row opens expanded, showing Heading, Body Text, Panel Image, Block Background Images and the "Learn more" link; the other categories sit collapsed below **caption:** An expanded category panel, showing every editable field. **capture:** `--selector ".acf-field[data-name='tt_panels']" --trim` — no interaction needed, the first repeater row is expanded by default. - **id:** tt-bg-gallery **path:** /wp-admin/admin.php?page=timetable-management **region:** the Block Background Images field on the first (expanded) category row — its photo strip and the Add to gallery button **caption:** Block Background Images — the faint photos cycled behind a category's blocks in the grid. **capture:** `--selector ".acf-field[data-name='tt_gallery']" --trim` - **id:** tt-rotation-tab **path:** /wp-admin/admin.php?page=timetable-management **region:** the Academic Block Rotation tab — Rotation Heading, Day Columns, Period Rows and Block Colours **caption:** The Academic Block Rotation tab, where the table's days, periods and colours are set. - **id:** tt-block-sidebar **path:** /wp-admin/post-new.php?post_type=page **region:** the Brentwood Timetable block's settings panel in the right-hand sidebar (Initial view, Show Academic Block Rotation) **caption:** The Brentwood Timetable block's own settings. **capture:** must be captured by INSERTING the block on a new page (insertion auto-selects it), with `--reset-ui --region block-inspector`. Opening the existing Unique Timetable page (post 1047) and clicking the block does NOT select it — it's server-rendered, so the synthetic click lands on inert markup and the inspector stays on "No block selected" while still reporting `selectorFound: true`. ## 10 — Adding images and video (Brentwood blocks) - **id:** blocks-inserter **path:** /wp-admin/post-new.php?post_type=page **region:** the block inserter (+) panel with 'Brentwood' typed in the search box, showing the Brentwood blocks in the results **caption:** Type 'Brentwood' in the inserter to see the whole set of Brentwood blocks. - **id:** images-card-settings **path:** /wp-admin/post-new.php?post_type=page **region:** a selected Brentwood Images block with its Settings panel open, showing Card layout, Label style and Behavior **caption:** A Brentwood Images card, with its layout and behaviour settings on the right. - **id:** gallery-layout **path:** /wp-admin/post-new.php?post_type=page **region:** a selected Brentwood Image Gallery block with the Layout options (Brick, Mosaic, Feature, Single) in its Settings panel **caption:** The Brentwood Image Gallery and its four layout choices. - **id:** videotext-settings **path:** /wp-admin/post-new.php?post_type=page **region:** a selected Brentwood Video Text block with the Layout and Video (Source, YouTube / Upload) panels in its Settings **caption:** Brentwood Video Text: choose a layout, then a video source. ## 11 — Adding content blocks (Brentwood blocks) - **id:** insert-brentwood-block **path:** /wp-admin/post-new.php?post_type=page **region:** the block inserter (+) open on a page, with "Brentwood" typed in the search box, showing the list of Brentwood blocks **caption:** Type "Brentwood" in the + inserter to see every Brentwood block in one place. - **id:** faq-accordion-build **path:** /wp-admin/post-new.php?post_type=page **region:** a Brentwood FAQ Accordion selected on a page — its FAQ Text Section and FAQ Items, with the Image, Layout and Colours settings in the right-hand sidebar **caption:** An FAQ Accordion is built from an intro FAQ Text Section plus one FAQ Item per question. ## 12 — Managing forms and inquiries - **id:** forms-entries **path:** /wp-admin/admin.php?page=gf_entries&view=entries&id=1 **region:** the entries list for Admissions Inquiries (migrated) — unread rows in bold, the star column, and the Mark read / Mark unread links on a row **caption:** Every submission is an entry. Unread ones are bold; click the star to flag one. - **id:** forms-export **path:** /wp-admin/admin.php?page=gf_export&view=export_entry **region:** the Export Entries panel — Select a Form, Select Fields and Select Date Range **caption:** Pick a form and, optionally, a date range, then download a CSV of entries. - **id:** forms-notifications **path:** /wp-admin/admin.php?page=gf_edit_forms&view=settings&subview=notification&id=1 **region:** the Notifications list for a form, and the Send To field on the notification edit screen **caption:** Open a notification and set Send To → Enter Email to change who's emailed. - **id:** forms-editor **path:** /wp-admin/admin.php?page=gf_edit_forms&id=1 **region:** the form editor — the Add Fields panel on the right and the field list in the centre **caption:** Drag a field in to add a question; click an existing one to edit it. - **id:** forms-block **path:** /wp-admin/post-new.php?post_type=page **region:** the Gravity Forms block added to a page, with its settings panel open on the right (Select a Form, Show Form Title, Show Form Description) **caption:** Add the Gravity Forms block, then choose the form from the settings panel. ## 13 — Managing users and roles - **id:** user-add-new **path:** /wp-admin/user-new.php **region:** the Add New User form — Username, Email and Role fields **caption:** Add a user with their Brentwood email and a role. - **id:** user-role-column **path:** /wp-admin/users.php **region:** the All Users list with the Role column and the "Change role to…" bulk box **caption:** Everyone's role at a glance, and where to change roles in bulk. ## 14 — Signing in - **id:** signin-google-button ✅ captured **path:** /wp-login.php **region:** the Sign in with Google button and the divider above the username and password fields **caption:** The sign-in page. Click Sign in with Google to use your Brentwood account. **capture:** needs `--anonymous` (`--anonymous --selector "#login" --trim`). Without it the tool mints a session cookie and `/wp-login.php` redirects to the Dashboard, so the shot is impossible. - **id:** signin-wrong-domain ⚠️ **NOT CAPTURED — by agreement, prose instead** **path:** /wp-login.php **region:** the error notice shown above the sign-in form **caption:** What you'll see if you choose a non-Brentwood Google account. **why not captured:** this state only appears after a genuinely rejected Google round-trip, which means real external navigation and a real failed auth — the capture tool aborts all external hosts by design. Guide 14 documents it in prose using the exact message from `bw-google-login.php` ("That Google account is not permitted. Use your @brentwood.ca account."), which is better than manufacturing an error state for a screenshot. - **id:** signin-log-out **path:** /wp-admin/ **region:** the account menu in the top right of the admin toolbar, expanded to show Log Out **caption:** Click your name in the top right, then Log Out. ## 15 — Updating your own staff profile - **id:** my-profile-view **path:** /my-profile/ **region:** the profile view with the Edit Profile button at the top **caption:** Signing in takes you straight to your own profile. - **id:** my-profile-edit **path:** /my-profile/?edit=1 **region:** the Edit Profile form — name, credentials, departments, biography and the Upload A Photo panel **caption:** Everything you can change is on one screen. ## 16 — Managing page SEO - **id:** seo-box-tabs **path:** /wp-admin/post-new.php?post_type=page **region:** the whole SEO box below the content area, showing its SEO / Readability / Social tabs **caption:** The SEO box. It opens on the SEO tab; Readability and Social sit next to it. - **id:** seo-snippet-preview **path:** /wp-admin/post-new.php?post_type=page **region:** the SEO tab's Google preview, showing the SEO title and meta description fields **caption:** Click the preview to edit the SEO title and meta description directly. - **id:** seo-social-tab **path:** /wp-admin/post-new.php?post_type=page **region:** the Social tab, showing the Facebook and X sections **caption:** The Social tab. Facebook and X each get their own title, description and image. ## 17 — Editing the site menus - **id:** menus-elements-list **path:** /wp-admin/edit.php?post_type=kadence_element **region:** the Elements list table **caption:** The eleven navigation elements: nine mega menus, the header sub-nav, and the footer. - **id:** menus-navigations-list **path:** /wp-admin/edit.php?post_type=kadence_navigation **region:** the Navigations list table under the Kadence menu **caption:** Open a navigation here to edit the links inside a mega menu or footer column. - **id:** menus-edit-link **path:** /wp-admin/post.php?post=22231&action=edit **region:** a link block selected in the editor, showing its text and the link toolbar **caption:** Click a link, then use the link icon in its toolbar to change where it goes. - **id:** menus-subnav-box **path:** /wp-admin/post-new.php?post_type=page **region:** the Sub Nav box in the right-hand sidebar **caption:** Choose which menu shows as the sub-navigation strip on this page, and whether it carries down to its child pages. ## 18 — Fixing broken links with redirects - **id:** redirects-add-new **path:** /wp-admin/tools.php?page=redirection.php **region:** the Add New Redirection panel at the top of the Redirects tab — Source URL, Target URL and the Add Redirect button **caption:** Add a redirect by pointing an old address at a new one. - **id:** redirects-404-log **path:** /wp-admin/tools.php?page=redirection.php&sub=404s **region:** the 404s tab list, showing not-found addresses and how many times each was hit **caption:** The 404s tab shows real broken links visitors have hit on the live site. ## 19 — Brentwood blocks at a glance - **id:** brentwood-blocks-list **path:** /wp-admin/post-new.php?post_type=page **region:** the block inserter (+) panel with "Brentwood" typed in the search box, showing the Brentwood blocks with their red icons **caption:** Type "Brentwood" in the inserter to see the whole set. Ours have red icons. **capture:** `--actions "click:.editor-document-tools__inserter-toggle; waitfor:.block-editor-inserter__search input; type:.block-editor-inserter__search input|Brentwood; wait:1200" --selector ".interface-interface-skeleton__secondary-sidebar" --trim` (same screen as `blocks-inserter` in guide 10 — captured separately so each guide owns its own image)