DEV3Technologies
All case studies

DEV3 Technologies · own product

DEV3 Athenaeum: an education and bookshop WordPress theme with a 3D book that turns its pages

Our WordPress theme for schools, course creators and bookshops: a live three.js book that turns its pages as you scroll, a course catalogue with instructors, events and admissions, and a WooCommerce bookshop whose 3D covers follow the chosen format.

WordPressPHPtheme.jsonElementorWooCommercethree.jspostprocessingLenisContact Form 7LearnDash / Tutor LMSJSON-LD
Industry
Education & Books (WordPress theme)
Services
Web DevelopmentUI/UX Design

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
Lamplit 3D hero — an open book floats under a reading-room lamp beside the school's headline and Explore courses / Visit the bookshop buttons.

Lamplit 3D hero — an open book floats under a reading-room lamp beside the school's headline and Explore courses / Visit the bookshop buttons.

The challenge

Education websites carry a lot of structured information: courses with levels, fees and syllabi, instructors, open days, applications. Small schools also often run a bookshop. Most education themes either bolt on a full LMS that a weekend academy does not need, or treat courses as plain pages that cannot be filtered or marked up for search. We wanted a theme that feels like walking into a reading room, with a book at the centre of the story. Courses, events and books had to be real content types that staff can edit, and the theme had to hand over cleanly to LearnDash or Tutor LMS when a school starts teaching online.

Our solution

Athenaeum is a classic PHP theme with theme.json on DEV3's shared theme core. The DEV3 Theme Toolkit plugin provides the Course, Instructor and Event post types, the Elementor widgets and their block twins, WooCommerce extras and the demo importer. The theme owns presentation and the 3D presets.

Key design decisions

  • A book as a state machine. The reading-room preset exposes scene state (turn, fan, close, stack, spread, swirl, warm, lift). Each Elementor chapter sets its values, and the engine blends between them, so pages turn while visitors read. The demo uses {"turn":0}, {"turn":3}, {"turn":6}, {"fan":1,"stack":1} and {"close":1}.
  • Covers typeset live. The book-viewer preset draws the title, subtitle and author onto the cover with the theme's own fonts. A bookshop therefore needs no cover renders: it types the title into the product's 3D view parameters.
  • Every variation attribute reaches the 3D. We extended the toolkit during the suite's integration stage to stream every attribute of a variation to the viewer. Picking Hardcover, Paperback or eBook switches the 3D book's binding live.
  • A catalogue, not an LMS. The Course type describes a course and sends students to enrolment, with Course JSON-LD printed automatically. Online delivery is left to LearnDash or Tutor LMS. The theme styles their pages and points Enrol buttons at the LMS checkout from one Customizer setting.
  • Admissions without custom code. The application form is Contact Form 7 with a default:get course select. A course's Enrol link arrives with that course chosen, and an event without a ticket arrives with that event chosen.
  • Legible over 3D. Drifting volumes dissolve when they pass behind the copy. Reduced motion, Save-Data or no WebGL get a pre-rendered poster instead of the live scene.

Results

Athenaeum ships with a one-click demo: 9 courses in 5 subjects, 6 instructors, 5 events, 9 bookshop products, 6 journal posts and 2 forms. The theme adds 27 block patterns.

  • Quality gates passed: php -l on every file, phpcs with WPCS 3 and PHPCompatibilityWP 7.4+ at 0 errors, and the WordPress Theme Check plugin with no required-level failures.
  • Frame rate measured: 60–61 fps on all 16 pages checked at 1440 px in headed Chrome, including the home story, courses, the 3D product page, cart, checkout and the 404 page. The home and product pages also held 61 fps at 390 px. The QA run logged 0 console errors.
  • Flows tested: the WooCommerce add-to-cart → mini-cart → cart → checkout → order-received flow, and an Elementor editor smoke test where the scene updates live as its controls change.
  • Weight: the engine is about 206 KB gzip including three.js, inside the 220 KB budget. The Athenaeum scenes are one 18 KB lazy chunk, and pages without a scene load about 10 KB of JavaScript.

Athenaeum is on the DEV3 marketplace. Watch its video tour there.

Setup guide

Requirements

  • WordPress 6.0 or newer and PHP 7.4 or newer
  • The DEV3 Theme Toolkit plugin (included and required)
  • Recommended: Elementor (free), WooCommerce and Contact Form 7. WordPress offers to install them after you activate the theme.
  • Optional: Elementor Pro, plus LearnDash or Tutor LMS to deliver lessons online.

What's in the download

Unzip the download from your DEV3 account first. Do not upload the download itself to WordPress.

  • dev3-athenaeum.zip: the theme. Install this one.
  • dev3-athenaeum-child.zip: an optional child theme for your own CSS and PHP.
  • dev3-theme-toolkit.zip: the companion plugin. It is also bundled inside the theme and installed through the prompt.
  • dev3-athenaeum-demo-content.zip: the demo package for reference. The importer already has a copy inside the theme.
  • Documentation/index.html: the full guide. Open it in a browser.

Install the theme

  1. Go to Appearance → Themes → Add New → Upload Theme.
  2. Choose dev3-athenaeum.zip, click Install Now, then Activate.
  3. A notice asks you to install the DEV3 Theme Toolkit (required) and the recommended plugins. Click Begin installing plugins, then install and activate them. You can also upload dev3-theme-toolkit.zip under Plugins → Add New → Upload Plugin.
  4. Optional: if you plan to change code, upload dev3-athenaeum-child.zip the same way and activate DEV3 Athenaeum Child. The parent theme must stay installed.

Import the demo

  1. Log in as an administrator. Elementor keeps every widget setting only when an administrator runs the import.
  2. Go to Appearance → DEV3 Demo and click Import demo.
  3. The import adds:
    • the Home (five-chapter 3D story), Courses, Instructors, Events, About, Admissions and Contact pages, all built in Elementor
    • the Bookshop, Journal, Cart, Checkout, My account and Reading list pages
    • 9 courses in 5 subjects, 6 instructors and 5 events
    • 9 bookshop products (8 books with Hardcover, Paperback and eBook variations, plus a journal)
    • 6 journal posts, 4 sample testimonials and 2 Contact Form 7 forms (Application and Contact)
    • the menus, footer widgets and theme settings
  4. Open the home page and scroll through the story.

Imported items are tagged, so Reset (remove demo content) on the same screen removes only them. On a server with WP-CLI you can run wp --user=admin dev3tk demo import and wp dev3tk demo reset.

After the import

  • Change the recipient of the Application and Contact forms in Contact → Contact Forms.
  • The demo shop uses Cash on delivery. Enable your real payment gateway in WooCommerce → Settings → Payments before launch.
  • If you use LearnDash or Tutor LMS, set Appearance → Customize → Courses & Admissions → Enrolment page to your LMS checkout.

Updates

Download the new version from your DEV3 account and upload dev3-athenaeum.zip again. WordPress offers to replace the installed version. Changes you made in the child theme, the Customizer and your pages are kept.

How to use

Change the 3D story

  1. Open the home page with Edit with Elementor. The top 3D Scene widget uses the Athenaeum: the reading room preset in Fixed background (scroll story) mode. Its panel sets:
    • the cover leather colour and the Title tooled on the cover
    • the lamp light, lamp shade, room colour and lamp intensity
    • the drifting volumes: full library, a few, or none
  2. Every container below it with Advanced → DEV3 3D chapter → Use as 3D chapter switched on is a camera stop. Copy side moves the book to the other side of your text.
  3. The Scene state JSON of each chapter drives the book. Raise turn (0–9) chapter by chapter to turn pages. Set fan to 1 for a flip-book fan, stack to 1 to land the volumes in two stacks, and close to 1 to shut the book on its cover. spread, swirl, warm and lift tune the library, the lamp and the float.
  4. The demo story uses {"turn":0}, {"turn":3}, {"turn":6}, {"fan":1,"stack":1} and {"close":1}.

Publish a course

  1. Go to Courses → Add New. Fill in the level, duration, lessons (one per line, shown as a numbered syllabus), instructor and fee. Enter the instructor as the name of an Instructor post, which links to their profile.
  2. Pick a subject (course category). Subjects become the filter buttons on the Courses page.
  3. Optionally design the body in Elementor. The course template keeps the hero, facts, syllabus and enrolment card around your content.
  4. The Enrol button links to the Admissions page with the course pre-selected. Change its target and text in Appearance → Customize → Courses & Admissions.

Instructors and events

  • Instructors have a role and a biography. Their profile lists every course they teach.
  • Events have a start and end, a venue, a programme (one item per line), an entry price and an optional WooCommerce ticket product. Without a ticket, the button opens the admissions form with the event selected.
  • Show either one anywhere with the Post Type Grid widget, which supports subject filters.

Sell books

  1. Books are variable products with the global Format attribute (Hardcover, Paperback, eBook). Each format can have its own price and image. The global Author attribute appears under Additional information.
  2. On the product's 3D view tab, choose the athenaeum-book preset with parameters such as {"title":"My Book","author":"A. Writer","color":"#16243a","format":"hardcover"}. The cover is typeset live.
  3. When a shopper picks a format, the 3D viewer switches between hardcover, paperback and e-reader.

Teach online with an LMS

Install LearnDash or Tutor LMS for lessons, quizzes and progress. Athenaeum styles their course pages, buttons, lesson lists and progress bars, and enables Elementor on their course types. Point the Enrolment page setting at the LMS checkout.

Style the site

Appearance → Customize → DEV3 Athenaeum Options holds colours and fonts, the header (with its Apply now button), 3D & Motion, footer, shop and blog settings. Saving also updates Elementor's Global Colors and Fonts.

Without Elementor, use Patterns → DEV3 Athenaeum (27 patterns) and the 3D Chapter block.

Related case studies