LearnDash Course Grid Addon

Your course list serves two audiences at once

Someone who has not bought yet comes to your courses page to decide. Someone already enrolled comes to that same page to pick up where they left off. If the list shows both the same thing, one of them misses what they came for: the first sees nothing persuasive and the second cannot see where they were.

A course catalog is a shop window and a classroom at the same time. LearnDash Course Grid displays courses in a visual grid whose cards change according to each user's relationship with the course.

It is a LearnDash add-on: it does not create courses or charge for enrollment. Since LearnDash 4.21.4 this feature is in the core: check your version before installing it.

What changes on each card depending on who is looking

• Ribbon for those who have started: it reads Completed if the user finished the course and Enrolled if they are enrolled.
• Ribbon for those not in yet: it depends on the access mode. A free course shows Free; an open or closed course with no price shows no ribbon.
• Progress bar: it appears only on courses the user is enrolled in or has completed, and only for courses and groups.
• Enrolled view: the query can filter by whether the user is enrolled in the course or group. With the shortcode you can also filter by completed, in progress or not started.
• Per-course data: each course accepts a short description, a duration, button text, ribbon text and a video preview in place of the image.

How the grid is built and filtered

• Three layouts: Grid, Masonry and List. Grid and Masonry use the grid-1, grid-2 and grid-3 cards; List uses list-1 and list-2.
• Columns: three by default. With the minimum width, which is 250 pixels in the shortcode, the number of columns adjusts itself when space runs short.
• Filters: keyword search, public taxonomies and a price range. The panel sits above the grid or elsewhere on the page, such as a sidebar, with [learndash_course_grid_filter].
• Pagination: a load more button or infinite scrolling. If there are more items than the per-page limit, you must pick one to show the rest.

How far it goes with lessons, topics and quizzes

The grid also displays lessons, topics and quizzes, but there it loses the features tied to each student: no enrolled view, no progress bar and no price ribbon. Ribbons only appear on course grids.

• Topics can be filtered only by course, not by lesson, and quizzes only by course.
• The price filter covers courses and groups; other content types need a code filter.

Block or shortcode, and how to start

The WordPress editor block has tabs for template, query, elements, filter and styles. The [learndash_course_grid id=cg-1] shortcode is for page builders and the classic editor, with fewer options. You need LearnDash installed.

1. If you are on a version before LearnDash 4.21.4, install and activate Course Grid.
2. Fill in each course's description, duration and the featured image that feeds the thumbnail.
3. Search for the LearnDash Course Grid block with the + icon and insert it on the page.
4. Choose a layout and card, turn on the filter and a pagination option.
5. Open the page as a visitor and as an enrolled student, and compare what each one sees.

If you are coming from Course Grid 1.0, attribute names change: col becomes columns. A legacy-v1 layout exists for those shortcodes, but most are not available in 2.0, so review your old pages one by one on a copy of the site.

Other pieces for the visible side of LearnDash

All of this rests on LearnDash LMS, which is the base. If you build with Divi, Divi LearnDash Kit turns LearnDash shortcodes into native modules, a course list among them.

To give students their own area with courses, progress, grades and certificates, LearnDash Dashboard brings that to the public side of the site.

Questions about course grids in LearnDash

Does it work without LearnDash?

No. It is a LearnDash add-on and displays its courses, lessons, topics, quizzes and groups.

Can I show each student only their own courses?

Yes. The query filters by enrollment status, and with the shortcode also by progress.

Can I create my own card design?

Yes, if you work with code. Custom templates go in the active theme, inside /learndash/course-grid/, and are registered with the learndash_course_grid_skins and learndash_course_grid_cards filters.