The LearnDash Course Grid add-on can be used to display your courses in a grid format. It also comes with a few additional display options that are not available out-of-the-box with LearnDash. This article will explain how to use it, and then walk through all the available options for customizing your course grid.
NOTE
This add-on can be used to display lessons, topics or quizzes in a grid, as well. Learn more »
Table of Contents
Features
First, let’s take a look at what the course grid can and cannot do.
Feature | Included? |
---|---|
Included | |
Display Courses in Columns | ✅ |
Customize Number & Sort Order of Courses | ✅ |
Filter Courses by Category or Tag | ✅ |
Show Only Enrolled Courses | ✅ |
Show/Hide Course Image | ✅ |
Include a Video Preview | ✅ |
Include a Short Description | ✅ |
Include a CTA Button | ✅ |
Customize Button Text | ✅ |
Include a Price Ribbon | ✅ |
Customize Ribbon Text | ✅ |
Show/Hide Course Progress Bar | ✅ |
Unlimited Usage (multiple times per page, multiple pages) |
✅ |
Not Included | |
Search Courses | ❌ |
Now we’ll show you how to install the Course Grid add-on, and then cover the two different ways it can be added to your site.
Installation
Option 1: Add-ons Menu (requires an active LearnDash license)
- In your WordPress admin area, navigate to LEARNDASH LMS > ADD-ONS
- Locate the LearnDash Course Grid add-on
- Click Install Now
- Click the Activate Plugin button
Option 2: Manual Upload
- Download the plugin file (must be logged in to download)
- In WordPress, navigate to PLUGINS > ADD NEW
- Click Upload Plugin
- Browse for the
.zip
file you downloaded in Step 1 - Click Install Now
- Click Activate Plugin
Using the Course Grid
There are two ways in which you can add a grid to any page on your LearnDash site:
- Shortcode: Best for those using page builder plugins (Elementor, Beaver Builder, Divi, etc.) or the WordPress Classic Editor
- Block: Only for those using the latest version of the editor in WordPress 5.0+ (aka: Gutenberg)
DEVELOPERS
You can also add the course grid shortcode to your theme files via the do_shortcode()
function.
Shortcode
The shortcode to insert a course grid looks like this:
[ld_course_list]
The default options for the course grid will display your courses in 3 columns, and include:
- Featured image (if it exists)
- Course title
- Short description (if it exists)
- Button
- Ribbon
Please see the options table below for the many ways in which to customize the course grid.
Block
Blocks are only available if you’re using the latest WordPress editor that shipped with WordPress 5.0 (aka: Gutenberg).
You have all the same features & options as the shortcode provides, but the “LearnDash Course List” block makes it even easier to insert and customize your grid.
To add a course grid block:
- Make sure the “LearnDash Course Grid” plugin is installed & activated
- Click the
+
icon to add a new block - Search for “LearnDash Course List” & click on the block to insert it
- Adjust your settings in the Block options panel
Options (Parameters)
The following options are available to customize the output of your LearnDash course grid. Multiple parameters can be used at the same time, in any order. Mix & match them to create the perfect course grid for your site.
Gutenberg Blocks
The options listed below show you how to use them with the [ld_course_list]
shortcode, but if you’re using blocks, all the same options are available in the editor sidebar via input boxes & switches.
Feature | Description | Parameter | Possible Values |
---|---|---|---|
Grid Columns | Number of columns your grid will have on large screens. | col="4" |
1 , 2 , 3 , 4 , 5 , 6 |
Progress Bar | A visual indicator of a student’s current progress in each course. | progress_bar="true" |
true |
Number of Courses | How many courses will be displayed in your grid. | num="10" |
any integer |
Course Sorting | How to sort the courses in your grid. | orderby="title" |
title ID date modified menu_order rand …and more |
Order of Sorting | The sort order for the “orderby” parameter. | order="ASC" |
ASC DESC |
Hide Content | Hide the title, description & button. | show_content="false" |
false |
Hide Thumbnail | Hide the thumbnail image. | show_thumbnail="false" |
false |
My Courses | Shows only the courses in which the current user is enrolled. | mycourses="true" |
true |
Not-Enrolled Courses | Shows only the courses in which the current user is NOT enrolled. | mycourses="not-enrolled" |
not-enrolled enrolled |
Course Status | Shows only the courses in which the current user is enrolled AND completed. NOTE: The mycourses parameter must be set to enrolled for it to show. | status="completed" |
completed in_progress not_started |
If using LearnDash categories & tags… | |||
Course Category ID | Shows only courses in the specified LearnDash category. Use the category ID. | course_cat="10" |
any course category ID |
Course Category Name/Slug | Shows only courses in the specified LearnDash category. Use the category slug. | course_category_name="math" |
any course category slug |
Course Tag ID | Shows only courses tagged with the specified LearnDash tag. Use the tag ID. | course_tag_id="10" |
any course tag ID |
Course Tag Name/Slug | Shows only courses tagged with the specified LearnDash tag. Use the tag slug. | course_tag="math" |
any course tag slug |
Course Category Selector | Adds a dropdown menu to filter the course grid by course category. | course_categoryselector="true" |
true |
If using WordPress categories & tags… | |||
WordPress Category ID | Shows only courses in the specified WordPress category. Use the category ID. | cat="10" |
any WordPress category ID |
WordPress Category Name/Slug | Shows only courses in the specified WordPress category. Use the category slug. | category_name="math" |
any WordPress category slug |
WordPress Tag ID | Shows only courses tagged with the specified WordPress tag. Use the tag ID. | tag_id="10" |
any WordPress tag ID |
WordPress Tag Name/Slug | Shows only courses tagged with the specified WordPress tag. Use the tag slug. | tag="math" |
any WordPress tag slug |
WordPress Category Selector | Adds a dropdown menu to filter the course grid by WordPress category. | categoryselector="true" |
true |
Columns
Columns determine the number of columns that will be used to display your courses on larger screens. On smaller screens & mobile devices, fewer columns will be used. This is scaled automatically for you. Default is 3 columns. Maximum is 6 columns.
Example using 4 columns:
[ld_course_list col="4"]
Progress Bar
By default, no progress bar is shown. To add a progress bar to the courses in your grid:
[ld_course_list progress_bar="true"]
NOTE
A progress bar is only shown on courses in which the user is currently enrolled, or has completed.

Number of Courses
This option lets you limit the number of courses shown on the page. If there are more courses than the number you specify, pagination links are shown below the grid, allowing the user to navigate all courses. Default is all courses.
Example showing only 2 courses:
[ld_course_list num="2"]
Sort Order
You can customize how your courses are sorted within your grid using a combination of the orderby
and order
parameters. orderby
tells LearnDash which piece of information you’d like to sort by, and order
determines which direction the sort should occur (i.e. forwards or backwards).
Example sorting by the original publish date, most recent to oldest:
[ld_course_list orderby="date" order="DESC"]
See the options table above for a full list of sorting parameters.
Hide Content or Image
You can choose to show or hide different content for each course in your grid. You have two options:
show_content="false"
will hide the course title, short description & CTA buttonshow_thumbnail="false"
will hide the course image
Example hiding the content, only displaying the course image:
[ld_course_list show_content="false"]
Enrolled or Not-Enrolled Courses
If you’re looking to create a unique profile page for registered users, or a sales page to promote courses to non-enrollees, these options are for you.
mycourses="true"
will only display the courses in which a user is enrolledmycourses="not-enrolled"
will only display the course in which a user is NOT enrolled
Example showing only a user’s registered courses:
[ld_course_list mycourses="true"]
If you’re using categories to help organize your courses, you can add a dropdown menu to the top of your grid that will filter the courses based on their category. The user can open the dropdown menu and select a category.
If you’re using LearnDash’s categories:
[ld_course_list course_categoryselector="true"]
If you’re using the default WordPress categories:
[ld_course_list categoryselector="true"]
See below for more complex examples on how to combine multiple parameters to customize your course grid.
Featured Image
The featured image is a standard feature of WordPress. The LearnDash Course Grid add-on will use this image, if you’ve uploaded one. To set a featured image for your course:
- Navigate to LEARNDASH LMS > COURSES
- Click on the course you’d like to add an image to
- In the sidebar, look for an area titled Featured Image
- Click “Set featured image”
- Choose your image from the Media Library, or upload a new one
- Click the Select button at the bottom
- Don’t forget to click Update to save the changes
You also have the option to hide the featured image in your course grid. Use the show_thumbnail
parameter, like this:
[ld_course_list show_thumbnail="false"]
NOTE
Most WordPress themes will also display the featured image near the top of your course page. This is solely dependent on your theme, and out of LearnDash’s control. Please contact your theme developer if you have questions regarding images on your individual course page.
Ribbon
A course ribbon is a small piece of information displayed in the top-corner of each course in your grid. It’s displayed over top of all other content, and the text it displays depends on…
- the specific user viewing your grid, and their enrollment status
- the course access mode for that particular course
If the user viewing the course grid has completed the course, then the ribbon will say Completed.
If the user is enrolled in the course, but has not completed it, then the ribbon will say Enrolled.
If the user is NOT enrolled in the course…
- and the Access Mode is set to “Open” or “Closed,” then no ribbon will be displayed.
- and the Access Mode is set to “Free,” then the word Free will be displayed.
- and the Access Mode is set to “Buy Now” or “Recurring,” the amount entered in the Course Price field will be displayed.
If no amount is entered in the Course Price field, then no ribbon will be displayed.
See below for how to customize the ribbon text.
By default, all courses in your grid will include a CTA button that says, “See More…”. This language remains the same for enrolled users, non-enrolled users, and completed courses.
See below for how to customize the button text on a course-by-course basis.
Additional Grid Information
The Course Grid add-on allows you to add a few additional pieces of information about your courses that you present to your users in the grid. All of them are optional.
- Navigate to LEARNDASH LMS > COURSES
- Click on the course you’d like to edit
- Click on the Settings tab
- Scroll down until you see Course Grid Settings
- Enter as much or as little information as you’d like
- Be sure to click Update when you’re finished
Short Description
The short description is a brief explanation of the course. It will be displayed immediately below the course title. We recommend no more than 2 sentences and somewhere around 15-25 words.
This works the same for lesson, topic & quiz grids, too.
By default, each course in your grid will include a button that says “See More…”. This button links to your course. If you’d like to change the text on the button to something other than “See More…”, you can do so.
This works the same for lesson, topic & quiz grids, too.
Ribbon Text
This field allows you to override the default text displayed on the ribbon. Keep in mind, if you use custom ribbon text, it will apply to all users, whether or not they are enrolled, and whether or not they have completed the course.
Ribbons are only displayed on course grids, not on lesson, topic or quiz grids.
Video Preview
The video preview option allows you to embed a video instead of displaying a course image. This is great for providing a quick introduction to your course, especially if you’re trying to entice users to sign up for or purchase the course.
- Check the box next to Enable Video Preview
- Add a Video URL or Embed Code
Paste the direct video URL (or embed code) of the video you want to use in the grid. If you have a video file URL, then you can use the video tag to embed your video like this: <video controls><source src="video-file.mp4" type="video/mp4"></video>
This works the same for lesson, topic & quiz grids, too.
Lessons, Topics & Quizzes
You can also use the Course Grid add-on to display lessons, topics and/or quizzes in a grid format. Most of the same customization parameters apply, like:
✅ number of columns, sorting & filtering, show/hide image and/or short description, video preview, button text
The following course grid features do not apply when displaying lessons, topics or quizzes in a grid:
❌ enrolled courses only, progress bar, price ribbon
Let’s take a look at how to display each type of content in a grid.
Lessons
To display a lesson grid, use the following shortcode:
[ld_lesson_list]
To show the lessons in a particular course only, use the course_id
parameter (not required when using the shortcode on a course page):
[ld_lesson_list course_id="123"]
Change 123
to the ID of the course in which you want to display lessons.
Topics
To display a topic grid, use the following shortcode:
[ld_topic_list]
To show the topics in a particular course only, use the course_id
parameter (not required when using the shortcode on a course page):
[ld_topic_list course_id="123"]
Change 123
to the ID of the course in which you want to display topics.
NOTE
You cannot filter topics by lesson, only by course.
Quizzes
To display a grid of quizzes, use the following shortcode:
[ld_quiz_list]
To show the quizzes in a particular course only, use the course_id
parameter (not required when using the shortcode on a course page):
[ld_quiz_list course_id="123"]
Change 123
to the ID of the course in which you want to display quizzes.
NOTE
You cannot filter quizzes by lesson or topic, only by course. All quizzes assigned at any point during the course (lesson quizzes, topic quizzes, final course quizzes) will be displayed.
Shortcode Examples
Here are some examples you can use when building out a grid on your site:
Display a progress bar for each course:
[ld_course_list progress_bar="true"]
Display up to 8 courses in 4 columns (4×2 grid):
[ld_course_list num="8" col="4"]
Display all courses & sort them in alphabetical order, by their title:
[ld_course_list orderby="title" order="ASC"]
Display all courses & order them by the most recently modified course first:
[ld_course_list orderby="modified" order="DESC"]
A few notes about sort order:
- When ascending (ASC) is chosen for
orderby="title"
, your courses would be displayed in alphabetical order from A-Z. - When using dates (
date
&modified
), ascending will show the oldest content first, while descending will show the most recent content first. - For
ID
&menu_order
, ascending will show the lowest number first (i.e. 1), while descending will show the highest number first.
Display only the courses that a user is enrolled in:
[ld_course_list mycourses="true"]
Display only the courses that a user is enrolled in, and sort randomly:
[ld_course_list mycourses="true" orderby="rand"]
Display a user’s enrolled courses, with a progress bar, and sort by oldest to newest (based on original publish date):
[ld_course_list mycourses="true" progress_bar="true" orderby="date" order="ASC"]
Display courses in which the user is NOT enrolled, and only show the featured image (hide the title, button & description):
[ld_course_list mycourses="not-enrolled" show_content="false"]
Display all courses & hide the course image (only show title, button & short description):
[ld_course_list show_thumbnail="false"]
Display 2 courses, in a 2-column grid, with a LearnDash category selector filter:
[ld_course_list num="2" col="2" course_categoryselector="true"]
Display all lessons in the course with an ID of 7
, and sort by their order in the course builder:
[ld_lesson_list course_id="7" orderby="menu_order" order="ASC"]
These are only some of the ways you can use the shortcode to customize your grid. Feel free to experiment with your own combination of parameters to create exactly the type of grid you want.