Name: Course Layouts – Elementor Addon for TutorLMS
Author: UserElements

Course Layouts – Elementor Addon for TutorLMS gives you a complete set of Elementor widgets to design course discovery pages, student dashboards, and instructor directories for Tutor LMS—without writing code.

Place filters in a sidebar, search in a header, and the course grid anywhere on the page. Link them with a shared Listing ID and they work together instantly via AJAX. Every layout is fully customizable in Elementor, with responsive column controls, extensive style options, and optional Elementor Loop Item templates for pixel-perfect course cards.

Why use Course Layouts?

All-in-one course discovery — Grid, filters, search, sort, chips, and pagination in one cohesive system
Design freedom — Built-in cards or your own Elementor Loop Item / Saved Template designs
Composable layouts — Split discovery controls across your page (sidebar filters, top search, bottom grid)
Personalized experiences — Show enrolled, in-progress, completed, or wishlisted courses per student
Theme Builder ready — “Current Query” mode respects archive taxonomies, authors, and search in AJAX
Conversion-focused cards — Smart price labels, enrollment CTAs, progress bars, badges, and wishlist
SEO support — Optional ItemList / Course JSON-LD schema on course grids (3+ courses)
Accessible & fast — ARIA labels, live result announcements, skeleton loading, and debounced AJAX

Elementor Widgets (10)

All widgets live under the Essential TutorLMS category in Elementor.

Course Directory Grid
The main course listing widget. Responsive 1–6 column grid, built-in card or Loop Item skin, embedded or standalone filters/search, pagination, and full styling controls.

Course Categories Grid
Display course categories in a card or list layout with image, title, description, course count, and optional view button. Sort by name, slug, ID, course count, description, or random.

Course Filter Panel
Standalone filter sidebar or horizontal bar. Connects to any Course Directory Grid via Listing ID. Up to 8 configurable filter fields with Clear All.

Course Search
Standalone debounced search box linked to a course listing by Listing ID.

Active Filter Chips
Removable filter pills that reflect the current filter state—ideal for zero-results recovery and quick filter removal.

Sort & Result Count
Standalone sort dropdown (newest, title, popularity, price) plus live “Showing X–Y of Z” result count.

My Courses
Student dashboard grid (extends Course Directory Grid) pre-set for enrolled, in-progress, completed, or wishlisted courses with progress display.

Continue Learning
Highlights the student’s most recent in-progress course with thumbnail, next lesson, progress bar, and resume button.

Instructor Directory
Browse Tutor instructors in a responsive grid with search, category filter, ratings, course/student counts, bio, and profile CTA.

Composable Discovery (Listing ID + CLETA.Bus)

Version 1.3 introduces a pub/sub architecture so discovery widgets can live anywhere on the page:

Set a Listing ID on the Course Directory Grid (default: courses).
Add Filter Panel, Search, Active Filter Chips, and Sort & Result Count widgets anywhere.
Give each the same Listing ID—they sync automatically via CLETA.Bus.

Filters, search, sort, and pagination update the grid over AJAX without a full page reload. Filter state can be written to URL parameters for bookmarking, sharing, and browser Back/Forward navigation.

Filtering & Search

Filter field types: category, level (Tutor 4.x meta), tags, instructor, price, rating, duration, and custom meta key.

Filter styles: dropdown, checkbox, radio buttons, and range slider (price, rating, duration use real catalog min/max/step values, cached for performance).

Smart facets: option counts beside each value; empty options hidden automatically.

Auto-apply: filters apply on change; range sliders debounce before reload.

Search: debounced AJAX search across course titles and related fields; works embedded in the grid or via the standalone Search widget.

Combine filters: up to 6 filter fields in the grid widget, up to 8 in the standalone Filter Panel.

Query Sources

Control which courses appear in the grid:

All courses — full catalog (optionally limited by category)
Current Query — respects Theme Builder archive context (category, tag, author, search)
Enrolled — courses the logged-in student is enrolled in
Not enrolled — courses the student has not joined
In progress — started but not completed
Completed — finished courses
Wishlisted — courses on the student’s wishlist

Personalised sources require a logged-in student. My Courses defaults to enrolled with quick switching between student-specific lists.

Course Cards

Built-in card skin toggles for:

Featured image with configurable size
Title, excerpt (configurable length), and whole-card link
Price (free, sale, membership, subscription-aware labels)
Rating, duration, lesson count, enrollment count
Instructor name and link
Categories, level, tags, and benefits
State-aware CTA: Enroll / Buy / Start / Continue
Progress bar for enrolled students
Badges: New, Free, Bestseller (enrollment threshold filterable)
Wishlist heart (integrates with Tutor LMS wishlist)
Skeleton loading placeholders during AJAX updates

Loop Item / Saved Template skin lets you design cards in Elementor Pro Loop Items or any Saved Template, bind Tutor Dynamic Tags, and use them in the grid—including during AJAX filter, load-more, and pagination responses.

Elementor Dynamic Tags

A Tutor LMS (CLETA) dynamic tag group exposes course fields for use in any Elementor widget or Loop Item:

Course Title
Course Price
Course Level
Course Duration
Course Lesson Count
Course Enrollment Count
Course Rating
Course Instructor Name
Course Instructor URL
Course Progress %
Course Enrollment Status
Course URL (permalink)

Pagination

Page numbers — classic numbered pagination with position control
Load More — append next page on button click
Infinite scroll — auto-load as the user scrolls
Configurable courses per page (1–100)
Accurate “Showing X–Y of Z” counts

Sorting

Default sort in widget settings or via the Sort & Result Count bar:

Date (newest / oldest)
Title (A–Z / Z–A)
Popular (review count)
Price (low to high / high to low)
ID, name, modified, menu order, random

Instructor Directory

Responsive 1–4 column grid
Filter by course categories taught
Minimum rating threshold (3+, 4+, 5 stars)
Sort by name, newest, or highest rated
Front-end search and category filter
Card toggles: avatar, name, job title, bio (truncated), course count, rating, student count, profile CTA
Pagination

SEO Schema Markup

The Course Directory Grid outputs JSON-LD ItemList schema with nested Course entities when 3 or more courses are displayed. Includes title, description, URL, image, instructor, provider, and pricing where available.

Auto-injection on single course pages is intentionally disabled to avoid conflicts with Tutor LMS, Yoast SEO, or Rank Math.

Performance & Security

Assets register globally; widgets enqueue only what they need
Widget settings cached in transients (server-authoritative on AJAX—client cannot override)
Filter catalog stats (price, duration, level facets) cached and busted on course save/delete
Nonce verification on all AJAX endpoints
Debounced search and range sliders to reduce server requests

Accessibility

ARIA labels on filter and search controls
aria-live regions for result count and grid updates
aria-busy during AJAX loading
Enter-key handling for search and filter fields
Screen-reader text on sort controls

Responsive Design

Both course and category grids include responsive column breakpoints for desktop, tablet, and mobile. Filter panels support vertical (sidebar) and horizontal (toolbar) layouts.

Tutorials & Guides

More Plugins by UserElements

Support

For technical support, feature requests, or general questions, please visit userelements.com or create a support ticket in the WordPress.org plugin forum.