A course catalog page has one job: help a stranger decide which course to open. Not which course is best in the abstract, but which one is right for them, today, with the time and money they have. Everything else on the page, from the grid spacing to the filter labels, either helps that decision or gets in its way.
This guide is about the catalog and archive page only. It does not cover choosing a LearnDash theme in general, lesson layouts, or the student dashboard. If you want the wider walk through of styling a whole academy, our guide to giving a LearnDash academy its look covers that, including a short step on the catalog. Here we go much further into that one page: what a student needs to see, which fields belong on a card, how filters and sorting should behave, and what to do when the page has nothing to show.
What does a student need to decide on a catalog page?
A visitor arriving at your catalog is holding five questions, whether or not they would phrase them this way.
- Is this for someone like me? Level and subject answer this.
- What will I be able to do afterwards? This is the outcome.
- How much of my time will it take? This is the length.
- What does it cost? Price, or the fact that it is free or included in a membership.
- If I have already started, where do I resume? Progress, for people who are signed in.
A catalog that answers those five questions on the card lets a student rule courses in and out without opening each one. A catalog that answers none forces a click per course, and people will not do that for long. They leave, or they open three tabs and lose their place.
The page does not have to persuade. Persuasion belongs on the course detail page, where there is room for a curriculum, an instructor and reviews. The catalog’s job is narrower: make the choice easy enough that the student reaches the detail page for the right course.
How are catalog, archive and detail pages different?
People use these words loosely, so here is how we use them.
| Page | What it shows | Student’s question |
|---|---|---|
| Catalog or archive | Many courses as cards | Which one should I open? |
| Category archive | Courses in one subject | Which one in this subject? |
| Course detail | One course in depth | Should I enrol? |
| Dashboard or “my courses” | Courses the student already has | Where do I continue? |
The same card component often appears on all of the first, second and fourth pages. That is a good reason to design the card once, carefully. A change to the card is a change to how students choose everywhere.
Which card fields belong on a course card?
Cards fail in two directions. Too sparse, and a card is just a title and a picture. Too dense, and it becomes a small version of the detail page. The aim is the five answers from above and nothing more.
| Card field | Question it answers | Notes |
|---|---|---|
| Title and image | What is this? | The title should name the result, not the topic |
| Outcome line | What can I do afterwards? | One sentence, written in plain words |
| Length | How long will it take? | Hours or weeks, stated the same way on every card |
| Level | Is it for me? | One consistent vocabulary across the catalog |
| Price or access | What does it cost? | Free, a price, or “included with membership” |
| Rating | Do others recommend it? | Only when you have enough reviews to mean something |
| Progress | Where was I? | Enrolled, signed-in students only |
Outcome
The outcome is the most valuable and most neglected field. A title such as “Photography Basics” names a topic. An outcome line such as “Shoot sharp photos in manual mode” names something the student can picture doing. In LearnDash the natural home for it is the course excerpt, so write the excerpt for the card first and the long description second. Keep it to a single sentence so cards in a row stay the same height.
Length and level
Two points of general practice. First, pick one way of stating length and stick to it, because mixing “2 hours”, “4 weeks” and “self-paced” across cards makes comparison impossible. Second, pick a short, fixed level vocabulary such as beginner, intermediate and advanced, and apply it to every course.
We did not find dedicated length or level fields in LearnDash itself, so you will carry them another way. A common approach is a course tag per level, which then doubles as a filter, and a consistent pattern in the excerpt for length. The Reign LearnDash Addon can filter the grid by tag, which makes the tag approach work without custom code. Check what your own LearnDash version offers before building around either.
Price and access
Say what the student will pay, or that they will pay nothing. The Reign LearnDash Addon draws a price or “free” ribbon on archive cards, and has a setting to hide it if your courses are all included in a membership, where a price on every card would be noise. The grid also filters by free or paid.
On the LearnDash side, the official Course Grid add-on shows a ribbon on each card, and the ribbon changes with the student: it can read Enrolled or Completed for people who have taken the course. That is a useful reminder that a card is not one fixed object. It is a different card for the signed-in student than for the visitor.
Progress for enrolled students
For a student who has already started, progress is the most important field on the card, because it answers the only question they have: where do I pick up? The Reign addon’s grid shows progress bars to enrolled, signed-in users, and can be limited to enrolled courses with the shortcode attribute enrolled="yes". It also accepts minimum and maximum progress percentages, so you can build a “keep going” row of courses between, say, ten and ninety percent complete. LearnDash’s Course Grid has a progress_bar option for the same purpose.
Do not show progress to people who are not enrolled. A bar at zero on every card adds clutter and tells them nothing.
How should filters and categories work?
Filters are what turn a long catalog into a short one. They matter once you have more than a screen or two of courses, and they hurt when you have six, because a filter bar above six cards is more interface than content.
Categories first, filters second
Categories are the structure of the catalog. Filters are the tools a student uses inside it. Decide the categories before you decide the filters.
- Keep the list short. A student scanning a dozen categories is not choosing, they are reading.
- Give each course one primary category, so it appears in one place, with tags for secondary cuts such as level.
- Name categories after what the student wants to do, not after how your team is organised.
Which filters earn their place?
Both LearnDash’s Course Grid add-on and the Reign addon give you filters. The Course Grid add-on provides a keyword search, filters by taxonomy (category and tag by default) and a price filter, switched on through its filter attributes. The Reign addon’s modern course grid filters live by category, tag, instructor, price type (free or paid) and enrollment status, with search and sorting that update in place over AJAX, so the page does not reload on every click. Its archive settings also let you switch the category, tag and instructor filters on or off.
Switch on only what a student would use:
| Filter | Worth showing when | Skip it when |
|---|---|---|
| Search | You have more than a screenful of courses | You have a handful |
| Category | Courses fall into clear subjects | There is one subject |
| Level (as a tag) | Mixed beginner and advanced content | All courses suit the same audience |
| Price type | You mix free and paid | Everything is free or everything is paid |
| Instructor | Students follow particular teachers | You have one instructor |
| Enrollment status | Returning students use the page | You are a new site with no students yet |
A filter that has only one possible value is clutter, and a filter nobody understands is worse. If your analytics show that a filter is never touched, remove it.
Make filters behave
Two behaviours separate a good filter from a frustrating one. Filters should combine, so a student can search inside a category and narrow by level together. And they should show what is applied, so it is obvious why the list has shrunk and how to clear it. Test both on a phone, where a long filter bar can push the courses off the first screen.
What sort order should the catalog use?
The default order says what you consider important. In the Reign addon’s grid, the default sort is by date, newest first, and the on-screen control offers newest, oldest, and title from A to Z or Z to A. The shortcode also accepts menu_order, which lets you arrange courses by hand with the order field in WordPress, and a course_ids list that shows exactly the courses you name in the order you give them. LearnDash’s Course Grid exposes orderby and order in the same spirit, and its documented default is to order by ID.
Newest first suits a catalog that adds courses often and wants returning students to see what is new. It suits a catalog that is mostly one core course badly, because the newest course may not be the best place to start. A hand-ordered list, with your recommended starting course first, is often the better default for a young catalog.
Keep the sort control, but think of it as a convenience. Most students never touch it, which is why the default order matters more than the options.
How do you handle featured courses?
A featured strip above the full catalog gives new visitors a starting point. There are two simple ways to build one with the tools above.
- A tag. Tag the courses you want to promote as “featured” and place a grid filtered to that tag, with fewer columns and no filters, above the main catalog. The Reign addon’s
tagattribute does this, and the Course Grid add-on can filter by tag too. - A hand-picked list. Use
course_idswith the courses you want, in the order you want. This is the most direct option and suits a small, deliberate selection.
Keep the strip short. Three or four courses is a recommendation, and a dozen is another catalog. Review it when your offering changes, because a featured course that has been replaced quietly misleads every visitor who sees it.
What should empty and sold-out states say?
The states nobody designs are the ones students see at the worst moment. Plan for these, and test each one on purpose.
A new site with no courses yet. An empty grid looks broken. Until you publish, either hide the catalog from the menu or put a line of text above it saying what is coming and how to be told. A blank page costs trust.
A filter that returns nothing. A student who combines a category with a level may find no matches. A silent, empty grid reads as an error. The better pattern is a plain message such as “No courses match these filters”, with a clear way to reset them. We cannot promise that every grid prints such a message for you, so check what yours does with a combination that returns nothing, and add your own text above the grid if it is blank.
A course that is not currently open. Some courses run in cohorts or have limited places. A card for a course nobody can join should say so, and offer a next step, such as joining a waiting list, rather than inviting a click that leads to a dead end. LearnDash handles access through course access modes such as free, buy now, recurring and closed, so a closed course is a natural way to represent one that is not open, with your own text on the detail page explaining when it returns. Check your version’s documentation for how the mode appears on cards.
An enrolled student with nothing started. On a “my courses” view, a student with no enrolments should see a prompt to browse the catalog, not an empty page.
For each of these, the principle is the same: never leave a student wondering whether the page is broken. If there is nothing to show, say why and offer the next step.
How should the catalog work on mobile?
Many students will meet your catalog on a phone, so test it there first and on a desktop afterwards.
- Columns collapse. A three-column grid should become a single column, or two at most, on narrow screens. Check that card text does not shrink to something unreadable.
- Filters take care. A permanently visible filter bar can fill the first screen on a phone. A collapsed filters control that opens on demand leaves room for the courses. Learnomy’s filter sidebar, described below, does exactly that on narrow screens.
- Tap targets. Cards, filters and pagination controls need to be big enough for a thumb, with space between them.
- Pagination. Numbered pages are hard to hit on a phone. The Reign addon offers numbered, load-more and infinite scroll pagination, and LearnDash’s Course Grid supports a load-more button and infinite scrolling. A load-more button is the safest of these, since infinite scroll can make the footer unreachable.
- Images. Card images should be a consistent ratio, so rows stay even, and sized so they do not slow the page on mobile data.
How does the catalog tie to the course detail page?
The card makes a promise, and the detail page has to keep it. If the card says “Shoot sharp photos in manual mode, two hours, beginner”, the detail page should open with that same outcome, length and level, then expand on it. A mismatch between the two, such as a different price or a different title, is the quickest way to lose a student who was ready to enrol.
The Reign LearnDash Addon helps with this because it applies one layout to all LearnDash pages. It overrides the LearnDash 30 templates for single courses, groups, archives and the category pages, so the catalog and the detail page share a design. A few features are worth using deliberately:
- A tabbed course layout. Curriculum, instructor and comments are separate tabs, with shortcodes for each, so the page stays scannable.
- A Course Features box. On each course’s edit screen you can add icon-led feature rows, which show on the detail page. This is a good home for the length, level and outcome detail that did not fit the card.
- Cover images with a fallback. A course uses its own cover image first, then the default cover from the settings, then a placeholder. The recommended default size is 1920 by 350 pixels, and there is a separate default image for cards that have no thumbnail. Set both so that no card ever shows a blank space.
- Related courses. The addon can show related courses on the detail page, so a student who decides a course is not right has somewhere to go next. You choose the heading and the number shown.
- Buy buttons. For courses sold through WooCommerce, Easy Digital Downloads or Paid Memberships Pro, the addon replaces the LearnDash payment button with one wired to your store, and adds the linked product to the cart over AJAX. The card price, the button and the checkout should all show the same figure.
For the detail page itself and the rest of the addon, our guide to the best LearnDash theme and the Reign addon covers the wider feature set, so this guide does not repeat it.
Building the catalog with the Reign LearnDash Addon
The Reign LearnDash Addon is the first thing we would reach for here, since it covers the grid, the archive and the detail page together. It is a companion plugin that needs both the Reign theme and LearnDash active, plus WordPress 6.5 or newer and PHP 8.0 or newer. It is sold as a yearly or lifetime licence for one site (see the pricing page), and the Reign LearnDash Addon store page lists the higher site tiers.
A sensible order of work:
- Set the archive. In the Reign theme settings, open the LearnDash tab and choose one of three course archive layouts. Preview each with your real courses rather than the defaults. Switch the category, tag and instructor filters on only if they pass the table above.
- Set the fallbacks. Add a default cover image and a default course image so that no course appears blank.
- Decide on the ribbon. Keep the price or free ribbon, or hide it if everything is included in a membership.
- Place a grid where you need one. Use the
[modern_courses]shortcode, or the Modern Courses block, on a page. The shortcode offers four card templates, which are classic, minimal, premium and detailed, and a grid or list view with a column count you choose. - Add the featured strip. A second grid with
tag="featured", fewer columns and filters turned off. - Build a “my courses” page. A grid with
enrolled="yes"and progress shown. - Test every state. A visitor, an enrolled student, a student with nothing started, a filter that returns nothing, and a phone.
Two examples show how little markup this takes:
[modern_courses template="premium" columns="3" tag="featured" show_filters="no" show_search="no" show_sorting="no"]
[modern_courses enrolled="yes" show_progress="yes" template="minimal"]
If you prefer LearnDash’s own grid, the Course Grid add-on has its [learndash_course_grid] shortcode, with grid, masonry and list skins, optional filters and a progress bar option. The two approaches suit different sites, and the addon gives you the benefit of one design across the whole course experience.
When Learnomy is the better catalog
If you are starting a course site and have not committed to LearnDash, look at Learnomy before you build anything. It is our own WordPress LMS, free to install, with payments, drip content, assignments and grading in Learnomy Pro, a paid yearly licence. Our Learnomy review covers the whole plugin.
On the catalog specifically, Learnomy builds the public /courses/ page automatically. It offers two layouts: a grid with a filter bar for search, category and sort, and a filter sidebar that adds price, level, rating, duration, instructor and tag filters. Each option carries a live count of matching courses, filters that have nothing to show do not appear at all, every choice is written into the page URL so a filtered view can be linked or bookmarked, and the rail collapses behind a Filters button on phones. Those are many of the behaviours this guide recommends, available without configuration.
This is not a reason to leave LearnDash if it already runs your academy. It is a reason to compare before you start.
A catalog checklist
Run this against your own catalog before you launch or redesign.
| Check | Pass condition |
|---|---|
| Five questions | Every card answers audience, outcome, length, price and, for students, progress |
| Consistent wording | Length and level use one vocabulary across all cards |
| Filters | Each one is used by students and combines with the others |
| Default order | The first course shown is one you would recommend |
| Featured strip | Short, current and hand-chosen |
| Empty states | New site, no match, closed course and no enrolments all have text |
| Mobile | One column, easy tap targets, collapsed filters |
| Card and detail match | Title, price and promise agree between the two |
| Fallback images | No card ever shows a blank image area |
Fixing the failures on this list will do more for enrolment than any change to colours or fonts. After that, read how certificates and verified completion work in our guide to issuing course certificates on WordPress, since it is the next thing students look for once they have chosen a course.
Frequently asked questions
What should a LearnDash course card show?
Show the title, an outcome line, the length, the level and the price or access type. Add a rating once you have enough reviews to mean something, and progress for signed-in students who are enrolled. Leave out anything that belongs on the detail page.
Does LearnDash have a built-in course catalog with filters?
LearnDash has an official Course Grid add-on that provides a grid with optional filters for search, category, tag and price. The Reign LearnDash Addon adds its own grid with filters for category, tag, instructor, price type and enrollment status. Both are described above, and you should check your own LearnDash version’s documentation for current options.
How many courses do I need before adding filters?
Filters earn their place once the catalog is longer than a screen or two. With a handful of courses, a filter bar adds more interface than content. Start with search and category, and add others only when students show they need them.
How do I show progress on the catalog for enrolled students?
With the Reign LearnDash Addon, use [modern_courses enrolled="yes" show_progress="yes"] on a page for signed-in students. Progress bars appear on the cards of courses they have started. LearnDash’s Course Grid add-on has a progress bar option for the same purpose.
What should the catalog show when no course matches the filters?
Show a plain message that says nothing matches, and give the student a clear way to reset the filters. Check what your grid does with a combination that returns no results, and add your own text above the grid if it stays blank.
Can I run a catalog without LearnDash?
Yes. Learnomy, our own LMS, creates a catalog page automatically and is free to install, with a paid yearly Pro licence for payments, drip content and grading. It is worth comparing with LearnDash before you commit, especially on a new site.