Summit

Overview#

Summit is a bold, dark website for a conference, built as a WordPress block theme. The demo event is Summit 2027, a fictional three-day design, engineering and AI conference in Copenhagen. The theme has a home page with a live countdown, count-up stats and a taste of the programme, a speaker directory with a track filter and pop-up profiles, speaker profile pages, a day-by-day schedule visitors can star and save (with "On now" and "Up next" highlights during the event), a ticket page with live totals, early-bird prices, a team discount and a demo checkout, a venue & travel page, a sponsors page with an enquiry form and a 404 page. It is version 1.0.1 (see template.json and style.css), works with WordPress 7.1 and PHP 7.4 or newer, and is the WordPress version of the HTML template of the same name. See it live at freeframe.dev/templates/summit.

Everything you see is made of core WordPress blocks arranged in block patterns, so you edit text, links, buttons, lists and images in the block editor without touching code. Colours, the fonts and font sizes are design tokens in theme.json: change them in Appearance > Editor > Styles and the whole site follows. Speakers, sessions and ticket prices used by the scripts are data in assets/js/data.js (see Conference data).

Quick start#

Requirements: WordPress 7.1 or newer and PHP 7.4 or newer. No plugins are needed.

1. Download summit.zip from freeframe.dev/templates/summit (the WordPress tab).
2. In your WordPress admin go to Appearance > Themes > Add New Theme > Upload Theme, choose the zip and click Install Now, then Activate. The theme is listed as Freeframe Summit.
3. Go to Appearance > Summit setup and click Create the demo pages. This creates the pages below from the theme's page patterns, sets Home as the front page (Settings > Reading) and creates the header menu. Pages that already exist with the same slug are left alone, so it is safe to click it again.
4. Set the site title to your event's name in Settings > General (the demo uses "Summit 2027"), then edit any page in Pages, and the header, footer and templates in Appearance > Editor.

You can also try the theme without installing anything: the Try it in WordPress button on freeframe.dev opens it in WordPress Playground (WordPress running in your browser) with the demo pages already set up.

To work on the theme's files locally you need Node.js 24 and pnpm; WordPress itself runs in WordPress Playground, so there is no PHP, web server or database to install:

pnpm install
pnpm dev     # builds the CSS, then starts WordPress with the theme at http://127.0.0.1:9400

pnpm dev signs you in as admin (password password) and creates the demo pages. The site is rebuilt from scratch every time you start it; your edits to theme files are live, edits made in the WordPress admin are not kept.

Pages#

Each page is a page pattern (in Patterns > Summit pages) made of section patterns. Every section is also offered on its own in the block inserter under Patterns > Summit.

The speaker page shows the first speaker (Amara Osei) as blocks, so it works without JavaScript; with ?id= in the address the script shows another one (see Speaker pages). That is why the page is named after her.

Posts use templates/single.html; the blog, archives and search results use templates/index.html, templates/archive.html and templates/search.html.

Project structure#

freeframe-summit/
  style.css                 theme header (name, version, requirements, license); no styles
  theme.json                design tokens: palette, gradient, fonts, font sizes, spacing, layout, button
  functions.php             loads the files in inc/
  inc/setup.php             stylesheet and scripts, editor styles, the "js" class script, script strings
                            and settings, pattern categories
  inc/icons.php             registers assets/icons/*.svg for the Icon block
  inc/icon-labels.php       the icons' names shown in the editor
  inc/block-styles.php      button block styles
  inc/navigation.php        current-page markers (aria-current) in the header
  inc/site-setup.php        Appearance > Summit setup: creates the demo pages and the menu
  templates/                page.html (pages), page-with-title.html, single.html, index.html,
                            archive.html, search.html, 404.html
  parts/                    header.html and footer.html (they show the header and footer patterns)
  patterns/                 every section and page (PHP files with block markup)
  assets/css/theme.css      the compiled stylesheet (do not edit: built from src/)
  assets/css/editor.css     the same for the block editor (generated by src/editor-css.mjs)
  assets/js/data.js         the conference data: tracks, days, speakers, sessions, ticket prices
  assets/js/main.js         the site's JavaScript
  assets/js/editor.js       block editor tweaks
  assets/icons/             SVG icons for the Icon block
  assets/img/               speaker portraits (speakers/<id>.svg), favicon, social image
  assets/fonts/             the Inter and Space Grotesk font files and their licenses (OFL.txt)
  src/theme.css             the Tailwind CSS source of assets/css/theme.css
  src/icons.css             icons drawn before or after text with CSS (generated)
  src/editor-css.mjs        writes assets/css/editor.css after each build
  languages/                freeframe-summit.pot, the template for translations
  blueprint.json            WordPress Playground setup used by `pnpm dev`
  screenshot.png            the picture shown in Appearance > Themes
  package.json              the CSS build and the local WordPress (Node.js tooling)
  readme.txt, README.md, DOCS.md, CHANGELOG.md, LICENSE.txt

Customising#

Brand and colours#

The colours are in theme.json (settings.color.palette) and in Appearance > Editor > Styles > Colors > Palette:

The theme's stylesheet reads these colours from the palette, so changing Magenta in Styles changes every gradient, glow and accent that uses it. The Summit gradient preset (Styles > Colors > Gradients) is the same violet–magenta–flame gradient for your own blocks. A few things have their colours written in: the venue illustration and map (Custom HTML), the speaker portraits, the track tag colours (.tag-design… in src/theme.css) and the browser bar colour (freeframe_summit_head_meta() in inc/setup.php).

Typography#

Headlines use Space Grotesk (the display, h-section and font-display classes; variable, weights 500 to 700) and text uses Inter (variable, weights 400 to 800), bundled in assets/fonts/ and declared in theme.json (settings.typography.fontFamilies), so no request goes to Google. To use other fonts, install them in Appearance > Editor > Styles > Typography > Fonts (the Font Library) and select them, or replace the fontFace entries in theme.json; the stylesheet reads --wp--preset--font-family--space-grotesk and --wp--preset--font-family--inter, so rename those slugs only together with src/theme.css.

Font sizes are the presets in theme.json (xs 0.75rem to 9xl 8rem, the Tailwind scale). The stylesheet uses them too: changing Large in Styles changes every text-lg in the design.

Content#

Edit pages in Pages: click any text to change it, select a button to change its link, select an image and use Replace. Sections are groups; open List View (the stacked lines icon at the top left) to select a section, move it, duplicate it or delete it. To add a section from another page, use the block inserter (+) > Patterns > Summit.

Some content is in Custom HTML blocks, because blocks can't express it or a script drives it: edit those in the block's HTML view.

A few blocks carry a class (Block settings > Advanced > Additional CSS class(es)) that the script or stylesheet reads:

• reveal fades a block in as it scrolls into view; a class such as [--d:80ms] delays it.
• ff-count on a statistic's number counts it up when it scrolls into view; write the final value (1,200 or 96%: the text after the digits is kept).
• link-card on a group makes the whole group clickable: the first link inside it stretches over the group.
• ff-profile on the speaker page's profile group and ff-more-speakers on the "More speakers" list: the script replaces their content for ?id= (see Speaker pages).
• ff-rule on the sponsor tier headings draws the line after the text.
• The decorative glows and grid lines behind the page headers are empty Group blocks with the classes blob (plus float-a/float-b for the slow drift) and grid-lines; delete or move them like any block.

Conference data#

Event content is split between assets/js/data.js (used by the scripts) and the blocks (what visitors see first, and without JavaScript). Change both when you edit the programme. data.js defines window.SUMMIT:

__() translates the texts (see Translations): when you change or add one, add it to freeframe_summit_script_strings() in inc/setup.php too if the site is translated.

Adding a session means adding it to SUMMIT.sessions and a schedule item in the right day panel of the schedule's Custom HTML, with the same id and timing attributes (copy a neighbouring session so it keeps its star button and .live-badge):

<li class="session grid gap-4 p-5 sm:grid-cols-[8.5rem_1fr_auto] sm:p-6"
    data-session="s36" data-track="ai" data-day="thu"
    data-start="2027-04-15T16:00" data-end="2027-04-15T16:40">

Adding a speaker means an entry in SUMMIT.speakers, a portrait at assets/img/speakers/<id>.svg (the theme passes the URLs of these portraits to the script) and a card in the speakers grid's Custom HTML (a list item with data-track and a button with data-speaker="<id>"). Make changes to assets/js/ and assets/img/ in a child theme (see Child themes) so a theme update doesn't overwrite them.

Time zone. Event times are written in Copenhagen summer time. eventTime() in assets/js/main.js appends +02:00 to every time, and the schedule picks "today's" tab from the event-local date (now() shifted by 2 * 3600 * 1000 ms). Change both offsets for an event elsewhere.

Demo dates. The demo is written for 14–16 April 2027. While SUMMIT.keepDemoCurrent is true and that edition is over (the event-local date is after the last of SUMMIT.days), the script moves every date to the same week of the next year, by whole weeks so weekdays never change (Wed 14 April 2027 becomes Wed 12 April 2028), so the countdown, ticket prices, schedule and "live" state always point at an upcoming conference. The year of the edition follows. It updates SUMMIT.days (dates and labels, written in English), SUMMIT.earlyBirdEnds, the countdown target, every data-start and data-end, and the text of these spans in the patterns: data-edition (dates "14–16 April 2027", year, year-1, year+1, yy "’27", yy-plain "27"), data-date="2027-04-01" (with data-date-format dmy, dm or dmon) and data-day-label="wed", plus the page title and aria-labels that contain the year. Before the edition is over nothing is changed, so ?now=2027-04-15T10:45 still previews the live schedule. Set keepDemoCurrent to false in assets/js/data.js once you enter your real dates. The "Early-bird tickets on sale" pill (class ff-early-only) and the first sentence of the tickets intro (data-early-only) are removed once early-bird pricing has ended, whatever the setting.

Images and artwork#

• Speaker portraits are SVG illustrations in assets/img/speakers/<speaker-id>.svg (square), shown with Image blocks on the home and speaker pages and by the script in the dialog and on speaker pages for ?id=. Replace them with square photos: in the blocks with Replace, and in the theme (child theme) folder with the same file names for the script.
• Venue illustration and map are SVG artwork in Custom HTML blocks: replace them with an Image block (a photo of your venue, a map image) or an embedded map.
• Partner logos are Icon blocks with a paragraph; replace them with Image blocks to show real logos.
• Icons: icons are Icon blocks. Select one and pick another icon from the Summit collection (the theme's icons) or WordPress's own. Icons inside buttons (the arrows) are drawn by CSS: the class icon-after-arrow-right adds one; the available names are in src/icons.css.
• Logo: the header and footer show assets/img/favicon.svg in an Image block next to the name ("Summit’27"). Edit both in Appearance > Editor > Patterns > Header (and Footer).
• Social image: assets/img/og-image.png (1200 × 630, source og-image.svg). WordPress doesn't output Open Graph tags by itself; see SEO and sharing.
• Favicon: assets/img/favicon.svg is used until you set a Site Icon in Settings > General.

Navigation, header and footer#

The header and footer are template parts (parts/header.html, parts/footer.html) showing the header and footer patterns. Edit them in Appearance > Editor > Patterns > Header / Footer.

The header has two Navigation blocks showing the same menu: the desktop one and the full-screen one in the mobile menu. Edit the menu once in Appearance > Editor > Navigation (the setup creates "Main menu" with Home, Speakers, Schedule, Venue, Sponsors and Tickets). The Home and Tickets links have the class ff-mobile-only (link settings > Advanced), so only the mobile menu shows them, as in the HTML version. A Navigation block that doesn't point at a menu shows the most recently created one; to pin a menu, select the Navigation block and choose it in the block settings, for both blocks.

WordPress marks the current page's link (aria-current="page"). The theme also marks the header's "Get tickets" button on the tickets page (the button has the class ff-mark-current) and keeps Speakers current on the speaker page (freeframe_summit_menu_parents() in inc/navigation.php).

The footer's link columns are List blocks: click a link to change it, press Enter to add one. The copyright line names the event's year, not the current one: edit it there.

Features#

Countdown#

The countdown on the home page (data-countdown="2027-04-14T09:00:00+02:00", Custom HTML) counts down days, hours, minutes and seconds into its [data-unit] children, has role="timer", and stops at zero.

Speakers filter and pop-up profiles#

On the speakers page, buttons with data-filter (all or a track id) show the speakers whose list item has a matching data-track and update the count. Clicking a speaker opens a native <dialog> built from SUMMIT.speakers: portrait, role, bio and every session they appear in, and a link to their page. Escape, the close button or a click outside closes it, and focus returns to the speaker.

Speaker pages#

The speaker page shows Amara Osei as blocks. With ?id=lukas-brandt (a speaker id from data.js, in any letter case) the script replaces the profile group (ff-profile) with that speaker's portrait, role, bio, links and session cards, laid out and revealed like the default, and changes the browser tab title; unknown ids (?id=constructor) keep the default. "More speakers" (ff-more-speakers) always shows four other speakers. Search engines that don't run JavaScript only see the default speaker: duplicate the page per speaker if those pages matter for search.

Schedule, tracks and My schedule#

The schedule has a tablist of days (including "My schedule", id mine) with Left/Right, Home and End keys. The current tab, chosen by click or key, is kept in the URL hash (/schedule/#fri), and during the event the current day (in event time) opens automatically. Track buttons show one track; breaks and socials stay visible so each day still reads as a timeline, and an empty state appears when a day has nothing in that track. Star buttons add sessions to My schedule, grouped by day, with a count and a toast (their label reads "Add “…” to my schedule", or "Remove “…” from my schedule" once starred); stars are saved in the browser (see Saved data).

Live schedule state#

Every minute the schedule marks the session that is on now ("● On now") and the next one within three hours ("Up next"), and shows a live note. Preview it any time with ?now=: /schedule/?now=2027-04-15T10:45. The same parameter also drives the countdown and early-bird pricing.

Tickets and order summary#

Each ticket card (data-ticket="<id>", Custom HTML) has −/+ steppers (0–20 each). Until SUMMIT.earlyBirdEnds the early price is used and the full price is shown struck through; afterwards the early-bird labels are removed. The summary lists each line, the subtotal, the team discount (15% from five tickets), a hint showing how many more tickets unlock it, and the total. Continue to checkout opens the checkout form; after a valid demo order the confirmation shows the total and says plainly that nothing was bought. Prices come from SUMMIT.tickets, matched to each card by its id; the prices typed in the cards are only shown without JavaScript, so update them and the comparison table too. A card whose id isn't in SUMMIT.tickets is hidden.

Scroll reveals, count-up stats and the mobile menu#

Blocks with reveal fade in when scrolled into view; ff-count numbers count up once. The gradient blobs drift slowly. All motion stops with reduced motion. The menu button (data-menu-toggle) opens a full-screen menu, moves focus to its first link, makes the header solid while open, updates aria-expanded and its label, and closes with Escape. The mobile menu Group starts with the class hidden; the script turns it into the hidden attribute it toggles.

Back to top#

A button appears after scrolling about one screen down; it scrolls to the top (instantly with reduced motion), moves keyboard focus to the main content and lifts above toasts. It is created by assets/js/main.js; to remove it, delete the "Back to top" part of that file and the .back-to-top styles in src/theme.css, then run pnpm build.

Block styles#

In the block settings' Styles panel:

Add the class is-large to a Button block for the large size.

Forms#

Forms marked data-validate check required fields, email format, minimum lengths and required checkboxes. Errors appear next to each field, fields get aria-invalid, and the first problem is focused. On success the form's [data-success] message is shown and a summit:submitted event fires (the tickets page uses it for the confirmation). Nothing is sent anywhere until you connect the forms.

Option 1: a form plugin#

For the sponsor and newsletter forms, install a form plugin (WPForms, Gravity Forms, Fluent Forms, Contact Form 7, Jetpack Forms...) and replace the form's Custom HTML block with the plugin's block or shortcode. Add the theme's classes where the plugin allows: field on fields, label on labels, btn btn-primary on the submit button.

Option 2: a form service#

In the "forms" section of assets/js/main.js, find the comment "To send for real" and post the data before showing success:

fetch('https://formspree.io/f/your-id', {
  method: 'POST',
  body: new FormData(form),
  headers: { Accept: 'application/json' }
}).then(function (res) {
  if (!res.ok) throw new Error('Request failed');
  var success = $('[data-success]', form);
  if (success) success.classList.remove('hidden');
  form.reset();
  document.dispatchEvent(new CustomEvent('summit:submitted', { detail: { form: form.dataset.form } }));
});

Make script changes in a child theme (copy assets/js/main.js there and load it instead), or they are overwritten when you update the theme.

For real ticket sales, don't collect payment details in this form. Use a ticketing or payment provider (Tito, Eventbrite, Stripe Checkout…): replace the checkout section with their embed, or send the selected quantities to their checkout from the Continue to checkout button. WooCommerce or an event plugin can also sell tickets in WordPress itself.

Saved data (localStorage)#

On load the stored value is checked: anything that isn't an array of known, unique session ids is dropped and storage repaired. For a new edition, change STAR_KEY in assets/js/main.js (for example summit-2028-stars) so old stars don't carry over.

SEO and sharing#

Page titles come from WordPress: the page title, an em dash and the site name (for example "Schedule — Summit 2027"); the home page shows the site name and tagline (Settings > General). The speaker page changes the browser tab title for ?id=. The theme doesn't output meta descriptions or Open Graph tags; use an SEO plugin such as Yoast SEO, Rank Math or The SEO Framework, and give it assets/img/og-image.png (or your own 1200 × 630 image) as the default social image. Add Event structured data (name, dates, location, offers) so search engines can show the event. WordPress already generates a sitemap at /wp-sitemap.xml.

Accessibility#

Built in: a skip link to the main content (added by WordPress, styled by the theme), labelled landmarks, one h1 per page, visible lime focus rings, day tabs following the tabs pattern, filters and stars with aria-pressed, a native speaker dialog with focus return, the countdown with role="timer", track tags with text labels (not colour alone), toasts announced with aria-live, form errors linked to their fields, and reduced-motion support for reveals, drifting gradients and counters. The demo passes axe (WCAG 2.1 A and AA).

When you edit: keep gradient text large and on dark backgrounds for contrast, give images alt text (or mark them decorative where the speaker's name is already next to them), label every new form field and keep one Heading 1 per page.

Building and deploying#

You only need this if you change the theme's files. The stylesheet assets/css/theme.css is compiled with Tailwind CSS from src/theme.css and the classes used in patterns/, parts/, templates/, inc/ and assets/js/ (including the classes inside the HTML the script writes):

pnpm install
pnpm build   # compile assets/css/theme.css and assets/css/editor.css
pnpm watch   # recompile assets/css/theme.css on every change (run pnpm build before you commit)

Run pnpm build after adding a utility class to a pattern or template, otherwise the class has no style. Classes you type in the editor's Additional CSS class(es) field are only styled if the stylesheet already contains them.

To deploy, zip the theme folder (named freeframe-summit, without node_modules/) and upload it in Appearance > Themes, or copy the folder to wp-content/themes/ on your server.

Translations#

The theme is translation-ready with the text domain freeframe-summit. All text in patterns, templates and PHP goes through WordPress's translation functions; the scripts' strings (speakers, sessions, days, tracks, labels, form errors) are translated in PHP (freeframe_summit_script_strings() in inc/setup.php). Create a translation with Loco Translate, or with WP-CLI and Poedit:

wp i18n make-pot wp-content/themes/freeframe-summit wp-content/themes/freeframe-summit/languages/freeframe-summit.pot

Save freeframe-summit-de_DE.mo (for example) in wp-content/languages/themes/ or in the theme's languages/ folder. Page content created by Summit setup is copied into your pages in the site's language at that moment; translate it in the editor like any other content.

Child themes#

Use a child theme for changes you want to keep when Summit is updated. Create wp-content/themes/summit-child/style.css:

/*
Theme Name: Summit Child
Template: freeframe-summit
*/

Templates, parts, patterns and theme.json in the child theme override the parent's files of the same name. To change the conference data, copy assets/js/data.js to the child theme and load it instead of the parent's:

add_action( 'wp_enqueue_scripts', function () {
	wp_deregister_script( 'freeframe-summit-data' );
	wp_register_script( 'freeframe-summit-data', get_stylesheet_directory_uri() . '/assets/js/data.js', array(), '1.0.0', array( 'in_footer' => true, 'strategy' => 'defer' ) );
	wp_enqueue_script( 'freeframe-summit-data' );
}, 15 );

The parent's stylesheet only contains the classes the parent uses: if your child theme's patterns use new utility classes, compile a stylesheet for the child (copy package.json and src/theme.css, point the @source lines at the child's folders) and enqueue it.

Troubleshooting#

• A starred session doesn't appear in My schedule. Its id must exist in SUMMIT.sessions and in a day panel of the schedule with the same data-session.
• "On now" highlights the wrong session. data-start/data-end are event-local times; check the +02:00 offset in eventTime() for your event's time zone. Test with ?now=.
• Ticket totals don't match the cards. Prices come from SUMMIT.tickets; the cards' typed prices are only a no-JavaScript fallback.
• A ticket card disappeared. Its data-ticket id isn't in SUMMIT.tickets.
• The speaker page shows Amara Osei instead of the speaker I linked. The ?id= value must be a speaker id in SUMMIT.speakers (with dashes; letter case doesn't matter).
• The pages look unstyled or new classes do nothing. The stylesheet only contains classes it found when it was built. Run pnpm build after editing patterns, then reload.
• "This block contains unexpected or invalid content". A pattern or page was edited by hand with markup that doesn't match the block. Click Attempt recovery, or re-insert the section from Patterns > Summit.
• The header menu shows other pages, or an old menu. A Navigation block without a chosen menu shows the most recent one. Select it and choose "Main menu" (or yours) in the block settings, in both the desktop and the mobile Navigation block.
• Summit setup says the pages exist, but they are empty. It never overwrites existing pages. Delete (and empty the trash of) the pages with those slugs, or open each page and insert its page pattern from Patterns > Summit pages.
• The forms don't send anything. They are demo forms; see Forms.
• The theme can't be installed on an older WordPress. Summit uses the Icon block's icon collections from WordPress 7.1; update WordPress first.
• A page shows the title twice or no title. Pages use a template without a title, because the page patterns start with their own heading. For a plain text page (privacy policy, code of conduct), choose the Page with title template in the page's settings.

License#

MIT, which is compatible with the GPL that WordPress requires (see LICENSE.txt in the theme folder). Free for personal and commercial use. The illustrations, portraits and logos are included under the same license. Inter and Space Grotesk are licensed under the SIL Open Font License 1.1 (assets/fonts/inter/OFL.txt, assets/fonts/space-grotesk/OFL.txt).