Skip to content
Browse docs

Building with the matching theme

What the companion theme owns, how it talks to the plugin, and how to customise it properly.

The matching theme is a modern WordPress block theme, and it's also the reference implementation of the plugin's integration contract: everything it does with the plugin goes through the public surfaces documented in this category, so reading it answers "how should my theme do X?" by example. Installation for non-developers is covered in Getting Started.

The responsibility split

Settled by design, and worth respecting in any customisation:

  • The theme owns the chrome: header, role-aware navigation, the portal strip, footer, the 1140px content shell, base typography, the page background behind booking surfaces, and the login/registration experience.
  • The plugin owns every booking-shaped surface: the flow, checkout decoration, My Account tabs, the register. The theme contains no booking UI at all, and its dsb/ overrides directory ships deliberately empty.

This split is why the theme is thin (a handful of small PHP-rendered blocks, no build step) and why plugin updates restyle nothing of yours.

How it integrates (all public surfaces)

  • Brand colours flow automatically: the plugin's two branding colours are fed into the theme's design tokens at runtime, with tints computed from them, so the header border, portal strip, headings, links, buttons and login screen follow the club's colours with no theme editing. The theme's own palette is only the fallback when the plugin is absent.
  • Navigation self-wires: "Book classes" and "My classes" links auto-detect the pages hosting the booking and register flows, with filters to override.
  • Role-aware chrome: teachers get the collapsed teacher navigation via dsb_is_teacher(); three role-scoped menu locations (member, teacher, admin) can each be handed to a proper menu under Appearance → Menus.
  • The basket pill is the plugin's dsb_basket_pill(); the theme ships no basket logic of its own.
  • Members-only front end: a login gate redirects logged-out visitors to the theme's sign-in route (WordPress core auth behind a custom screen), with the privacy policy public and a filter for exempting more paths. The same route hosts public registration through the plugin's registration bridge.
  • Theme supports: it declares the dsb-* support flags, which is what activates the header/body background and login-image fields in Branding & vocabulary, and the My Account student-profile tab.

Customising it

  • Site editor first: it's a block theme, so templates, parts and styles are editable under Appearance → Editor, and header navigation display options live in the Customizer.
  • A child theme for code changes: the one-click updater replaces the theme folder wholesale, so file edits belong in a child theme, which survives every update.
  • Building your own theme instead? Entirely supported; the plugin's surfaces are theme-agnostic. Steal this theme's homework: mirror its 1140px wide size (the plugin's desktop layouts assume roughly that), consume the --dsb-* tokens, use the chrome helpers from Shortcodes and template functions, and keep booking UI out of your theme the same way.

Requirements

WordPress 6.6+ (it uses the current theme.json format) and WooCommerce. Note the theme's WordPress floor is slightly higher than the plugin's.

Was this helpful?

Still stuck?

Most questions are answered in a minute here. When they aren't, a real person replies.

Tempo customers Send us the question through the support form. The person who built it reads every message. Contact support
Not a customer yet? Demos, pricing and anything pre-sales. Ask before you buy. Ask a pre-sales question