Sea Brand for Brighton & Hove LGBT Switchboard
Your new website,
explained.
A plain-English guide to how your Switchboard website is built, how to manage it day-to-day, and the thinking behind every design decision.
A plain-English guide to how your Switchboard website is built, how to manage it day-to-day, and the thinking behind every design decision.
Sea Brand was founded with a clear mission: to build bespoke websites that look great, deliver on strategic goals, and help changemakers achieve what they set out to do.
A big part of that mission is building websites that internal teams can manage and adapt to change themselves — because nothing slows an organisation down more than a website that requires a developer for every small update.
Every decision made in building your Switchboard website was guided by this principle. You should feel confident adding a new staff member, updating a service description, or linking a new resource — without needing to call anyone.
If something can be done without code, it is done without code. Code only appears where it genuinely needs to — working quietly in the background so the rest of the site can be managed visually.
Switchboard's previous website ran on WordPress. There was a strong case to keep WordPress as the platform — most of your content and data was already in the system, and the team was familiar with it.
However, the old website had a common WordPress problem: too many plugins that didn't talk to each other, each downloaded for a very specific one-off purpose. The design was mostly hardcoded, based on a content editor that wasn't flexible enough for the organisation's evolving needs.
Sea Brand's philosophy is to keep things as simple as possible. The entire Switchboard website runs on just four plugins:
The visual design and layout engine. Handles everything you see on screen.
Stores structured data — staff details, service info, relationship links.
Manages search engine visibility and metadata for all pages and posts.
Provides language accessibility across the entire site.
This minimal plugin footprint keeps the website fast, stable, secure, and easy to maintain. Every piece of functionality is covered by one of these four tools — there is no need to add more.
Adding new plugins always carries risk — compatibility issues, security vulnerabilities, and performance problems. Before installing any new plugin, ask: can this be achieved with Oxygen Builder, ACF, or a small custom code snippet? In most cases, the answer is yes.
The website is built around a clear, connected structure. Think of it as a set of content types that can talk to each other — passing information back and forth so that the right content appears in the right place automatically.
At the top level, the website is organised around three hub pages that visitors can navigate to. Each hub aggregates related content as cards:
Displays all active Switchboard services, each linking to its own service page.
Showcases Switchboard's training offerings for external organisations.
Signposting to urgent support resources, linked directly to relevant services.
The website uses relationship fields to connect content types together. This means a single piece of content — say, a training session — can appear on the Training hub, the Services hub, or both, simply by selecting the relevant hubs in the content editor. No duplication. No developer needed.
The same flexibility applies to Documents, CTAs (call-to-action blocks), and Recover With Pride resources. These can all be assigned to multiple pages or services at once, from the same edit screen where you write the content.
Every section of the website is able to connect to another and send or receive information — all held together by Oxygen Builder. Most content management scenarios can be handled entirely within this system, without the need for additional plugins or developer involvement.
WordPress organises content into post types. Some are built into WordPress itself (Posts, Pages). Others were created specifically for Switchboard — these are called Custom Post Types (CPTs). Each post type has its own template in Oxygen Builder, meaning new content always appears with the correct layout automatically.
| Post Type | What it stores | Title field | Featured image |
|---|---|---|---|
| Staff | Team member profiles, role, contact, pronouns | Staff member's name | Profile photo |
| Services | All Switchboard services and their details | Service name | Service image |
| Training | Training programmes offered externally | Training name | Training image |
| Posts | News, jobs, and updates | Article headline | Article image |
| Trustees | Board member profiles | Trustee's name | Profile photo |
These post types don't have public-facing archive pages but play a vital role in how the site connects and displays content:
| Post Type | Purpose | How it's used |
|---|---|---|
| Hubs | The three hub categories | Services, Training, etc. are linked to a hub via a relationship field |
| Documents | Downloadable files and reports | Assigned to services or pages via relationship field — appear as download cards |
| RWP Resources | Recover With Pride content items | Appear in the RWP accordion on subpages, pulled by relationship field |
| CTAs | Call-to-action blocks | Flexibly assignable to any page or service via relationship field |
Wherever WordPress's built-in fields could store information, we used them rather than creating new custom fields:
Custom fields only appear where WordPress's built-in fields are not sufficient — for example, storing a job title, pronouns, referral form shortcode, or the relationship link to a hub.
↑ Back to topOxygen Builder is the visual design editor used to build the entire Switchboard website. It works as a theme builder — controlling not just individual pages, but the global templates applied to all posts, services, and other content types.
Almost every aspect of the website — layouts, colours, typography, spacing — can be changed visually within Oxygen Builder, without writing any code. The only exceptions are a small number of helper elements written in PHP or JavaScript, used specifically to handle ACF relationship field queries.
A single template is created and automatically applied to all posts of a given type. This means:
Find all templates at Oxygen Builder → Templates in the WordPress dashboard.
| Template | Applies to |
|---|---|
| Navigation | Main menu — applies site-wide to every page |
| Footer | Global footer — applies site-wide to every page |
| Single Service | All service pages, such as Domestic Abuse — except Recover With Pride |
| RWP Template | The Recover With Pride service page and all its child pages only (see below) |
| Single Training | All training pages, such as Gambling Harm Training |
| Single Page | All standard pages, such as Governance or Volunteer With Us |
| Single Post | All blog posts and news articles |
| News | The news archive page listing all published articles |
Recover With Pride sits within the Services section but functions as a hub in its own right. When you open it, a submenu appears linking to its child pages — each covering a specific programme area such as 1:1 Coaching, LGBTQ+ Resources, or Group Coaching.
A condition has been built into Oxygen so that the standard Single Service template does not apply to Recover With Pride. Instead, a dedicated RWP Template applies specifically to the Recover With Pride service page and any page whose parent service is Recover With Pride.
Go to Services → Add New Service. Fill in your content as normal. Then make sure you do two things:
1. Set Recover With Pride as the Parent Service in the page attributes panel.
2. Select Recover With Pride as the Service Category.
Both steps are required. They activate the RWP Template and unlock the specific custom fields that connect the page to RWP resources.
Oxygen Builder 6 includes a Global Settings panel where the entire site's visual foundation is defined — brand colours, typography, button styles, and spacing variables. Any change made here cascades across the entire website instantly.
| Setting | Value | Used for |
|---|---|---|
| Brand colour | #360568 (deep purple) | Headings, hero backgrounds, footer |
| Links colour | #FF595E (salmon) | All hyperlinks site-wide |
| Background | #F9F5E3 (oldlace) | Page background |
| Body font | Poppins (Google Fonts) | All body text |
| Heading font | Amifer (Adobe Fonts) | All headings and display text |
Log in at /wp-admin and find Oxygen Builder in the left sidebar.
This shows all templates in the system — for pages, services, staff, training, posts, and more.
Opens the visual editor for that template. Changes here affect all content of that type.
Editing a template changes the design for every post of that type. If you only need to change the content of one specific post, edit the post itself in WordPress — not the template in Oxygen.
CSS classes are named groups of visual style rules. Instead of defining a colour, font size, or spacing value on each element individually, a class gives that style a name — and can then be applied to any element anywhere on the site.
Think of CSS classes like clothing labels. Instead of writing "blue, slim-fit, cotton" every time you reference a particular item, you just call it "the navy shirt". Change what that label means once, and it updates everywhere it's referenced.
In the same way, a class like .headline on the Switchboard website means "bold, with bottom margin, in the brand font." Apply that class to any text element and it instantly looks right. Update the class once, and every headline across the site updates automatically.
In Oxygen Builder 6, classes are managed through the Selectors panel. When you select an element in the visual editor, you can apply an existing class, create a new one, or browse the global selector library. Classes on the Switchboard website are organised into collections — Text Styles, Sections & Wrappers, Utility Classes, Decorative Classes — which makes them easy to find.
All CSS classes are documented in the accompanying Design System Style Guide. This living reference shows every class, what it does, which pages it appears on, and a live rendered example.
Colours and spacing values in the Switchboard stylesheet use CSS variables — named tokens like --brand, --salmon, or --m — rather than hardcoded values. This means changing the brand colour in one place updates every element that references it across the entire site.
Oxygen Builder 6 introduces Components — reusable, self-contained design elements that can be dropped into any page or template. Design it once, use it everywhere, update it in one place.
A Component in Oxygen is a group of elements — layout, text, images, buttons — saved as a single named unit. When that Component is placed on a page, it renders consistently every time. When you edit the Component itself, every instance of it across the website updates automatically.
When a set of cards needs to be displayed from a dynamic list, Oxygen Builder's Post Builder element creates a loop that repeats the card component for each matching post. For ACF relationship fields, a custom array query written in PHP reads the relationship field values, extracts the post IDs, and passes them to Oxygen's loop builder.
ACF stores relationship field values as a serialised list of post IDs. The PHP array query reads this list, extracts the IDs, and returns them to Oxygen's loop builder in a format it understands — producing a fully dynamic, automatically updating list of cards.
Advanced Custom Fields (ACF) stores all structured information that doesn't fit into WordPress's standard title, content, or featured image fields. It adds clearly labelled input fields below the Gutenberg editor on each post type's edit screen.
| Field Type | What it does | Example |
|---|---|---|
| Text | Stores a single line of text | Job title, pronouns, shortcode |
| WYSIWYG | Rich text editor for formatted copy | Why It Matters, Who It's For, disclaimer text |
| Image | Stores an uploaded image | Service logo, partner logo |
| File | Stores an uploaded file and its URL | Document downloads on governance pages |
| Relationship | Links this post to one or more posts of another type | Service → Hub, Service → Staff, Service → Documents |
| Gravity Forms | Stores a form shortcode | Referral form assigned to a service page |
Relationship fields are the most important field type on the Switchboard website. When you open a service post in the WordPress editor, you will see relationship fields to:
These relationship fields display as a search-and-select picker, showing the available posts to choose from.
↑ Back to topThere is an intentional distinction between post types (Staff, Services, Training, etc.) and pages (Governance, Jobs, Volunteer With Us, etc.).
Custom post types follow a strict, standardised structure. Their templates apply consistently to every post of that type. The Gutenberg post content field is used for the main descriptive text because it maps directly into a fixed location in the template. These post types are expected to change frequently — the template-driven approach means anyone can add or update content without touching the design.
Pages like Governance, Jobs, and Volunteer With Us lean more heavily into Oxygen Builder's flexible visual editor for their layout, because their structure tends to be more unique. They have custom fields, but fewer of them. These pages are anticipated to change less frequently.
Post types (Services, Staff, Training, etc.) → edit the post in WordPress. The template handles the design automatically.
Pages (Governance, Jobs, etc.) → edit content in WordPress for text changes; edit in Oxygen Builder for significant layout changes.
Find Staff in the WordPress dashboard left sidebar.
This is what appears as the staff member's name across the site.
Click Set featured image in the right sidebar and upload the photo.
This is the main Gutenberg editor area. Keep it clear and concise.
Add job title, pronouns, email address, and any other structured fields in the ACF section.
The staff member will automatically appear in any loops or templates that display staff.
Go to Services → Add New. Use the Post Title for the service name, Featured Image for the service image, and Post Content for the main overview text. Below the editor, find relationship fields to assign the service to a hub, select a main contact, attach documents, and add a referral form.
Go to Services → Add New Service. Fill in the page title, content, and featured image. Then set Recover With Pride as the Parent Service and assign Recover With Pride as the Service Category. Both steps are required — they activate the RWP Template and unlock the RWP-specific custom fields.
Go to Posts → Add New. Write the article headline as the Post Title, add the article image as the Featured Image, and write the content in the main editor. Assign a category (Jobs, News, Events etc.) using the Categories panel in the right sidebar.
Go to Documents → Add New. Enter the document name as the Post Title and upload the file using the ACF file field. Then go to the relevant service or page and assign the document via its relationship field — it will appear as a download card automatically.
↑ Back to top| Plugin | What it does | Who manages it |
|---|---|---|
| Oxygen Builder 6 | Visual design editor, template builder, component library, global settings, CSS class management | Developer / advanced user |
| Advanced Custom Fields (ACF) | Custom field groups for all post types, relationship fields, file fields, WYSIWYG fields | Developer for setup, all team for data entry |
| Yoast SEO | Search engine metadata, XML sitemap, social sharing tags, readability analysis | Content editors via the Yoast panel on each post |
| Gravity Forms | All contact, referral, and booking forms across the site | Forms edited in Forms → All Forms; shortcodes assigned via ACF fields |
| Google Translate | Language accessibility widget for all site visitors | Runs automatically — no maintenance required |
The current plugin set covers all foreseeable content management needs. Before installing any additional plugin, consider whether the functionality can be achieved with a small custom code snippet in Oxygen or ACF instead. Every additional plugin adds a maintenance burden, a potential compatibility risk, and a security surface area.
Regularly updating plugins is one of the most important things you can do to keep the website secure. WordPress will flag available updates in the dashboard. Apply them after checking the plugin's changelog to ensure no breaking changes are introduced.