A custom-built course review platform for Spill The Course — essentially a Trustpilot for online courses. The project was developed from a Figma UI with a custom WordPress theme and shortcode-powered dynamic pages covering course listings, reviews, ratings with outcome logic, Q&A, add missing course flow, and user auth — with bug fixes and live updates across multiple sessions.
Spill The Course — Course Review Platform
Overview
Spill The Course is a course review platform — essentially a Trustpilot for online courses — where admins list courses as structured content and users post dynamic reviews with ratings, tags, outcome percentages, and Q&A interactions. The project was built from a Figma UI design using a custom WordPress theme with Elementor for layout and custom shortcodes powering all dynamic functionality across 12 pages.
The Challenge
The platform required building a review and rating system more complex than standard WordPress comment or review plugins. Key challenges included:
- Designing and building a custom review system with dynamic rating logic, outcome percentage calculations, and case-insensitive matching for course recommendations
- Building a course archive with live search, AJAX loading states, and a "No Results" state that surfaces an "Add Missing Course" action button reliably
- Implementing a full user auth flow — Sign Up, Login, Forget Password — as custom shortcode-powered pages matching the Figma design
- Building an "Add Missing Course" submission flow with a confirmation page
- Managing a complex development workflow — working on a live domain with caching complications, resolving issues by restoring locally, updating code, and redeploying
Scope of Work
The platform was built across 12 pages combining Elementor layouts and custom shortcodes:
- Home — Elementor layout with shortcode-powered course highlights
- Our Mission — Elementor static page
- Courses Archive — Elementor layout with shortcode-powered course listing, live search, and AJAX loading
- Single Course — Full course detail page with reviews, ratings, outcome percentages, and Q&A
- No Course Found — Empty state with Add Missing Course action button
- Add Missing Course — Course submission form with text fields for price and duration
- Course Added — Confirmation page after submission
- Write A Review — Dynamic review submission form
- Sign Up / Login / Forget Password — Full auth flow pages
- 404 — Custom theme-coded error page
Development Process
Custom Theme & Shortcode Architecture
The platform was built on a custom WordPress theme developed specifically for the project. Dynamic functionality across all pages was powered by custom shortcodes — keeping Elementor responsible for layout and visual design while shortcodes handled all data-driven rendering including course listings, search, reviews, ratings, and auth forms. Course custom post types were registered with appropriate meta fields — price and duration fields were updated from number inputs to text inputs to support flexible formatting.
Course Archive & Search
The course archive was built with live search functionality. The search asset file was updated so that pressing Enter triggers a search query on the archive page. A loading state was added to the courses display before results render. The "Add Missing Course" action button was added to the no-results block — initial display inconsistencies caused by caching on the live domain were resolved by restoring a local copy, updating the JavaScript and CSS asset files, fixing redundant display logic in the render function, and redeploying the updated theme to the live site.
Review & Rating System
The review system was built with dynamic rating logic including course outcome percentage calculations. A recommendation percentage bug was identified and resolved — caused by case-insensitive matching not being handled correctly, resulting in incorrect outcome tallies. All reviews on the single course page are displayed without a hidden limit, matching the Figma design intent. Course outcome icons were also fixed for correct display.
Add Missing Course Flow
The Add Missing Course button and related messaging were enhanced for better user engagement — improving the call to action language and visibility within the course archive no-results state.
Key Features
- Custom Review System — Dynamic ratings, outcome percentages, tags, and Q&A interactions
- Course Archive with Live Search — AJAX-powered search with loading states and Enter key support
- Add Missing Course Flow — Submission form with confirmation page and no-results action button
- Outcome Percentage Logic — Case-insensitive recommendation matching with manual verification
- Custom Shortcode Architecture — All dynamic functionality powered by shortcodes within Elementor layouts
- Full Auth Flow — Sign Up, Login, and Forget Password pages matching Figma design
- Custom Theme — Built specifically for the platform with CPTs, asset files, and template structure
- Figma-to-WordPress — All pages built to match the provided Figma UI design
Result
A fully functional custom course review platform for Spill The Course — built from a Figma UI with a custom WordPress theme, shortcode-powered dynamic pages, a logic-driven review and rating system, live course search with loading states, an add missing course flow, and a complete user auth system, delivering a Trustpilot-style review experience tailored specifically for the online course market.