# Tutorius

> [View this product on lib-pro](https://lib-pro-3f8437.gitlab.io/libs/tutorius) · The WordPress theme course creators wish existed.

**Outcome:** A WordPress theme that teaches what your LMS plugin teaches — without fighting it.

Modern visual language, real dark mode, first-class LearnDash + Tutor LMS + LifterLMS + Sensei integration, demo-importable in 10 minutes. Replaces the dated LMS skin with a 2025 design system that ships a complete course site out of the box. Built by educators who got tired of fighting generic themes to teach for a living.

**Price:** £45 — lifetime · **Category:** WordPress Theme · **Tech:** WordPress 6.0+, PHP 7.4+, Block editor (Gutenberg), theme.json v2, Elementor (optional), LearnDash (optional), Tutor LMS (optional), LifterLMS (optional), Sensei LMS (optional), Inter font (system fallback)

| Metric | Value |
|--------|-------|
| Lines of PHP | 4,239 |
| CSS files | 6 |
| JS files | 4 |
| LMS integrations | 4 |
| Demo pages | 8 |
| Demo posts | 6 |
| Demo courses | 6 |
| Demo instructors | 4 |

## Quick start

```bash
# Upload tutorius.zip via wp-admin → Appearance → Themes → Add New → Upload Theme
# Activate, then: Appearance → Import Demo Content → Import Demo Content
```

- # 1. Install + activate in wp-admin
- # 2. (Optional) install LearnDash, Tutor LMS, LifterLMS, or Sensei
- # 3. Appearance → Import Demo Content → Import Demo Content
- # 4. Appearance → Customize → set primary color, brand name, tagline
- # 5. Replace demo content with your own

## Code preview

```tsx
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "Primary", "slug": "primary", "color": "#5b3df5" },
        { "name": "Accent",  "slug": "accent",  "color": "#19c2a3" },
        { "name": "Ink",     "slug": "ink",     "color": "#0f1020" },
        { "name": "Mist",    "slug": "mist",    "color": "#6b6f80" },
        { "name": "Paper",   "slug": "paper",   "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontFamilies": [{
        "name": "Inter",
        "slug": "inter",
        "fontFamily": "'Inter', -apple-system, sans-serif"
      }]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

// 5 colors, 1 font, 1 layout — every Editor choice reflects these.
// The customizer feeds them back into CSS variables so Elementor, LearnDash,
// and your CSS overrides all use the same source of truth.
```

## Use cases

### 1. Launching your first course site

You have a course to sell, an LMS plugin you trust, and an afternoon. You don't have time to learn child themes, customizer panels, or which shortcodes the legacy LMS expects.

**Outcome:** Install, activate, import demo content, swap in your courses. Live by dinner.

### 2. Switching from a dated LMS skin

Your current theme works but looks like it was designed in 2018. Your visitors notice. Your learners notice. You're embarrassed to put the URL in your email signature.

**Outcome:** Install Tutorius, import demo content as a starting point, replace what you don't want with your own. Within a weekend you're on a 2025 visual language without rewriting a single course.

### 3. Building a small online school

You're running multiple cohorts across multiple instructors. Each cohort gets a landing page, a curriculum, a checkout. The LMS plugin handles data; the theme handles everything users see.

**Outcome:** The course card grid, single course template with sticky enrollment sidebar, and instructor profile pages are all designed for this exact use case — not a generic blog with a course post type.

### 4. Adding dark mode to an existing site

Your visitors keep asking. Your current theme doesn't support it. Adding it as a plugin fights the rest of your design.

**Outcome:** Tutorius ships dark mode in core, with system preference respect, cookie persistence, and a no-flash implementation. Activate it on any site and it works.

## Built for

- Solo course creators shipping their first product
- Online educators running live cohorts
- Bootcamp founders with a small team of instructors
- Coaches with a productized service offering
- Schools and training academies that want a modern face on WordPress

## Highlights

### Real dark mode, no flash

Inline script in <head> applies the right scheme before first paint. Your visitors never see a flash of light theme. System preference respected on first visit; explicit toggle wins after.

### LearnDash-ready out of the box

The theme's CSS variables feed directly into LearnDash selectors — progress bars, course cards, lesson sidebars match without you writing a line of custom CSS. Tutor LMS, LifterLMS, and Sensei get the same treatment.

### One-click demo import that works

8 pages, 6 blog posts, 6 courses, 4 instructors land in under 10 minutes via Appearance → Import Demo Content. Idempotent — run it twice without duplicating anything. The most-broken feature of competing themes is the first thing we got right.

### Core Web Vitals out of the box

No jQuery bloat, deferred scripts, lazy media, self-hosted fonts, image size hints. The theme scores 90+ on Lighthouse without you touching anything.

### Elementor + Gutenberg, both equally first-class

Most themes force you to pick. Tutorius ships parallel styles for both editors. Use whichever your team prefers, or use both on different pages — they look consistent because they share the same color tokens.

## What's in the box

- `tutorius/ (theme)` — PHP, CSS, JS, theme.json
- `tutorius-child/ (child theme)` — starter template with style.css + functions.php
- `WXR demo content` — 8 pages, 6 posts, 6 courses, 4 instructors
- `Customizer export` — 10 mods: brand, primary/accent color, color scheme, footer
- `Widget export` — sidebar + 3 footer column layouts
- `4 docs` — INSTALLATION, CUSTOMIZATION, SUPPORT, SCREENSHOTS
- `5 HTML mockups` — open in any browser to preview the design
- `2 PNG screenshots` — 1200×900, light variant
- `Live preview script` — Playwright-based, x86_64 hosts only

## Works with

- **LearnDash** (Course cards, progress bars, lesson sidebar — all inherit theme tokens. Continue Learning CTA for mid-progress users.)
- **Tutor LMS** (Same pattern, separate override layer. Course price block wrapped in styled card.)
- **LifterLMS** (Button + progress bar color overrides match the rest of the site.)
- **Sensei LMS** (Visual consistency for Sensei-built lesson pages out of the box.)
- **Elementor** (Theme variables exposed as Elementor global colors. Pages built with Elementor render consistently.)
- **Block editor (Gutenberg)** (Editor color palette, font sizes, layout, spacing — all driven by theme.json.)
- **WooCommerce** (Compatible for selling courses as products (LearnDash / Tutor LMS both integrate).)
- **WPML / Polylang** (Translation-ready, .pot file generation documented in CUSTOMIZATION.md.)

## Features

- Modern 2024+ visual language — large type, generous whitespace, soft shadows, gradient accents
- Light + dark variant in one theme — system preference respected, manual choice persisted in a cookie
- No-flash dark mode — inline script in <head> applies the right scheme before first paint
- LearnDash integration — course cards, progress bars, lesson pages inherit theme tokens, no custom CSS required
- Tutor LMS integration — same pattern, separate override layer
- LifterLMS + Sensei override layers — both render consistently with the rest of the site
- One-click demo import — 8 pages, 6 blog posts, 6 courses, 4 instructors in under 10 minutes
- Elementor compatibility — elementor.css maps its global colors to Tutorius tokens
- Gutenberg compatibility — theme.json, editor color palette, font sizes, layout, spacing
- 5 custom page templates — front page, single course, course archive, instructor archive, search
- Course curriculum component — accordion with module + lesson list, instructor sidebar CTA
- Child theme included — override any template by copying to tutorius-child/
- Translation + RTL ready — all strings wrapped in i18n functions, logical CSS properties
- Core Web Vitals out of the box — no jQuery, deferred scripts, lazy media, self-hosted fonts
- Customizer controls — brand name, primary/accent color, color scheme, footer copy
- Documentation — INSTALLATION, CUSTOMIZATION, SUPPORT, SCREENSHOTS (4 docs)
- 5 HTML mockups shipped with theme — open in any browser to preview the design

## FAQ

### Does Tutorius work without an LMS plugin?

Yes. Tutorius registers its own course and instructor post types when no major LMS plugin is active. You get all the visual styling, templates, and demo content out of the box. When you install LearnDash, Tutor LMS, LifterLMS, or Sensei, the theme's own CPT registration is skipped and the plugin owns the data layer.

### Will the dark mode toggle annoy my visitors?

The default scheme respects the visitor's OS-level prefers-color-scheme. The toggle is shown only if the customizer setting is enabled (default: on). Toggling persists in a cookie for one year. There's no nag, no banner, no banner-blocking modal — just a small icon in the header.

### Can I customize the colors without writing code?

Yes. Appearance → Customize → Colors has primary and accent controls. They update live and feed into every CSS variable, so changing your brand color cascades to buttons, links, hero gradients, LearnDash progress bars, and Elementor global colors simultaneously.

### What happens on sites with content in other languages?

All strings are wrapped in WordPress's i18n functions. Run `wp i18n make-pot . languages/tutorius.pot` to extract translations. RTL languages (Arabic, Hebrew, Farsi) work without extra work — the theme uses logical CSS properties and respects the document direction.

### Is this compatible with the WP block editor (Gutenberg)?

Yes. Tutorius declares theme.json support for color palette, font sizes, layout, and spacing. Editor blocks render with the theme's tokens. Full-site editing (FSE) is opt-in via theme support flags.

### How is this different from the dozens of course-themed themes on ThemeForest?

Five real differences: (1) Modern 2024+ visual language — most competitors still look 2019. (2) Real dark mode that doesn't flash. (3) Elementor + Gutenberg dual support — most force one. (4) Working one-click demo import. (5) Core Web Vitals score 90+ out of the box. Plus: deep LMS plugin integration that goes beyond CSS overrides — the theme reads LMS data to inject 'Continue Learning' CTAs and progress UI.

### Can I see a demo before buying?

Yes. The /mockups/ folder in the theme ships 5 HTML mockups (home, course, catalog, blog post, instructor) using the actual theme CSS. Open any of them in a browser to preview the design. Screenshot rendering is included via scripts/render-screenshots.mjs for hosts with Node + Playwright.

### What's the support policy?

Bug reports against documented behavior: same-day response on weekdays, worst case next business day. Theme mods and custom development: quoted separately. Compatibility with plugins not on the supported list: best-effort diagnosis. Annual renewals include 1/2/3 years of support depending on license tier.