Build a custom theme
A guided walkthrough that takes you from an empty directory to an uploaded, previewable Basker theme
This tutorial builds a small but production-shaped Basker theme. By the end you'll have a theme with a real layout, a couple of templates, a homepage variant, three reusable blocks, theme-wide settings, and a live calendar pulling from the FrontStage API. You'll validate it, package it, and share a preview link with someone else.
What's in this section
- Set up your theme directory: scaffold the folders, install the CLI, and get a dev server running.
- Build the default layout: assemble the HTML shell, head metadata, and the components your pages share.
- Add page templates: render content for the homepage and standard pages.
- Build reusable blocks: three blocks editors can drop into any page.
- Variants and theme settings: give the homepage a distinctive layout and expose site-wide options.
- Pull live event data: wire up a calendar block fed by
/api/event-instances. - Validate and upload: run the theme checker, package the ZIP, and upload through the admin.
- Share a preview: generate a preview link to send to a colleague.
You'll need:
- A Basker site you can sign in to.
- Node.js 22.12 or newer.
- Working knowledge of HTML and CSS. Liquid is introduced as you go.
Plan on around an hour of focused time end-to-end. Each page leaves you with something working, so you can pause between steps without losing your place.
When you're ready, head to Set up your theme directory.