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 »

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)

1. In your WordPress admin area, navigate to LEARNDASH LMS > ADD-ONS
2. Locate the LearnDash Course Grid add-on
3. Click Install Now
4. Click the Activate Plugin button

Option 2: Manual Upload

1. Download the plugin file (must be logged in to download)
2. In WordPress, navigate to PLUGINS > ADD NEW
3. Click Upload Plugin
4. Browse for the .zip file you downloaded in Step 1
5. Click Install Now
6. 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:

1. Make sure the “LearnDash Course Grid” plugin is installed & activated
2. Click the + icon to add a new block
3. Search for “LearnDash Course List” & click on the block to insert it
4. 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
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 button
• show_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 enrolled
• mycourses="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"]

Dropdown Menu Filter

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:

1. Navigate to LEARNDASH LMS > COURSES
2. Click on the course you’d like to add an image to
3. In the sidebar, look for an area titled Featured Image
4. Click “Set featured image”
5. Choose your image from the Media Library, or upload a new one
6. Click the Select button at the bottom
7. 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.

Call-to-Action Button

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.

1. Navigate to LEARNDASH LMS > COURSES
2. Click on the course you’d like to edit
3. Click on the Settings tab
4. Scroll down until you see Course Grid Settings
5. Enter as much or as little information as you’d like
6. 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.

Custom Button Text

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.

1. Check the box next to Enable Video Preview
2. 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.