Introduction

Kidoo is a premium editorial Ghost theme built for kids' health, parenting and family publications. It pairs a warm, magazine-style front page with Ghost's native membership, newsletter and Portal features, so a full paid publication can be set up entirely from Ghost Admin — no code required.

This guide covers every screen and setting in the theme, in the order you will actually need them. If you are setting up a brand-new site, start with the Setup Checklist and work down.

What Kidoo gives you out of the box

• Three homepage hero styles — a peek-through carousel, a full-width fading slider, and an editorial grid.
• Three post feed styles — Grid, Listing and a five-tile Bento mosaic — applied across the homepage, tag and author pages.
• A complete hand-built dark mode with a header toggle that remembers each visitor's choice.
• Membership pricing page driven by your Ghost Tiers, plus custom sign in, sign up, account and welcome screens.
• An FAQ block you edit as normal Ghost content using Toggle cards — no template editing.
• Contact page with your email address pulled from theme settings.
• A ready-made routes.yaml and a full demo content export in the package.
• Reading progress bar, related posts, previous/next article navigation and author profile cards.
• Accent colour and heading/body fonts follow Ghost's own Design and branding settings.

Before installing Kidoo, make sure you have the following:

Extract the package you downloaded. You will find:

kidoo/
├── kidoo.zip          ← the installable theme. Upload this to Ghost.
├── routes.yaml        ← custom routing. Upload this to Ghost too.
└── demo-content/
    ├── content-export.json  ← demo posts, pages, tags and authors
    └── IMPORT.md            ← import steps and suggested membership tiers

1. 1 Extract the downloaded package on your computer so you can see kidoo.zip.
2. 2 Log in to Ghost Admin and go to Settings → Design and branding.
3. 3 Click Change theme, then Upload theme in the top-right corner.
4. 4 Select kidoo.zip and wait for the upload to finish.
5. 5 Click Activate. Kidoo is now live on your publication.

Updating to a newer version later

Upload the new kidoo.zip the same way and activate it. Your posts, pages, navigation, tiers and members are stored in Ghost, not in the theme, so nothing is lost. Theme settings under Design and branding → Custom are preserved as long as the setting names have not changed between versions.

Kidoo looks its best once a handful of Ghost settings are in place. Work down this list in order — each item links to the section that explains it in full.

1. 1 Install and activate the theme.
2. 2 Upload routes.yaml. This maps /membership/, /contact/, /signin/ and the other member URLs to their templates. See Special Pages & Routing.
3. 3 Set your brand. Upload a logo and publication icon, and pick your accent colour under Settings → Design and branding → Brand. See Brand, Accent Colour & Typography.
4. 4 Mark some posts as Featured. Every hero layout is built from featured posts only — without them the top of the homepage shows just your site title. See Homepage Structure.
5. 5 Create the special pages. Membership, Contact, Authors and Topics all need a matching page to exist. See Special Pages & Routing.
6. 6 Set up navigation. Primary links for the header, secondary links for the footer columns. See Primary Navigation and Footer Layouts.
7. 7 Choose your layouts. Hero, post feed, header and footer styles under Design and branding → Custom. See Theme Settings Reference.
8. 8 Fill in your contact email. It is a theme setting, not page content, and it is also where the contact form sends. See Contact Page.
9. 9 Set up memberships. Create your tiers, connect Stripe, and add an FAQ page if you want one. See Membership, Tiers & Portal.
10. 10 Turn on your newsletter under Settings → Email newsletter so the subscribe forms deliver mail.

Importing demo-content/content-export.json reproduces the theme demo — sample posts, tags, authors and all of the special pages — so you can see how everything fits together before swapping in your own content.

What the file contains

• Posts — parenting guides, kids' health features, family activities and nutrition pieces, several already marked as Featured so the hero works immediately.
• Authors — Dr. Emily Vance, Sarah Jenkins and Michael Thorne, each with a bio so the Expert Voices block fills in.
• Tags — Parenting, Kids Health, Nutrition, Activities, Education and Family.
• Pages — every special page, already given the correct slug: authors, tags, membership, contact, signin, signup, account, welcome and subscribe.

1. 1 In Ghost Admin go to Settings → Advanced → Import/export.
2. 2 Under Import content, click Choose file (or drag the file onto the area).
3. 3 Select content-export.json from the demo-content/ folder.
4. 4 Wait for Ghost to finish processing, then reload your site.

Images in the demo content

A Ghost JSON export stores text and metadata, not image files. Demo feature images therefore point at the original demo URLs, and some may not load on your site. Replace them with your own images: open a post, click the feature image, and upload a replacement.

What the import does not carry over

Theme settings (hero layout, footer layout, contact email), navigation menus, routing, tiers and Stripe are all Ghost site settings rather than content, so they are not part of a content import. Set those yourself using the Setup Checklist — and remember to upload routes.yaml separately, or the imported member pages will not be reachable at their intended URLs.

Kidoo ships with purpose-built templates for the pages a membership publication needs — pricing, contact, member screens and the two directories. Two things connect them: a page in Ghost, and the routes.yaml file included in your download, which tells Ghost which template serves which URL.

Step 1 — Upload routes.yaml

1. 1 In Ghost Admin go to Settings → Advanced → Routes (older versions: Settings → Labs → Routes).
2. 2 Click Upload routes YAML and choose the routes.yaml from your package.
3. 3 Ghost reloads its routing straight away — no restart needed.

Step 2 — Create the pages

Four of the routes are bound to a Ghost page, so that page has to exist or the URL returns 404. Create each one under Pages → New page, set the Page URL in the settings panel to the exact slug below, and publish. There is no template dropdown to choose — the routing does that.

The remaining routes are self-contained — they read from Ghost's member state rather than a page, so no page is required:

Fix needed: the /contact/ route

The routes.yaml in the package maps the contact URL without binding the page to it:

  /contact/: page-contact

The contact template renders everything inside a {{#page}} block, so with no page bound to the route there is no content to render and /contact/ returns a page that is empty between the header and footer — even though your contact page exists and is published. Edit routes.yaml before uploading it and replace that line with:

  /contact/:
    template: page-contact
    data: page.contact

The full corrected routes.yaml

If you would rather paste the whole file, this is Kidoo's routing with the contact fix already applied:

routes:
  /authors/:
    template: page-authors
    data: page.authors
  /tags/:
    template: page-tags
    data: page.tags
  /membership/:
    template: page-membership
    data: page.membership
  /contact/:
    template: page-contact
    data: page.contact
  /signin/: signin
  /signup/: signup
  /account/: account
  /welcome/: welcome
  /subscribe/: page-subscribe

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Kidoo adds 11 settings to Ghost Admin. Find them under Settings → Design and branding → Customise → Custom. Changes save instantly and apply to the live site — no rebuild needed.

Site-wide

Homepage

Article pages

Contact details

The Kidoo homepage is a fixed sequence of eight blocks. Two of them are controlled by theme settings; the rest fill themselves from your content and hide automatically when there is nothing to show.

Why blocks disappear

Every block hides itself rather than rendering empty. If one is missing, check the matching content:

• No hero cards — no posts are marked Featured.
• No Popular Topics — you have no public tags, or all your tags are internal (names starting with #).
• No Expert Voices — no author has a bio. Add one under Settings → Staff.
• No Editor's Choice or Latest Stories — you have no published posts.

Set this under Design and branding → Custom → Hero layout. All three open with the same masthead — your site title in large display type, your site description beneath it — and then present up to 5 Featured posts in different ways.

Set this under Design and branding → Custom → Post layout. It controls how post cards are drawn in four places: the homepage Latest Stories block, tag pages, author pages, and the related posts block under each article.

Blocks this setting does not affect

Editor's Choice on the homepage and the Popular Topics and Expert Voices grids always keep their own layout, by design, so the page keeps its editorial rhythm whichever feed style you pick.

The header is fixed to the top of the screen on every page and gains a subtle shadow once the visitor scrolls past 60 pixels.

What the header contains

• Left — menu button (mobile, or always in Minimal Navigation) and your logo. With no logo uploaded, your site title is set in wide-tracked display capitals.
• Centre — your primary navigation links, on desktop, in the Default header style.
• Right — search, the dark mode toggle, and member links: Sign In plus a Subscribe button for visitors, or Account for signed-in members.

The two header styles

The mobile drawer

The drawer holds your full primary menu, the dark mode toggle and member links. It is built for keyboard and screen-reader use:

• Opens from the menu button; closes on the close button, on the backdrop, on Esc, or when a link is tapped.
• Focus moves into the drawer on open, is trapped inside while it is open, and returns to the menu button on close.
• Page scrolling is locked behind the drawer so the page underneath does not move.

Your header menu comes from Settings → Navigation → Primary navigation. Add a label and a URL for each link, drag to reorder, and save. The same list feeds both the desktop header and the mobile drawer, and the link for the page being viewed is highlighted automatically.

A good starting menu

Home         →  /
Journal      →  /tag/journal/
Topics       →  /tags/
Contributors →  /authors/
Membership   →  /membership/
Contact      →  /contact/

Set this under Design and branding → Custom → Footer layout. Every layout keeps the same bottom bar: your copyright line and a “Published with Ghost” credit.

Building the footer link columns

In the Multi-column layout, columns are assembled from Settings → Navigation → Secondary navigation. A link whose URL is ## becomes a column heading; every link after it goes into that column, until the next ## starts a new one.

Explore      →  ##          ← starts column 1
Home         →  /
Topics       →  /tags/
Membership   →  /membership/
Company      →  ##          ← starts column 2
About        →  /about/
Contact      →  /contact/
Legal        →  ##          ← starts column 3
Privacy      →  /privacy/
Terms        →  /terms/

Footer social icons

The Multi-column footer shows up to two icons:

• Twitter/X — appears when you set a Twitter handle under Settings → Social accounts.
• RSS — always shown, linking to your /rss/ feed.

Kidoo follows Ghost's native brand settings, so most of its look can be retuned without touching a file. Go to Settings → Design and branding → Brand.

Accent colour

Kidoo's signature terracotta is your Ghost accent colour. Change it and every highlight in the theme follows: buttons, tag pills, link hovers, section labels, the FAQ chevrons, checkmarks, the reading progress bar and the coloured glow beneath primary buttons.

1. 1 Open Settings → Design and branding → Brand.
2. 2 Click the Accent color swatch and pick a colour, or type a hex value such as #D66F56 — the theme's own default.
3. 3 Save. The change appears immediately across the whole site.

Logo, icon and cover image

• Publication logo — shown in the header at 24px tall and in the footer. Use a light or white version: both backgrounds are dark.
• Publication icon — your browser tab favicon.
• Publication cover — used as the background artwork on the sign in, sign up and subscribe screens.
• Site description — appears under your title in the homepage masthead and in the footer, so keep it to one strong line.

Fonts

Kidoo ships with Josefin Sans for headings and Inter for body text. Both respect Ghost's font pickers: if you choose a heading or body font in Design and branding → Typography, the theme uses your choice instead. Leave the pickers on their defaults to keep the demo typography.

The rest of the palette

These supporting colours are part of the theme's design and are not exposed as settings — changing them means editing tailwind.config.cjs:

Kidoo has a complete hand-built dark theme — not an automatic filter — covering every template, card, form and image overlay. A sun/moon button in the header lets visitors switch at any time, and their choice is remembered in their browser for future visits.

The Color scheme setting

Under Design and branding → Custom → Color scheme, this sets the mode a first-time visitor sees:

Which setting wins

When a page loads, Kidoo decides the mode in this order:

1. 1 The visitor's own choice. Once someone uses the header toggle, that choice is stored in their browser and takes priority on every later visit.
2. 2 Your Color scheme setting, for anyone who has never used the toggle.
3. 3 Their device preference, when the setting is Auto.

Testing dark mode

Click the header toggle, or open the site in a private window with Color scheme set to Dark — a private window has no saved preference, so you see exactly what a first-time visitor sees. When checking your own content, look at anything you uploaded with a transparent background: logos and diagrams drawn in dark ink can vanish against a dark surface. Keep a light version of your logo for the header, which is dark in both modes.

Each post is laid out in this order. Everything fills from the post itself, so writing a complete post in Ghost is all that is needed.

Getting the most out of it

• Always set a feature image. It is used on the article page, in every feed card, and in social previews.
• Write a custom excerpt. Without one, Ghost cuts the opening lines of the article, which rarely reads as a summary.
• Tag every post. The first tag drives the badge, the related-posts block and the tag pages.
• Fill in author bios under Settings → Staff — the author card and the homepage Expert Voices block both depend on them.

Members-only content

Set a post's visibility to members or a specific tier in the post settings panel. Ghost truncates the content and Kidoo shows a styled upgrade prompt in its place, linking through to signup. Test it in a private window — as a signed-in admin you always see the full post.

Tag pages

Reached at /tag/your-tag/ and generated by Ghost for every tag you use. Each opens with a header carrying the tag's feature image, name, description and article count, followed by the article feed in your chosen Post layout, then a “more topics” strip of six other popular tags.

Tag pages are paginated at 9 posts per page. Fill in each tag's description and feature image under Settings → Tags — they are what make these pages look designed rather than generated.

Author pages

Reached at /author/name/. Shows the author's photo, bio, social links and article count, then all of their published articles on one page — author pages are not paginated.

The two directory pages

Error pages

Kidoo includes designed 404, 403 and 500 pages. The 404 page offers a search button so a visitor who lands on a dead link can find what they wanted.

Kidoo is built around Ghost's native membership system. You define your tiers and prices in Ghost Admin; the theme renders them. There is nothing to configure in the theme itself.

1. Turn on memberships

1. 1 Go to Settings → Membership (older versions: Settings → Portal).
2. 2 Choose who can sign up — anyone, invite only, or nobody.
3. 3 To sell subscriptions, click Connect with Stripe and complete the connection. Free memberships and newsletters work without it.

2. Create your tiers

1. 1 Under Settings → Tiers, edit the Free tier's name, description and benefits.
2. 2 Click Add tier for each paid level. Give it a name, description, monthly and yearly prices, and a list of benefits.
3. 3 Make sure each tier you want on the pricing page is set to Public visibility.

3. Create the membership page

Add a page with the URL slug membership and publish it. The template then builds the pricing section automatically:

• One card per public tier, in a row of up to three.
• Each card shows the tier name, price with your currency, description and a checkmarked benefits list.
• Paid tiers get an “Unlock” button that opens Ghost Portal at the right checkout step; the free tier gets “Sign Up Free”.
• Signed-in members see a line at the top linking to their account page instead of a second signup prompt.

Member screens

The FAQ section at the bottom of the membership page is normal Ghost content, not template code. You write it in the editor using Toggle cards, and the theme picks it up automatically.

Step 1 — Create the FAQ page

1. 1 Go to Pages → New page.
2. 2 Give it a title — this becomes the visible heading of the FAQ section, so something like “Frequently Asked Questions” works well.
3. 3 In the settings panel, set Page URL to exactly membership-faq.

Step 2 — Add your questions

1. 1 In the editor, press + (or type /toggle) and choose the Toggle card.
2. 2 Type the question in the top field and the answer in the panel beneath.
3. 3 Repeat for each question, then click Publish.

Open /membership/ and your questions appear as an accordion, styled to match the theme with accent-coloured chevrons. Answers open and close on click, and work with keyboard Enter and Space.

Managing your FAQs

• Add — insert another Toggle card anywhere on the page.
• Edit — change the text in the card; it updates on the membership page as soon as you update the page.
• Reorder — drag cards up or down in the editor.
• Remove — select the card and press delete.

Create a page with the URL slug contact and Kidoo renders a two-column contact layout.

Setting it up

1. 1 Go to Pages → New page and title it “Contact”.
2. 2 Set Page URL to contact in the settings panel.
3. 3 Optionally add an intro in the editor — it appears at the top of the left column under an “Information” label.
4. 4 Optionally add a custom excerpt in the settings panel — it appears as the subtitle beneath the page heading.
5. 5 Fill in Contact email under Design and branding → Custom.
6. 6 Publish.

What appears where

The magnifying-glass button in the header opens Ghost's built-in search overlay. Visitors can search across your posts, pages, tags and authors, with results appearing as they type. The same search is offered on the 404 page so a bad link is still a route into your content.

Nothing to configure

Search is provided by Ghost itself and indexes your content automatically as you publish — there is no plugin, API key or setting to enable. It runs in the visitor's browser, so it stays fast and adds no load to your site.

Kidoo puts Ghost signup forms in three places. All of them subscribe the visitor to your Ghost newsletter — no third-party mailing list is involved.

Making sure the emails arrive

1. 1 Go to Settings → Email newsletter and check your newsletter is enabled.
2. 2 Set the sender name and address members will see.
3. 3 On a self-hosted install, configure Mailgun for bulk newsletter delivery. Ghost(Pro) handles this for you.
4. 4 Test by subscribing with a real address in a private window and confirming the magic link email arrives.

For developers customising the theme, here is what is inside kidoo.zip:

kidoo/
├── assets/
│   ├── css/source.css        Tailwind source — edit this
│   ├── css/theme.css         Compiled output — do not edit by hand
│   └── js/theme.js           Dark mode, carousels, drawer, accordions, footer columns
├── partials/
│   ├── components/
│   │   ├── header.hbs            hero-default.hbs
│   │   ├── footer.hbs            hero-slider.hbs
│   │   ├── mobile-menu.hbs       hero-premium-grid.hbs
│   │   ├── post-card.hbs         post-listing.hbs
│   │   ├── post-bento.hbs        post-listing-item.hbs
│   │   └── author-card.hbs
│   ├── navigation.hbs        Header, drawer and footer menus
│   └── pagination.hbs
├── default.hbs               Site shell — head, header, footer, scripts
├── index.hbs                 Homepage
├── post.hbs                  page.hbs
├── tag.hbs                   author.hbs
├── page-membership.hbs       page-contact.hbs
├── page-account.hbs          page-welcome.hbs
├── page-authors.hbs          page-tags.hbs
├── page-subscribe.hbs
├── signin.hbs                signup.hbs
├── membership.hbs            account.hbs        welcome.hbs
├── error.hbs                 error-404.hbs
├── error-403.hbs             error-500.hbs
├── package.json              Theme settings, image sizes, posts per page
├── routes.yaml               Uploaded separately in Ghost Admin, not read from here
└── tailwind.config.cjs       Colours, fonts, type scale, shadows

Key configuration values in package.json

• posts_per_page — 9. Controls paginated archives such as tag pages.
• image_sizes — the responsive image widths Ghost generates, from 160px to 2000px.
• card_assets — true, so Ghost includes styles for all editor cards.
• custom — the 11 theme settings that appear in Ghost Admin.

The theme's stylesheet is generated by Tailwind CSS. The compiled assets/css/theme.css ships inside the zip, so the theme works with no build step — you only need the toolchain if you intend to change styles.

Setting up

1. 1 Unzip kidoo.zip into a working folder.
2. 2 Run npm install to fetch Tailwind, PostCSS and Autoprefixer.
3. 3 Run npm run dev to watch and rebuild as you edit, or npm run build for a minified production build.
4. 4 Re-zip the theme folder and upload it to Ghost.

Where to change what

Most text in Kidoo comes from your Ghost content and settings. A few editorial strings are written into the templates as part of the design. They are listed here with their location, so you can change them deliberately if you want to.

The top of my homepage is empty — just the site title

No posts are marked as Featured. Every hero layout is built from featured posts. Open a post, go to the settings panel, and switch on Feature this post. Three to five featured posts gives the intended result.

The hero slider does not slide

The Swiper library is loaded from a CDN and could not be reached — a network block, an offline environment, or a script blocker. Check the browser console for a failed request to cdn.jsdelivr.net. The slides stack vertically as a fallback, so nothing is lost. To remove the dependency, choose the Premium Grid hero, or download Swiper into assets/ and update the tags in default.hbs.

The footer columns are empty, or show a reminder message

Footer columns come from Settings → Navigation → Secondary navigation, and each column is started by a link whose URL is exactly ##. Check that your first secondary item is such a heading — links added before the first ## have no column to go into. Remember the maximum is three columns.

My header drop-down menus do not open

Kidoo's header menu is a single flat row of links; it has no drop-down submenus, and hyphen-prefixed labels are not treated as child items. Use the footer's three link columns for extra destinations, or switch Header style to Minimal Navigation so every link gets its own row in the drawer.

The FAQ section is missing from my membership page

Check three things: a page exists with the URL slug exactly membership-faq; it is published, not draft; and it contains at least one Toggle card with content. Ghost silently appends a number to a duplicate slug, so reopen the page settings and confirm the URL still reads membership-faq.

My membership page shows no pricing cards

The cards are built from your Ghost tiers. Go to Settings → Tiers and confirm at least one tier exists and its visibility is Public. Paid tiers additionally need Stripe connected under Settings → Membership before they can be purchased.

My contact page is blank between the header and footer

The /contact/ entry in the shipped routes.yaml has no page binding, so the contact template receives no page to render. Change that route to include data: page.contact and re-upload — the full corrected file is in Special Pages & Routing. The give-away is that /membership/, /tags/ and /authors/ all work, because they already carry their bindings.

/signin/ or /signup/ shows a 404 or the wrong layout

These two paths only work once routes.yaml is uploaded — see Special Pages & Routing. Without it, use Ghost Portal's built-in overlays instead; the header links open them.

A page URL 404s after uploading routes.yaml

The routes for /membership/, /contact/, /authors/ and /tags/ are bound to a Ghost page, so each needs a published page with that exact slug. Create any that are missing, and check the slug in the page settings panel — Ghost appends a number if the slug is already in use.

Tag images are showing when I do not want them (or vice versa)

Toggle Show tag featured image under Design and branding → Custom. It controls the homepage Popular Topics cards, the All Topics directory and the tag archive header together — there is no per-place control.

The contact form does not send anything

It is a mailto: form: it opens the visitor's own email application rather than sending from your server, and does nothing on a device with no mail app configured. Swap in an embedded third-party form if you need reliable delivery — see Contact Page.

Nothing changes when I edit a theme setting

Theme settings apply immediately, so this is nearly always caching. Hard-refresh (Cmd/Ctrl + Shift + R), and if you use Cloudflare or another CDN, purge its cache. Also confirm Kidoo is the active theme — settings from an uploaded-but-inactive theme have no effect.

My logo is invisible in the header

The header background is dark in both light and dark mode. Upload a light or white version of your logo, ideally a transparent PNG or SVG. It is rendered at 24px tall.

Ghost rejects the theme on upload

Upload the inner kidoo.zip, not the outer download package and not a re-zipped folder. package.json must sit at the very top level of the zip. Confirm too that your Ghost version is 5.0 or newer.

Dark mode looks wrong on my own images

Transparent images with dark artwork disappear against dark surfaces. Re-export affected logos and diagrams with a background, or in a light colourway.

Thank you for choosing Kidoo. If something is not behaving as this guide describes, we are glad to help.

Before getting in touch

These details let us give you a useful answer straight away:

• Your site URL, and the page where you see the problem.
• Your Ghost version — Settings → Advanced → About Ghost — and whether you are on Ghost(Pro) or self-hosted.
• The theme version, from package.json.
• What you expected, what happened instead, and a screenshot.
• Any changes you have made to the theme files or code injection.

What support covers

Licence

Kidoo is released under the MIT licence, and its use is governed by the terms of the marketplace you purchased it through. In short: one licence covers one production site, you may modify the theme freely for your own use, and you may not redistribute or resell it as your own product. Buy an additional licence for each additional site.

Kidoo v1.0.0 · Documentation last updated 13 August 2026 · Built for Ghost 5.x and 6.x.