Skip to main content
Back to Portfolio

Atlas Climbing

WordPress LMS demo for a fictional small-chain climbing gym (Bend / Boulder / Salt Lake) selling online courses — three courses with progress tracking, instructor profiles, student dashboard, certificate flow, all on Tutor LMS Free themed to disappear into the brand.

WordPressPHP 8.3ReactGutenbergFull-Site Editingtheme.jsonTutor LMSCustom Post TypesApacheAWS EC2
View Live Site
Atlas Climbing preview

Overview

A WordPress LMS site for a fictional small-chain indoor climbing gym — five-page structure (Home, Courses, Instructors, Dashboard, About) plus three single-course pages, fifteen lessons, three quizzes, all running on Tutor LMS Free with a custom per-demo theme. Fourteenth demo on the platform and the first of the Tier 2 batch (heavier, architecturally diverse demos following the Tier 1 service-business breadth run).

Per-demo theme — outdoor brand grown up:

  • Thin child of the platform _chassis parent
  • Granite charcoal primary (#2A2D31), lichen-green accent (#6B8A5A), chalk-white base (#F4F0E8), dawn-pink secondary (#E8B4A0)
  • Inter Display headings, Inter body, JetBrains Mono for code
  • References Patagonia.com and Black Diamond product pages, not Crossfit affiliate sites
  • Header carries Courses / Instructors / Dashboard / About; footer carries brand + locations + colophon

Two new shared blocks in the platform's sfp-blocks library — neither Atlas-specific:

  • sfp-blocks/course-card — server-rendered grid that queries any course CPT (defaults to Tutor's courses) and renders cover, level badge, instructor row, lesson count, duration, enroll CTA. Filterable by featured-meta, level-meta, and course-category taxonomy
  • sfp-blocks/lesson-progress — student-dashboard block that lists the logged-in user's enrollments with progress bars + next-lesson CTAs, sourced from Tutor's get_completed_lesson_count_by_course and get_lesson_count_by_course. Logged-out visitors see a sign-in CTA; users with no enrollments see a configurable empty message

Five pages + LMS content:

  1. Home — Full-bleed hero (climber on slab), eyebrow naming the three locations, single declarative headline, featured-courses strip via course-card with featuredOnly=true, instructor strip, free-to-start CTA that names the pricing explicitly
  2. /courses/ — Themed Tutor archive showing all three courses with level badges + instructor + duration + enroll CTAs
  3. /instructors/ — Three instructor cards with portraits, datelines, and bios that name credentials and pedagogical style
  4. /dashboard/ — The lesson-progress block. For the seeded demo-student the dashboard shows three enrollments at 100% / 60% / 0% with certificate available on the completed course
  5. /about/ — Three-section brand story, explicit anti-pattern stance ("we don't have a Tier 3 add-on"), three location cards

Surgical Tutor LMS theming + asset hygiene:

The atlas-tutor-setup mu-plugin registers _atlas_* meta with REST + closure-wrapped sanitize_callbacks (PHP 8 strict-arity safety), tunes Tutor settings for the demo (free monetization, disabled emails, registration enabled), and dequeues Tutor's ~120KB of CSS+JS on non-Tutor routes — Lighthouse perf went from 66 to 91 from that one change. CSS overrides target stable Tutor class names (.tutor-btn, .tutor-course-topic, .tutor-progress-bar) rather than nested div chains — the rule we'd defend on any third-party plugin theming engagement.

The Challenge

Coaches, gyms, training programs, and course creators reach for LearnDash by default ($300+/year) without knowing Tutor LMS Free covers 90% of what they need. The deeper mistake is letting the LMS plugin own the visual identity — the default Tutor archive, single-course page, and dashboard read as Tutor, not as your brand. Most demos shipping Tutor accept that and move on.

The Solution

A per-demo theme with the "summit" outdoor-brand aesthetic baked in, two new shared blocks (course-card + lesson-progress) authored in the platform repo and available to every future LMS demo, and surgical Tutor template overrides via conditionally-loaded CSS that targets stable plugin class names. The setup mu-plugin dequeues Tutor assets on non-Tutor routes — same dequeue pattern bench uses for PMS, the platform-wide default for any demo with a heavy frontend plugin.

Results

  • Lighthouse 91 / 96 / 96 / 92 (perf / a11y / best-practices / SEO) after the Tutor asset dequeue. First version was 66 perf with Tutor loading on every page; the conditional dequeue lifted perf 25 points without touching the visual design

  • Two new shared blocks — course-card and lesson-progress — join the platform sfp-blocks library, available to every future LMS / course-creator client, not just Atlas

  • Sample student account demonstrates the full progress-tracking flow end-to-end: enroll, complete lessons, advance to next, complete course, certificate available. The dashboard renders three distinct states (100% / 60% / 0%) from one block instance

  • Surgical-CSS-override pattern for third-party plugin theming documented in writing: target stable plugin class names (not nested div chains), load conditionally on plugin routes only, dequeue assets on routes the plugin does not render

  • Fourteenth demo on the platform; first of the Tier 2 batch (architectural diversity rather than service-business breadth). The platform now has LMS primitives ready for the next coach / gym / training-program client

Gallery

Atlas Climbing screenshot 2
Atlas Climbing screenshot 3
Atlas Climbing screenshot 4

Interested in working together?

Let's discuss how I can help with your project

Get in Touch