The LearnDash Course Grid add-on is a versatile tool designed to display your courses, lessons, topics, and quizzes in an attractive grid format. With the advent of Course Grid 2.0, the add-on has become more user-friendly, offering numerous customization options to help you achieve the perfect look and feel for your website. This comprehensive guide will walk you through the features, installation, usage, and extensive customization options available with the LearnDash Course Grid add-on.

Note: The latest iteration of the Course Grid Add-on, Course Grid 2.0, brings even more features to the already vast possibilities of the original Course Grid Add-on.

This article will explain how to use it and walk you through all the available options for customizing your course grid.

Note: This add-on can also be used to display lessons, topics, or quizzes in a grid. Learn more »

Features

Before diving into the details, let’s take a look at what the course grid can and cannot do.

Installation

The Course Grid add-on can be installed through two methods: using the LearnDash Add-ons menu or by manually uploading the plugin file.

Add-ons Menu

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.

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.
5. Click Install Now.
6. Click Activate Plugin.

Note: Course Grid 2.0 is a direct upgrade to the original add-on, so you can upgrade your existing Course Grid via the WordPress Updates Dashboard.

Using the Course Grid

There are two primary methods to add a course grid to any page on your LearnDash site: using blocks or shortcodes.

Block

Blocks are available if you’re using the latest WordPress editor (Gutenberg).

1. Ensure the “LearnDash Course Grid” plugin is installed & activated.
2. Click the + icon to add a new block.
3. Search for “LearnDash Course Grid” & click on the block to insert it.
4. Adjust your settings in the Block options panel.

Shortcode

Use shortcodes for page builder plugins (Elementor, Beaver Builder, Divi) or the WordPress Classic Editor.

For Course Grid 1.0, use the shortcode:

[ld_course_list]

For Course Grid 2.0, use the shortcode:

[learndash_course_grid]

Course Grid 2.0 Shortcode Attributes

• Query Attributes:
  • post_type: any public and queryable registered post type. Default is sfwd-courses.
  • per_page: number of posts per page. Default is 9.
  • orderby: how the results are ordered by. Default is ID.
  • order: how the results are ordered. Accepts ASC (Ascending) or DESC (Descending). Default is DESC.
  • taxonomies: display posts by certain categories. Format: taxonomy1: term1, term2; taxonomy2: term1, term2;.
  • enrollment_status: accepts enrolled, not-enrolled, or empty value. Default is empty.
  • progress_status: accepts completed, in_progress, not_started, or empty value. Default is empty.
• Elements Attributes:
  • thumbnail: accepts true or empty. Default is true.
  • thumbnail_size: any registered image size. Default is thumbnail.
  • ribbon: accepts true or empty. Default is true.
  • content: accepts true or empty. Default is true.
  • title: accepts true or empty. Default is true.
  • title_clickable: accepts true or empty. Default is true.
  • description: accepts true or empty. Default is true.
  • description_char_max: accepts any positive number. Default is 120.
  • button: accepts true or empty. Default is true.
  • filter: accepts true or empty. Default is true.
  • pagination: accepts button or infinite. Default is button.
  • progress_bar: accepts true or empty. Default is empty.
  • meta: accepts true or empty. Default is true.
• Template Attributes:
  • skin: accepts skin key registered on the site. Default is grid.
  • card: accepts card key registered on the site. Default is grid-1.
  • columns: accepts positive numbers. Default is 3.
  • min_column_width: in pixels. Default is 250.
• Styles Attributes:
  • font_family_title, font_size_title, font_color_title, background_color_title
  • font_family_description, font_size_description, font_color_description, background_color_description
• Filter Attributes:
  • filter_search: accepts true or empty. Default is true.
  • filter_taxonomies: taxonomy slugs separated by commas. Default is category,post_tag.
  • filter_price: accepts true or empty. Default is true.
  • filter_price_min: accepts a positive number. Default is 0.
  • filter_price_max: accepts a positive number. Default is 1000.

Developers

You can also add the course grid shortcode to your theme files via the do_shortcode() function.

Customization Options

The Course Grid add-on offers a wide array of customization options to tailor the appearance and functionality of your grids.

Template

This set of options allows you to customize how your course grid is rendered and formatted on the page.

• Skin: Options include Grid, Masonry, List.
• Card: Choose between different pre-made layouts for each skin type.
• Columns: Customize the number of columns (default is 3).
• Min Column Width: Customize the minimum column width of each column. Default is 250px.

Query

Customize which post types and how many are shown on each page of the course grid.

• Post Type: Select various post types that can be displayed on the course grid.
• Posts Per Page: Indicate the number of posts displayed per page.
• Order By: Options include ID, Title, Published Date, Modified Date, Author, Menu Order.
• Order: Display cards in Ascending or Descending order.
• Taxonomies: Use ld_course_tag and ld_course_category taxonomies for filtering.
• Enrollment Status: Filter results by the user’s enrollment status.

Elements

Further customize your Course Grid by adding or removing elements such as the ribbon, title, etc.

• Thumbnail: Show or hide thumbnails.
• Featured Image: Set a featured image for your course.
• Ribbon: Display information in the top-corner of each course.
• Content: Customize elements like Total Students, Total Quizzes, Total Lessons, Title, Author, etc.
• Button: Include a CTA button.
• Pagination: Choose from Load More Button, Infinite Scrolling, or Disable.
• Progress Bar: Display a visual indicator of a student’s current progress in each course.
• Filter: Add filter options for your users.

Styles

Customize your Course Grid’s appearance by adjusting font and color settings.

• Equal Grid Height: Set the grid height to be equal.
• Heading: Customize font family, font size, font color, background color.
• Elements: Change colors of ribbon, icon, etc.

Filter

Enable and customize the filter option on your course grid.

• Search: Enable a search option in filter options.
• Taxonomies: Choose different taxonomies for filtering.
• Price: Set minimum and maximum prices for filtering courses.

Lessons, Topics & Quizzes

The Course Grid add-on can also display lessons, topics, and quizzes in a grid format. Most customization parameters apply, such as the number of columns, sorting & filtering, show/hide image and/or short description, video preview, and button text. However, some features like enrolled courses only, progress bar, and price ribbon do not apply.

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:

[ld_lesson_list course_id=”123″]

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:

[ld_topic_list course_id=”123″]

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:

[ld_quiz_list course_id=”123″]

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”]

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”]

Display Courses in 3 Columns with Search Filter
[ld_course_list col=”3″ search=”true”]

Display All Courses Sorted by ID in Descending Order
[ld_course_list orderby=”ID” order=”DESC”]

Display Only Completed Courses for Current User
[ld_course_list mycourses=”true” status=”completed”]

Display Courses in Specific Category with Progress Bar and Pagination
[ld_course_list course_cat=”10″ progress_bar=”true” pagination=”true”]

Display Courses with Custom Button Text and Video Preview
[ld_course_list button_text=”Learn More” video_preview=”true”]

Display Courses with Custom Ribbon Text and Hide Description
[ld_course_list ribbon_text=”New” show_content=”false”]

Display Courses with Specific Tag, Sorted by Title in Ascending Order
[ld_course_list course_tag=”math” orderby=”title” order=”ASC”]

Display Courses with a Minimum Price of $10 and Maximum Price of $100
[ld_course_list filter_price_min=”10″ filter_price_max=”100″]

Display Courses with Custom Font Size and Color for Title
[ld_course_list font_size_title=”20px” font_color_title=”#FF0000″]

Display All Courses with Infinite Scrolling Enabled
[ld_course_list pagination=”infinite”]

Display Courses Filtered by Taxonomy with Filter Search
[ld_course_list filter_taxonomies=”category,post_tag” filter_search=”true”]

Display Lessons from Specific Course with Custom Column Width
[ld_lesson_list course_id=”123″ min_column_width=”300″]

Display Topics with Custom Skin and Card Layout
[ld_topic_list skin=”masonry” card=”grid-2″]

Display Quizzes with Custom Background Color for Description
[ld_quiz_list background_color_description=”#EFEFEF”]

Display All Courses with Custom Background Color for Title and Equal Grid Height
[ld_course_list background_color_title=”#FFFFFF” equal_grid_height=”true”]

Display 6 Courses in 2 Columns with Category Dropdown Filter
[ld_course_list num=”6″ col=”2″ course_categoryselector=”true”]

Display Courses with Custom Icon Color and Background
[ld_course_list icon_color=”#0000FF” icon_background_color=”#FFFF00″]

Display Courses in 5 Columns with Custom Font Family for Title
[ld_course_list col=”5″ font_family_title=”Arial”]

Display Courses with Custom Ribbon Background Color
[ld_course_list ribbon_background_color=”#FF6600″]

Display Courses with Load More Button for Pagination
[ld_course_list pagination=”button”]