Case /02 Selected work← All work

TinoTaonga

Client: The Salvation Army — Next Generation Ministry
Scope: Squarespace · Custom code · Editing guide
Role: Design, build & code
Live: nextgen.salvationarmy.org.nz ↗

/ The brief

Tino Taonga takes its name from the idea at the centre of the Next Gen team’s work: that children and young people are invaluable treasures. The team supports everyone leading children’s, youth and intergenerational ministry in The Salvation Army across Aotearoa, Fiji, Tonga and Samoa. Leaders usually arrive wanting one thing: a resource for this week, the right person to talk to, or the details of a camp.

/ The approach

The Next Gen team runs the site themselves, so I built it on Squarespace and wrote custom code for what Squarespace can’t do out of the box. The content lives in four blogs. Two of them are hidden from visitors and work like databases: one post per team member, and one post per programme or event page. Scripts read those posts and build what visitors see: a team finder with a map, programme pages with the key facts in a panel, a filterable resource library, and a homepage that keeps itself current. The team only ever edits posts. If a post is missing or half filled in, the custom part steps aside and the page falls back to standard Squarespace.

Squarespace build
Content model
Custom code
Resource library
Team finder & profiles
Programme & event pages
Editing guide

17: programme & event pages, one layout
34: resources in the library
16: people in the team finder
37: pages in the editing guide

/ Highlights

The homepage on a phone: an Events and camps row with Kids Camp marked as on now

/ 01

The front door

The homepage opens with a greeting in the territory’s languages and puts the three most common jobs up front: search the resources, jump to an area, or find your Next Gen person. The film plays inside the speech bubble from the brand, and scrolling opens it out into the Tino Taonga statement. Before any of that, a line of scripture comes up, chosen for the season of the church year.

Everything below the opening fills itself in: the next events and whether they’re open, programmes grouped by area, the team, the newest resources and the latest newsletter.

In Squarespace: One post holds the headline, greeting, film and statement. Every other section reads from the four blogs.
In code: A page-header script builds the page. The scripture intro sits in the site-wide header.

The Resource Hub filtered to Youth and Bible Study: six resources match, each card labelled PDF with its reading time

/ 02

The resource library

Guides, forms, Bible studies and session plans, filtered by area and programme, with a live count beside every option. Each card says what it is before you open it (PDF, form, guide or how-to) and roughly how long it takes to read. The filters write to the address bar, so a leader can send a colleague the exact list they’re looking at.

In Squarespace: An ordinary blog. Categories are the areas and tags are the programmes.
In code: A licensed filter plugin, set up and restyled, plus a script that reads each post to label its card.

nextgen.salvationarmy.org.nz/team

/ 03

The team finder

Sixteen people across eight regions, from Northland to Samoa. A leader can search for a corps, a town, a name or a need (“kids camp” works, and so do “Palmy” and “the Mount”), pick a region on the map, or finish the sentence “I’m in anywhere and I need help with anything”. The grid narrows as they go, and choosing someone opens their profile above it. Once the search scrolls off screen, a Find button sits next to Menu so it’s always to hand.

In Squarespace: A hidden blog, one post per person. Categories say what they help with, tags say where they work.
In code: One code block draws the map, search, grid and profiles from that blog’s feed.

/ 04

Programme and event pages

Seventeen pages, from Kids Camp to Mainly Music, share one layout. The team writes each page as a post. Lines like When:, Where: and Cost: become the At a glance panel, a Status: line becomes the pill under the title (its dot turns red once a camp closes or fills), and the photo’s crop follows the focal point they set on the post’s image. Headings, lists and quotes from the editor’s own toolbar are styled to match the site, so nothing relies on code the team can’t see.

In Squarespace: A hidden blog, one post per page. The post’s address matches the page it fills.
In code: A footer script and stylesheet build the panel, the status pill and a strip of related resources.

The Kids Camp post open in the Squarespace editor, with lines for Status, When, Where, Who, Cost and Register above two paragraphs — **The post**What the team types.

The Kids Camp page: a photograph with the title and a registrations-closed pill, beside an At a glance panel with the dates, places, ages and cost — **The page**What visitors see.

The end of a resource post: a download card for the Post-Amplify Bible Study PDF, then a Talk to someone box suggesting two staff members

A team member’s page listing six resources, stories and events she can help with

/ 05

Resource posts and profiles

On a resource post, the file becomes a proper download card named after the resource, and a Talk to someone box suggests the staff who help with that area. Each person’s page is built from the same record as the finder, and lists the resources and news that match what they help with. Nobody keeps these links up to date by hand. They come from the categories the team already uses.

In Squarespace: The same categories across the News, Resource Hub and Team Members blogs.
In code: Footer scripts that match posts and people by category and add the cards.

/ Details

The open menu: the Children section shows a photograph in the bubble shape, with its pages listed as small buttons — Each section of the menu opens with its own photograph in the bubble shape, and lists its pages underneath.

The Find strip across the top of the team page, set to Lower North Island and Napier: two people connect with Napier, and the map lights that region — The Find button opens the same filters in a strip on the Menu’s row. Here, a search for Napier.

A portrait in the team grid with a hover label reading Intergenerational, Feilding, Napier — Hovering a portrait shows what that person helps with first and where they’re based.

The Resource Hub on a phone with its filter panel open: Area and Programme checklists with a count beside each option — On a phone the Hub’s filters slide in from the side, with the same live counts.

/ The handover

I handed the site over with a 37-page guide for the team, written for people who don’t think of themselves as technical and illustrated with screenshots from their own editor. It walks through every part they edit (programme pages, the team, News, the Resource Hub and the homepage) and ends with checklists and a one-page quick reference.

Guide cover: How to update the Tino Taonga website — Cover

Guide page: How the pieces fit together, mapping each blog to the pages it feeds — How the pieces fit

Guide page: What each part of the post changes, with the Kids Camp page annotated — What each part changes

/ The outcome

Live: nextgen.salvationarmy.org.nz, for Next Gen leaders across the territory
Team-run: Every page, person, resource and event is a post the team edits in Squarespace
One platform: Hosting, editing and the newsletter sign-up all stay in Squarespace

Built with

Platform: Squarespace 7.1
Content: Four blogs: News, Resource Hub, and two hidden ones for people and pages
Code: Site header and footer injection, Custom CSS, page-header code on two pages, one code block
Plugin: Custom Filter by Squarewebsites, restyled

Next case Peniel Trust → Want this shape, sooner? Templates → Start your brief