LearnDash Design & Tutorials

LearnDash Design & Tutorials

How to Use & Customize the LearnDash Course Grid

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

You’ve decided to use LearnDash for your LMS (great choice 👌). And you realized that the default courses archive page looks pretty terrible. But thankfully, you’ve discovered the LearnDash Course Grid add-on. And now you want to take it to the next level.

This post will cover many of the various ways you can customize the LearnDash course grid. There are around 20 different parameters you can use to make your course grid just right, along with various ways to improve your grid’s design. Follow along as I walk you through each one, along with code samples.

👇 jump right to the full list of grid options. 👇

Table of Contents

1. Install the Course Grid add-on

Make sure you have installed & activated the course grid add-on.

  1. Navigate to LearnDash LMS > Add-Ons
  2. The “LearnDash Course Grid” should be the first option
  3. Click Install, and then Activate
LearnDash course grid add-on plugin
Make sure you click “Install,” and then “Activate”

Now you are ready to use the [ld_course_list] shortcode to output a course grid.

2. Extra Course Grid Information

Once you’ve activated the course grid add-on, there are a few additional pieces of information you can add to each course. This info can be displayed when viewing your course grid.

  1. In your WordPress admin area, navigate to one of your courses
  2. Click “Edit”

Course Grid Short Description

The first option under “Courses” will be “Short Description.” This only appears when you have the Course Grid add-on active. It’s completely optional, but allows you to add a short description (just like an excerpt) to explain what the course is about.

LearnDash course grid short description field
Enter your course’s short description in this field

The only place this will be displayed is in the course grid.


If you scroll down to the bottom of the page, you’ll see a section for Course Grid Settings. Here you’ll find a few more options:

Additional LearnDash course grid settings
Additional course grid settings

Course Grid Video Preview

By default, the course grid will display the featured image you have set for your course. You have the option of showing a video instead.

First, you’ll need to check the Enable Video Preview.

Then, you’ll insert a link to your video in the Video URL or Embed Code box. Simply grab the URL from the address bar of the video you’d like to use.

For YouTube, it would look like this:

https://www.youtube.com/watch?v=XLCkDWc8iLI

For Vimeo:

https://vimeo.com/275112402

NOTE: Currently, course grid video supports YouTube, Vimeo, Wistia & native videos that you upload through the Media Library. It might also work with Spotlightr (formerly vooPlayer) & Amazon S3, but the official documentation is unclear.

Course Grid Button Text

Each course can have it’s own custom button text displayed in the course grid. Keep in mind, however, that if you add custom button text here, it will always be displayed in your grid, regardless of whether your student has completed the course, the course is free, etc.

Course Grid Ribbon Text

Just like the button text, if you add custom ribbon text in this field, it will be displayed in your course grid. Again, even if a student has completed the course, or you set the course as free, the custom ribbon text will always be displayed.


Simply leave these fields blank if you wish to use the default LearnDash language for your course grid buttons & ribbons.

3. Customize the Course Grid

Now let’s get into the fun stuff. Let’s talk about all the various options you have for customizing your LearnDash course grid.

Insert the Grid

Here’s what the basic shortcode looks like for inserting the course grid on your site:

[ld_course_list]

The default options for the course grid will display your courses in 3 columns, and include:

  • Featured image
  • Course title
  • Short description (if it exists)
  • Button
  • Ribbon

If that’s all you need, great. But we can do a lot more.

The following options are enabled by using parameters that modify the shortcode. You can combine as many parameters as you’d like in one shortcode.

Course Grid Columns

You can choose any number of columns from 1 to 7. Simply add col="4" to your shortcode. Change the “4” to the number of columns you’d like to display.

Now I’ll share a handful of CSS snippets that you can use to customize the course grid in various ways.

All of the following code should be placed in the Additional CSS area of the Customizer (Appearance > Customize).

BuddyBoss / Social Learner
Most of these snippets WILL NOT work with the BuddyBoss platform or theme. They customized the HTML output for the course grid, so the class & ID names are different. Sorry 🙁.

How to Center the Course Title

Center-align the course title in your grid using the following CSS:

.ld_course_grid .thumbnail .caption .entry-title {
	text-align: center;
}

Hide Course Title

If you made the course title part of your image, and want to hide the title, you can use this instead:

.ld_course_grid .thumbnail .caption .entry-title {
	display: none;
}

Adjust Font Size of Course Title

You can adjust the font size of the title in the LearnDash course grid using the following CSS:

.ld_course_grid .thumbnail .caption .entry-title {
	font-size: 20px;
}

NOTE: If you want to make multiple changes to the course title, you should combine them all into one declaration, like this:

.ld_course_grid .thumbnail .caption .entry-title {
	font-size: 20px;
text-align: center;
color: #000;
}

Adjust Font Size of Short Description

You can adjust the font size of the course grid description using the following CSS.

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
	font-size: 20px;
}

PRO TIP
We’ve got an entire article dedicated to short descriptions in the course grid →

Custom Background Color for Each Grid Item

.ld-course-list-items div.ld_course_grid .thumbnail.course, .ld_course_grid .thumbnail {
	background: #113263;
}

Custom Color for Course Title

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-title, .ld_course_grid .thumbnail .caption .entry-title {
	color: #fec300;
}

Custom Color for Short Description

You can also change the color of the course grid description.

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
	color: #000;
}

Custom Grid Button Colors

.ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary {
	background: #fff;
	color: #000;
}
.ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary:hover {
	background: #fec300;
	color: #000;
}

Change Color & Style of Ribbons

There are several different types of ribbons, and the code to style each type is a little different. For the styles I’m going to provide, see the code below for how to structure the CSS.

  • General Ribbons: a ribbon showing a price, or any ribbon that does not fall into one of the other categories. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price {
  • “Free” Ribbons: displayed on free courses that the user has not enrolled in yet. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.free {
  • “Enrolled” Ribbons: displayed if a logged-in user is enrolled in that course. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.ribbon-enrolled {
  • “Custom” Ribbons: displayed if you’ve provided a custom text label in the Course Grid settings of the admin. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.custom {

Now that you know which type of ribbon you need to target, here are some styles you can use for various effects.

NOTE
Everything that starts with /* and ends with */ is just for commenting purposes. When you add these examples to your CSS, you can omit those lines. Use as little or as much of these lines as you’d like, and feel free to add more of your own if you know CSS.

/* Change ribbon styles */
body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price {
	/* background color */
	background: #ffa500;
	/* text color */
	color: #000;
	/* add curved edges to inside of ribbon */
	border-radius: 0 5px 5px 0;
	/* remove text shadow */
	text-shadow: none;
	/* change font size */
	font-size: 18px;
	/* remove ribbon shadow */
	box-shadow: none;
}

/* Change color of the ribbon's shadow. Colors should match. */
body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price::before {
	border-top-color: #d68b02;
	border-right-color: #d68b02;
}

/* Remove ribbon shadow */
body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price::before {
	display: none;
}

Hide All Ribbons

This will hide every type of ribbon on the course grid. It could be updated slightly to target only “free” or “enrolled” ribbons. See the section above.

body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price {
	display: none;
}

LearnDash Course Grid FAQ

A handful of common questions & answers about the course grid.

Can I display groups in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_group_list]. There is also a Group List block.

There is no documentation on this yet so we’re not sure what options or parameters are available, if any. (updated July 30, 2020)

Can I display lessons in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_lesson_list course_id="123"]. Replace the course_id with your own.

There is also a Lesson List block.

Can I display topics in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_topic_list course_id="123"]. Replace the course_id with your own.

There is also a Topic List block.

Can I display quizzes in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_quiz_list].

There is also a Quiz List block.

Can I use course grid on more than one page?

Absolutely. Use it on as many pages as you’d like. You can use different parameters each time. Some examples include:

  • Show only courses that the user has registered for using [ld_course_list mycourses="true"] on an account page
  • Use it again on a custom course listing page with show_content="false" to just show an image gallery of courses
  • Create unique pages that show a grid only for courses in specific categories using category filters course_cat="10" or cat="12"

Can I use course grid multiple times on the same page?

Sure. There is no limit to the number of times it can be used on a page.

  • Use the category filters, and your own headers, to split your grid up into multiple sections, each with courses that belong to a different category
  • If you’re using a technique to show/hide content for logged in vs. logged out users, you can show logged in users their enrolled courses, and logged out users can see ALL courses.
  • …and many more creative ways I’m sure I’m leaving out

Course Grid Bonus Tips

Here are a few things I do to improve the look of my course grid.

  • Use the same exact image size for all featured images (course thumbnails)
  • Write consistent short descriptions that are all around the same length
[ld_course_list col="4"]

Show a Progress Bar

The progress bar is not shown by default. If enabled, it will be shown for current students only, and display a student’s progress in that course. To show the progress bar, add progress_bar="true" to your shortcode.

[ld_course_list progress_bar="true"]

Limit the Number of Courses Shown

You can specify exactly how many courses you want to be displayed in your grid. Use the num parameter. As far as I’m aware, there is no limit here. Any integer should work. If you have more courses than the number used, pagination will be shown at the bottom of your grid.

[ld_course_list num="12"]

Change the Order in Which Courses Appear (Sorting)

By default, your course grid will be ordered based on the date your courses were published. You can change this with a handful of different options. Use the orderby parameter to change your grid’s sort order.

[ld_course_list orderby="menu_order"]

orderby should be used in conjunction with the next option, order, to specify ascending or descending.

You can set orderby to any of the following options:

  • title – uses the course title
  • ID – uses the course ID
  • date – uses the original publish date
  • modified – uses the date the course was modified/updated
  • menu_order – uses the specified menu order that you provided
  • rand – displays your courses at random
  • …and several other, less used, options are available here

Course Order: Ascending or Descending

The order parameter will only take effect when used with the orderby parameter. order tells your grid whether to sort courses by ascending (lowest to highest) or descending (highest to lowest) values.

  • 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.

[ld_course_list orderby="title" order="ASC"]

Hide the Content

By default, your course grid will display the course title, a short description (if you’ve entered one), and a button that links to the course. You can hide all of these things, and just show the thumbnail, using the show_content parameter.

[ld_course_list show_content="false"]

Hide the Course Image/Thumbnail

By default, your grid will display the course thumbnail image. You can hide the image by using the show_thumbnail parameter.

[ld_course_list show_thumbnail="false"]

NOTE: Do not use both show_content="false" and show_thumbnail="false" as it will cause your course grid to display empty boxes with nothing inside.

Only Show Student’s Enrolled Courses

If you want to use the course grid on a student’s profile page, you can use the mycourses parameter to only display the courses that the current user is enrolled in.

[ld_course_list mycourses="true"]

You can also choose to show only those courses in which a student is NOT enrolled:

[ld_course_list mycourses="not-enrolled"]

Filter by LearnDash Category or Tag

LearnDash courses have their own built-in category & tag system, just like WordPress itself. If you use LearnDash categories & tags to further organize your courses, you can filter your course grid by using the following parameters:

  • course_cat="10" – Only show courses assigned to the category with ID of 10
  • course_category_name="math" – Only show courses whose category slug is math
  • course_tag_id="10" – Only show courses assigned to the tag with ID of 10
  • course_tag="math" – Only show courses whose tag slug is math

NOTE: You can only use one category or tag per shortcode. Using multiple categories/tags will not work. This is invalid: [ld_course_list course_cat="1,2"]. It will show courses in the first category, 1, and ignore the 2.

Add a Dropdown Menu Filter

You can allow the user to filter the course grid by adding a dropdown menu to the top of your grid.

To allow filtering by LearnDash categories…

[ld_course_list course_categoryselector="true"]

To allow filtering by WordPress categories…

[ld_course_list categoryselector="true"]

At this time, the dropdown menu filter only works for categories, not tags.

Filter by WordPress Category or Tag

This works in the same way as the LearnDash categories & tags, only the parameters are different:

  • cat="10" – Only show courses assigned to the category with ID of 10
  • category_name="math" – Only show courses whose category slug is math
  • tag_id="10" – Only show courses assigned to the tag with ID of 10
  • tag="math" – Only show courses whose tag slug is math

Complete List of Course Grid Options

Here’s a complete list of all the options available for the LearnDash course grid. You can use as many parameters as you’d like. Here’s an example of how to use multiple parameters with the [ld_course_list] shortcode:

[ld_course_list col="4" progress_bar="true" num="12" orderby="title" order="ASC"]
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, 7
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

4. Style Your LearnDash Course Grid

The default LearnDash course grid just doesn’t look that great. The rows are not all equal heights. The spacing is off. And if you use a theme that also uses the Bootstrap framework, your grid might look really wonky.

The best solution to fix all these issues, as well as bring an updated set of styles to your course grid, is to install the free Design Upgrade for LearnDash plugin. This will not only improve your course grid design, but all the other areas of LearnDash will benefit from improved styles.

Disclaimer: This plugin was developed by our team.

If you want even more design control over your LearnDash course grid, check out the pro version. In addition to 20+ specific course grid options, you’ll get over 80 more design options to customize the look & feel of other LearnDash elements on your site. Here’s a quick preview of the course grid features:

The Design Upgrade Pro for LearnDash plugin is great for…

  • custom border color & thickness
  • add a drop shadow to each course
  • add effects on hover
  • full-width course grid buttons
  • custom ribbon colors
  • improved progress bar

Now I’ll share a handful of CSS snippets that you can use to customize the course grid in various ways.

All of the following code should be placed in the Additional CSS area of the Customizer (Appearance > Customize).

BuddyBoss / Social Learner
Most of these snippets WILL NOT work with the BuddyBoss platform or theme. They customized the HTML output for the course grid, so the class & ID names are different. Sorry 🙁.

How to Center the Course Title

Center-align the course title in your grid using the following CSS:

.ld_course_grid .thumbnail .caption .entry-title {
	text-align: center;
}

Hide Course Title

If you made the course title part of your image, and want to hide the title, you can use this instead:

.ld_course_grid .thumbnail .caption .entry-title {
	display: none;
}

Adjust Font Size of Course Title

You can adjust the font size of the title in the LearnDash course grid using the following CSS:

.ld_course_grid .thumbnail .caption .entry-title {
	font-size: 20px;
}

NOTE: If you want to make multiple changes to the course title, you should combine them all into one declaration, like this:

.ld_course_grid .thumbnail .caption .entry-title {
	font-size: 20px;
text-align: center;
color: #000;
}

Adjust Font Size of Short Description

You can adjust the font size of the course grid description using the following CSS.

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
	font-size: 20px;
}

PRO TIP
We’ve got an entire article dedicated to short descriptions in the course grid →

Custom Background Color for Each Grid Item

.ld-course-list-items div.ld_course_grid .thumbnail.course, .ld_course_grid .thumbnail {
	background: #113263;
}

Custom Color for Course Title

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-title, .ld_course_grid .thumbnail .caption .entry-title {
	color: #fec300;
}

Custom Color for Short Description

You can also change the color of the course grid description.

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
	color: #000;
}

Custom Grid Button Colors

.ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary {
	background: #fff;
	color: #000;
}
.ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary:hover {
	background: #fec300;
	color: #000;
}

Change Color & Style of Ribbons

There are several different types of ribbons, and the code to style each type is a little different. For the styles I’m going to provide, see the code below for how to structure the CSS.

  • General Ribbons: a ribbon showing a price, or any ribbon that does not fall into one of the other categories. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price {
  • “Free” Ribbons: displayed on free courses that the user has not enrolled in yet. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.free {
  • “Enrolled” Ribbons: displayed if a logged-in user is enrolled in that course. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.ribbon-enrolled {
  • “Custom” Ribbons: displayed if you’ve provided a custom text label in the Course Grid settings of the admin. Use:
    body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.custom {

Now that you know which type of ribbon you need to target, here are some styles you can use for various effects.

NOTE
Everything that starts with /* and ends with */ is just for commenting purposes. When you add these examples to your CSS, you can omit those lines. Use as little or as much of these lines as you’d like, and feel free to add more of your own if you know CSS.

/* Change ribbon styles */
body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price {
	/* background color */
	background: #ffa500;
	/* text color */
	color: #000;
	/* add curved edges to inside of ribbon */
	border-radius: 0 5px 5px 0;
	/* remove text shadow */
	text-shadow: none;
	/* change font size */
	font-size: 18px;
	/* remove ribbon shadow */
	box-shadow: none;
}

/* Change color of the ribbon's shadow. Colors should match. */
body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price::before {
	border-top-color: #d68b02;
	border-right-color: #d68b02;
}

/* Remove ribbon shadow */
body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price::before {
	display: none;
}

Hide All Ribbons

This will hide every type of ribbon on the course grid. It could be updated slightly to target only “free” or “enrolled” ribbons. See the section above.

body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price {
	display: none;
}

LearnDash Course Grid FAQ

A handful of common questions & answers about the course grid.

Can I display groups in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_group_list]. There is also a Group List block.

There is no documentation on this yet so we’re not sure what options or parameters are available, if any. (updated July 30, 2020)

Can I display lessons in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_lesson_list course_id="123"]. Replace the course_id with your own.

There is also a Lesson List block.

Can I display topics in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_topic_list course_id="123"]. Replace the course_id with your own.

There is also a Topic List block.

Can I display quizzes in a grid?

Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_quiz_list].

There is also a Quiz List block.

Can I use course grid on more than one page?

Absolutely. Use it on as many pages as you’d like. You can use different parameters each time. Some examples include:

  • Show only courses that the user has registered for using [ld_course_list mycourses="true"] on an account page
  • Use it again on a custom course listing page with show_content="false" to just show an image gallery of courses
  • Create unique pages that show a grid only for courses in specific categories using category filters course_cat="10" or cat="12"

Can I use course grid multiple times on the same page?

Sure. There is no limit to the number of times it can be used on a page.

  • Use the category filters, and your own headers, to split your grid up into multiple sections, each with courses that belong to a different category
  • If you’re using a technique to show/hide content for logged in vs. logged out users, you can show logged in users their enrolled courses, and logged out users can see ALL courses.
  • …and many more creative ways I’m sure I’m leaving out

Course Grid Bonus Tips

Here are a few things I do to improve the look of my course grid.

  • Use the same exact image size for all featured images (course thumbnails)
  • Write consistent short descriptions that are all around the same length

Previous

Change Font Size in LearnDash Course Navigation Widget

Next

The Complete List of LearnDash Shortcodes and How to Use Them

128 Comments

  1. This shows how to add a custom field to a course (CEU) and add it as a ribbon on the top right. This adds both functionality and symmetry.

    • Thanks for sharing, Patrick. Nice work! I may write a separate article about CEUs and how to add them to a course, in which case I’ll be sure to reference this.

  2. Hi, is there a way to change the URL that the ‘see more’ button points to? May be using CSS.
    I’m using the xPro theme and have set up a custom course page. I’ve installed the course grid and all works fine except when I click on the button it takes me to the learndash course page and not my custom one.

    • Hi Moira — Unfortunately, I don’t think that’s possible. At least not that I’m aware of. And you can’t change links with CSS. CSS is for styling purposes only.

      If you want your buttons to link elsewhere, I’d recommend creating your own grid with a page builder, or something similar. The default LearnDash Course Grid add-on is somewhat limited in that regard.

    • Farooq

      Hi Moria,

      You can add below snippet to your active theme functions.php file to change the button URLs for the grid layout.

      /**
      * Update grid course URLs
      */
      function change_course_grid_urls( $button_link, $post_id ) {
      $button_link = dynamic_url( $post_id );
      return $button_link;
      }
      add_action( ‘learndash_course_grid_custom_button_link’, ‘change_course_grid_urls’, 10, 2 );

      Note: dynamic_url is not a function, Please replace this with your course URLs. $post_id (course id) will help you to get the dynamic URLs for courses.

    • Aly

      Hi @Farooq,

      Thank you for your help. Is there a way to have the dynamic_URL point to a field in the Course Grid settings that i can add, so that i can just update the URL for that course through the Course Grid Settings section under the Course Page.

      Basically a way to allow me to add the URL link in each Course Page so that when the user click on the course in the course grid he is redirected to my selling page before seeing the actual course contents.

      Thank you again
      Aly

    • Aly, you might be able to use Farooq’s code but insert an IF statement to look at individual courses. It gets a bit messy if you have a lot of courses, but it could be a workaround for now.

      See here for an example of how to use an IF statement inside of a function. “Example 2”

    • Farooq Abdullah

      Hi Moira,

      LearnDash course grid doesn’t provide any action hook to add field to the course grid setting. However, you can create your own field (where you will be adding course custom URLS) using “add_meta_boxes” action hook.

      Use below snippet that will add a new meta field in the course setting section to add the custom URL.

      /**
      * Add course custom URL settings meta box
      */
      function learndash_course_custom_url_add_meta_box() {
      add_meta_box( ‘learndash-course-custom-url’, __( ‘Course Custom URL’, ‘learndash’ ), ‘learndash_course_custom_url_output_meta_box’, array( ‘sfwd-courses’, ‘sfwd-lessons’, ‘sfwd-topic’, ‘sfwd-quiz’ ), ‘advanced’, ‘low’, array() );
      }
      add_action( ‘add_meta_boxes’, ‘learndash_course_custom_url_add_meta_box’ );

      /**
      * Output course custom URL settings meta box
      *
      * @param array $args List or args passed on callback function
      */
      function learndash_course_custom_url_output_meta_box( $args ) {
      $post_id = get_the_ID();
      $post = get_post( $post_id );

      $course_grid_custom_url = get_post_meta( $post_id, ‘_course_grid_custom_url’, true );
      if ( ‘sfwd-courses’ === $post->post_type ) {
      ?>

      <input type="text" name="course_grid_custom_url" value="”>

      post_type, array( ‘sfwd-courses’, ‘sfwd-lessons’, ‘sfwd-topic’, ‘sfwd-quiz’ ) ) ) {
      return;
      }

      if ( wp_is_post_revision( $post_id ) ) {
      return;
      }

      if ( ! isset( $_POST[‘course_grid_custom_url’] ) ) {
      return;
      }

      update_post_meta( $post_id, ‘_course_grid_custom_url’, esc_url( $_POST[‘course_grid_custom_url’] ) );
      }
      add_action( ‘save_post’, ‘learndash_course_custom_url_save_meta_box’, 10, 3 );

      Then replace this with my previous code:
      /**
      * Update grid course URLs
      */
      function change_course_grid_urls( $button_link, $post_id ) {
      $button_link = get_post_meta( $post_id, ‘_course_grid_custom_url’, true );
      return $button_link;
      }
      add_action( ‘learndash_course_grid_custom_button_link’, ‘change_course_grid_urls’, 10, 2 );

  3. Fermin June Alegro III

    Can we have a global settings for the course grid button to change the “See More…” text? And it will only be different when someone places a different text inside the course itself.

    • Hi Fermin. Unfortunately, I don’t know of any way to set that globally. It can only be changed within each course.

      Technically, you could modify the code in the course grid plugin itself, but I do not recommend that.

      Your other option is to use a page builder and create a custom grid of your own. These give you a lot more flexibility.

  4. I chose a different theme instead of generate press. Now my grid doesn’t work anymore. Is there some specific CSS styling that is missing, and can i add this to my own yootheme template?

    • Hi Sandra — There are some known issues with the course grid. Because the grid uses Bootstrap (a CSS framework), themes that also use Bootstrap can cause some issues.

      Is this page the course grid you are referring to? What are you seeing as the issue? It looks like the standard course grid layout to me.

    • yes indeed that page. I think it was someting with caching, because it’s look alright now.

  5. Mike

    It annoys me that the course title is not clickable – I feel like the entire container for each course should be clickable. Do you know a way to make that happen?

    • I completely agree, Mike.

      Unfortunately, this would require a change in how the HTML code is structured, which requires a lot more work than simply applying some CSS. You’d have to go into the template file of the plugin and update the HTML in there, but it’s not best practice to update code in a plugin, and it will be overwritten the next time the Course Grid plugin is updated by LearnDash.

      You could search for a JavaScript solution. It’s not the ideal way to do it, but it could work. JavaScript would target the entire container, and you could make it clickable that way. Perhaps start here.

  6. Patrick

    You can easily do this by overriding the course grid template file and it will not be wiped out by an upgrade to the plugin. From time to time you should look at your override and compare it with the master in the plugin but that is true with all template overriding which is a key and powerful feature used in all plugins.

    • Hey Patrick — Thanks for chiming in here. I’ve seen your video on overriding the template files. I’ve used the same technique for many of my template files as well.

      For the course grid, are you suggesting making a copy of the /templates/course_list_template.php file in the main LearnDash plugin, and overriding it? My concern with this technique is what would happen if someone overwrote this template file, but then deactivated the course grid. Because the course grid outputs different elements than the standard [ld_course_list], I worry this could throw an error. Have you tested this?

      Or is there a different template file you copy from the course grid add-on plugin itself?

  7. Kate

    What is the correct size of the featured image to upload?

    • Hi Kate — There is no set rule on the size for the featured image. It depends what you want it to look like, and how many columns you’re using. Typically, I recommend one of two options:

      • square (1:1 ratio)
      • 16:9 landscape

      If you’re also displaying the featured image on the course page itself, you’ll likely want to go with the 16:9 landscape size. You can use this ratio calculator to figure out the exact dimensions that would work best with your theme. See how large your parent container is, enter that for the width, and do a 16:9 ratio.

      If you’re just using the featured image for the grid, you could use a square. I wouldn’t go any larger than about 500x500px. You likely won’t need them that big, and the smaller you keep them, the faster your site will load.

  8. Steve Andrews

    Is there a way to display a greyed out version of the course image if somebody is not enrolled in a course.

    I.E. You are enrolled in the course the course image on the grid is colored, you are not enrolled in the course the image is greyed out.

    • Unfortunately, I don’t know how to do that at this time, Steve. LearnDash doesn’t add any indicators of whether or not the person is enrolled in the course, so there’s nothing for me to target with CSS.

      I do have some plans for an upcoming release of my Design Upgrade plugin, and I’m going to look into a way to achieve this. You’re not the first one who has asked.

  9. Jerome

    I’m using the learndash course category as a level indicator for my courses (beginner, intermediate, advanced..). I would like to show this course category below the course title in the grid display. Is it possible to do it ? Should I modify some code ?

    • Hi Jerome,

      Good question. That is certainly possible, but you’ll need to edit some code to do it. I’ve never done it personally, but the process would look like this:

      1. Copy course_list_template.php from /plugins/sfwd-lms/ to a child theme, in a /learndash/ folder
      2. Copy the code from course_list_template.php that is within the /plugins/learndash-course-grid/
      3. Paste code from step 2 into the course_list_template.php that is in your /themes/childtheme/learndash/ folder.
      4. Write a custom WP_Query to retrieve the LD course category title for each post
      5. echo that into the course_list_template.php file where you want it to appear

      You would also have to ensure you always kept the course grid plugin active, otherwise you’ll probably run into issues.

  10. Renato

    How can I delete the word “Courses” from “Course Categories” and “Select Course Categories” in the category list filter on LearnDash Grid?

    • Hi Renato. Depending on what other information you have on your site, one option could be to use the WordPress categories instead of the LearnDash categories. I think if you use the WP categories, the dropdown filter will just say “Select Categories.” But that would mean sharing categories with your blog posts, if you have them. But if you’re not blogging and only using courses, this could be a viable option.

      Aside from that, there’s no real easy way to do it. You could try the Say What plugin, and replace the entire phrase, but be careful with that, as it could replace other references to that phrase in other areas of your site. But it could be another option for you.

      The only other way is to hack/edit the plugin files, which I would not recommend doing.

  11. Sebastien

    I’ve scrolled all the way down the comment section, not to ask a question. But just to show my appreciation. So thank you, for running this blog and helping all of us Learndash users completing our site! Please keep it up, for the sake of all us developers and entrepeneurs. Have a good one, cheers.

    • Hi Sebastien — I really appreciate that you took the time to leave a comment, just to share some kind words 🙂. That means a lot.

      I certainly plan on continuing to share tips & insights about LearnDash on this site. I’m finishing up a big project right now, and LearnDash 3.0 will also be released soon. Once 3.0 comes out, I’ll try to post as much info as I can to help you out. Cheers!

  12. Tina

    I have created 4 courses but only 3 show up on the home page. I have installed Design Upgrade for Learndash but it still only shows 3 courses even though I have the CSS as: [ld_course_list col=”2″ num=”4″ order=”ASC”]
    I also tried by putting a tag on each course to be health then using the following:
    [ld_course_list col=”2″ num=”4″ order=”ASC” tag_id=”health”]

    The home page still shows only 3 courses. Any ideas?

    • Hi Tina,

      The first code you shared is correct, and the default behavior should show 4 courses (I just confirmed on a test site). Are you using any membership or ecommerce plugin? Sometimes those can restrict access and might be a reason for 1 course not being displayed.

      Also, have you confirmed that all 4 courses are set to “Published?” Make sure none of them are in draft mode.

      The 2nd code you supplied shouldn’t work at all, actually, because tag_id requires the actual ID, which is a number. You would need to use either tag="health" or course_tag="health", depending on whether you’re using WordPress tags or LearnDash tags, respectively.

      If you’re still having issues, you can email [email protected] with access to your site, and I can take a quick look to see if I can figure out what’s going on.

  13. Riz

    Hi, I created a child plugin by following above mentioned steps
    1. Copy course_list_template.php from /plugins/sfwd-lms/ to a child theme, in a /learndash/ folder
    2. Copy the code from course_list_template.php that is within the /plugins/learndash-course-grid/
    3. Paste code from step 2 into the course_list_template.php that is in your /themes/childtheme/learndash/ folder.
    but editings does not reflect to theme. Whats the problem? thanks

    • That worked for the “Legacy” template, but if you’re using LD3 and the new LearnDash 3.0 active template, that method of overriding template files doesn’t work anymore.

  14. Riz

    I am using “Legacy” template and LearnDash Version 3.0.5.1

  15. Raphael

    Hey,

    is it possible to sort courses by a specific order of post ids:

    110, 947, 456, …

    thanks a lot!

    • Yes. To sort by the smallest course ID first, all the way to the largest course ID last (ex: 1, 2, 3…):

      [ld_course_list orderby="ID" order="ASC"]

      To sort by the largest course ID first, all the way to the smallest (ex: 3, 2, 1…):

      [ld_course_list orderby="ID" order="DESC"]

      Your course IDs should continue to increase as you create new courses. So the first course you created should have the lowest number. The second course will have a number higher than the first. The third will be higher than the second. And so on.

  16. Raphael

    Thanks a lot for your answer. Is there no way to sort them according to self-chosen sequence?

    • To use a custom order, you can use the menu_order parameter.

      [ld_course_list orderby="menu_order" order="ASC"]

      And then go to your All Courses page, click on “Quick Edit” for each course, and adjust the “Order” value (see screenshot). If you leave order="ASC" then 0 will appear first, 1 will appear second, 2 third, and so on.

  17. Jomar

    Hi,

    I’m trying to show both enrolled courses and not enrolled courses at the same page. I’ve created a wordpress content and pasted this shortcode and it’s working:
    [ld_course_list order=’ASC’ mycourses=’true’]

    but when I add the code for unenrolled, it’s not showing up. Here are the shortcodes I’ve tried:
    [ld_course_list order=’ASC’ mycourses=’true’]
    [ld_course_list order=’ASC’ mycourses=’not-enrolled’]
    Also tried:
    [ld_course_list order=’ASC’ mycourses=’true’ mycourses=’not-enrolled’]

    I’m using Thrive Architect to edit.

    I also tried creating 2 wordpress content block:
    1st block has code: [ld_course_list order=’ASC’ mycourses=’true’]
    2nd block has code: [ld_course_list order=’ASC’ mycourses=’not-enrolled’]

    Not sure why I can’t show the “not enrolled courses”. I also tried changing the quotation marks from ‘ to ” and it never worked. I hope you can help me.

    • Hi Jomar — I’m not sure what’s going on. Your code looks correct to me. From everything I can tell, it should be working.

      Single vs. double quotes shouldn’t matter, as long as you use them consistently (don’t mix single and double quotes in the same shortcode).

      Your best bet is to reach out to LearnDash support and see if they can help you. There could be some limitation that only allows you to use the mycourses parameter once per page.

  18. Christina

    How can I show one grid with only incomplete courses and another grid with completed courses?

  19. Hey, Can you please guide me for how can I add the snippet in my website? I am not able to add the snippet. Please help me.

    • Mark — If you’re trying to add the course grid to your site…

      1. First, make sure you have the LearnDash Course Grid plugin installed & activated
      2. Then, add this code to your page where you want it to appear: [ld_course_list]

      You can then use any of the parameters I explain on this page to customize the course grid.

  20. riger

    How do I turn the pagination off for ONLY one use of the ld_course_list shortcode. I have a page that needs to ONLY display three courses (without the pagination being displayed underneath). Pagination (of course, should display on any other pages (except for the one mentioned here).

    Does anyone have any idea about that; how?

    Thanks!

    • This should help…

      If you are using Elementor, in the “Shortcode Widget”, add your ld_course_list shortcode and options. Then (stay in the “Edit Shortcode” window), and select the “Advanced” option. Scroll to the bottom, select “Custom CSS”. Enter the following:

      .learndash-pager {display:none;}
      .learndash-pager-course_list {display:none;}

      The pagination will no longer display in that (shortcode) widget, and will work elsewhere.

      For those using the Divi page builder, the process is very similar (simply add the above CSS to the custom CSS of the added element).

      I hope this helps someone out!

    • Thanks Roger! Great suggestions. If you’re using either of those page builders, I would recommend Roger’s code 👍.

      If not, you can achieve something similar by using the class name of the specific page that the [ld_course_list] is on.

      1. Inspect the page, or view the source
      2. Look at the <body> tag for the class name. It should be something like page-id-123.
      3. Use the code that Roger provided, but add the page ID class to the beginning of it.
        .page-id-123 .learndash-pager { display: none; }
        .page-id-123 .learndash-pager-course_list { display: none; }
  21. Unfortunately, the shortcode to display not enroll courses for a student is not functioning

    [ld_course_list mycourses=”not-enrolled”]

    Any Thoughts?

    • I just tested it and it’s working for me.

      When you’re testing it, are you testing it logged in as a student who doesn’t have access to some courses? LearnDash has a setting that gives administrators access to everything, so admins will see all courses.

      When you say it’s “not functioning,” what does that mean? No courses are there? Some courses show but not the ones you expect?

  22. Vegard Øksnevad

    Hi! I am working on a Learndash project in Norway (where I live). I use the “Stripe Learndash integration” and prices is set to our local currency (Norwegian krone -NOK). When I click in to a course the price shows correct in NOK. But the price ribbon on the course grid shows the same amount in US Dollars. Is there a way to set up the course grid to show the correct local currency?

    • I’m not sure. I know others have had issues with currency signs.

      You can try adding the NOK symbol to the price field itself.

    • Rasmus

      Hi Vegard,

      Did you find a solution to the currency issue?

  23. Adil

    Hello everyone,

    need your help please
    how can i get a lesson id that i clicked on course_content on my next dynamic lesson page ?
    how can i get the lesson title ? shortcode ?
    how can i get the description course content ? shortcode ?

    thank you very much,
    Ad

    • Hi Ad,

      I’m sorry, but I just don’t understand your questions. Are you just trying to find out what the ID of a certain lesson is?

      Where are you trying to display the lesson title? And what are you referring to when you say “description course content.” I don’t know what that means.

      If you can send a video or some annotated screenshots, I might be able to help further. Thanks.

    • Adil

      here we are, my video record
      https://www.loom.com/share/d85be673a71a4ba182f56363478d0ad3

      thank you very much

    • Hi Ad — Thanks for providing the video.

      1. By default, there is no course description. LearnDash does not provide a separate field to enter a description for the course page, and no themes display a course description.

      The content you add to the course in the main content area, it will appear below the progress bar and above the course content list.

      2. That course content list DOES show all your lessons. Some topics are hidden by default, but can be shown by clicking the down arrow to open them.

      3. If you want to use dynamic pages that you built in Divi, you need to turn off Focus Mode in LearnDash LMS > Settings. Focus Mode will override all special templates and stuff from your theme.

      Once focus mode is off, you can apply custom builder templates to your course and lesson pages.

      4. To show the course content (aka: list of lessons), you can use [course_content course_id="123"]. Change 123 to the ID of your course.

      What you showed there at the end, I think you meant to say you used [ld_lesson_list], not [ld_course_list].

    • Adil

      thank you very much dave for your quick response,
      i think i will keep a focus mode, as i saw it will be very complicated or hard to get the content of lesson that i was clicked on on the new dynamic template.

      the shortcode available in learndash didnt allow this, i think we can do it thow css and php programming.

      i would like to buy your plugins for 5 sites, is there any promo code available,

      thank you very much,
      Adil

    • Just sent you a private email 🙂.

  24. Hello,

    I have a question that can solve some of my problem please.

    I try to use the short code [ld_course_list course_categoryselector=”true”] to show a Dropdown Menu Filter in my grid course.

    And its work but I see only the dropdown with my categories but not with my tags.

    I tried to use the WordPress categories and tags with the second version of the shortcode ([ld_course_list categoryselector=”true”] ) but it’s the same problem.

    I can read in your page that this shortcode must display “categories & tags” in the dropdown menu. Is it a mistake ? If yes, do you have a solution for me please ?

    It there is a mistake in this website, do you have a solution for display dropdown with tags ?

    Thanks

    • Ben — That was a typo in the article. I mistakenly said “categories & tags” when I should have just said “categories.”

      I’ve updated it now to only say “categories.” My apologies.

      The dropdown filter only works with categories.

  25. Hi need to change mail due to wordpress

    • 🤔 Whaaaaa? Sorry but I have no idea what you’re talking about, or asking me. This doesn’t even sound like it’s related to LearnDash.

      Perhaps check a more general WordPress blog.

  26. Hi Dave
    Reply to your post of 20 May, my original post I do not see on the timelime. Query essentially using the plugin aligning the heights in the course grid. On my home page, I have 4 course grids. 3 have all aligned but the 4th one is not the same height. Any suggestions. Thank you in advance.

    • The height of each item in the grid will change based on the length of the course title, as well as the length of any short description you may have added.

      My free Design Upgrade plugin makes all items the same height, so you could try that. Or just make sure all the titles & descriptions are of similar lengths. Or write some of your own custom CSS to use flexbox for the grid items and make them equal height yourself.

  27. I’m trying to figure out how to format the course as a list (not grid) with the thumbnail showing to the left of the course title, not above. Do you know if this is possible??

    • Yes, but you would need to edit the LearnDash template files. This requires some knowledge of HTML/PHP, as well as using a WordPress function to get the featured image. This article shows you how to edit LearnDash template files, and the rest you’ll need to figure out.

  28. Jon Price

    Hi Dave, found all the information really helpful but just struggling with one issue I have used the shortcode:
    [ld_course_list mycourses=”true”] but it seems to get rid of the course title and Im not sure how to resolve this ?

    The other course grid set ups I have on other pages don’t have this issue.. ay guidance would be great

    Kind regards

    • That’s very strange, Jon. That is not normal behavior. It’s possible there is some CSS somewhere else that is conflicting. Can you post a link to your page with the grid? Or send me an email if you need to provide access (behind a login)? [email protected]

  29. Jon Price

    Thanks Dave, I have sent you an email

  30. Emeraude

    Hello,

    I would like to know if there is a way to add a shortcode instead of the price in the ribbon (to convert price currencies). Do you have an idea how to do this?

    Or to replace the price with an ACF field?

    Thanks a lot

    • Hi Emeraude — Unfortunately, both of those things would require custom development. LearnDash does provide a way to add custom ribbon text, but it’s a simple text field. You cannot add shortcodes to it.

      It’s on the course edit screen, on the Settings tab, at the bottom under Course Grid Settings.

  31. morr

    Hey! Is there a way to change the size of the thumbnail image using css?

    • For the course grid images?

      Technically, yes, but I would not recommend it. They are already designed to fill the full width of the container they are in, and then the height is set proportionally, as not to skew the aspect ratio. As soon as you mess with the width or height of the image with CSS, the aspect ratio could get distorted, unless you do precise mathematically calculations.

      Here’s the CSS. You can use only width, only height, or both. But again, I don’t recommend it.

      .ld-course-list-items .ld_course_grid .thumbnail.course img {
          width: 100px;
          height: 100px;
      }
  32. Morr

    Well currently my featured images are cropped for some reason, that’s why I thought about changing their sizes, but that doesn’t work either.
    You can see what I mean here:
    https://www.bloopanimation.com/aaa-homepage-test/

    Any thoughts?

    • That page doesn’t have the LearnDash course grid on it. Did you remove it? Is there a different page I should be looking at?

  33. Morr

    Yeah sorry, here it is:
    https://www.bloopanimation.com/aaa-homepage-test/

    But I fixed the thumbnail issue, my other issue was customizing the progress bar (color of the fill as well as the empty part of it). How do I target it with CSS?

    Also, you’ll notice that the bottom of each grid item is too long, is there a way to change that padding under the progress bar?!
    Thanks a lot!

    • The progress bar background is being changed to white (#fff) by what I think is custom CSS. It’s hard to tell since you are combining & caching a lot of your CSS. See this screenshot for the code that’s causing it.

      Also, it looks like you’re using our plugin, Design Upgrade Pro. If so, you can customize the progress bar colors from Appearance > Customize.

      For the spacing under the progress bar, you can remove it using this CSS:

      .thumbnail.course .learndash-wrapper .ld-progress {
          margin-bottom: 0;
      }
      
      .ld-course-list-items .ld_course_grid .thumbnail .caption p:last-of-type {
          margin: 0 !important;
      }
  34. Ankush

    Hi is it possible to only show the parent category of the lesson with this –
    [ld_course_list course_categoryselector=”true”]

    I changed course to lesson and it is letting me filter by Category, but we have lots of child categories so we want to only display the available parent category.

    If not, do you know any plugin which can help with more advanced filtration features?

    • I’m almost certain that the filter does not respect hierarchy and parent-child relationships. It just shows all categories in a flat structure.

      I’m not aware of any plugin that does what you’re looking for.

  35. Hello Dave, I got the ‘Design Upgrade Pro for LearnDash’ and I was able to improve the look of my courses. Great plugin!

    Now I am trying to adjust the font size of the course title by entering the following CSS code you provided in this post:

    .ld_course_grid .thumbnail .caption .entry-title {
    font-size: 20px;
    }

    in the Customizer (Appearance > Customize).

    1. I tried changing the number of pixels but nothing happens.
    2. I tried the other CSS codes for changing the color and alignment and they work perfectly fine.
    3. I also tried (in every place possible) to fix this but nothing.

    Is there a solution for this?
    Any idea(s) on how this can be fixed?

    Thanks in advance!

    • You’re using the Astra theme so you need to be a little more specific with the CSS. Add this in the “Additional CSS” area of the Customizer:

      #ld_course_list .ast-article-single .entry-title, .ld_course_grid .ast-article-single .entry-title {
          font-size: 20px;
      }

      That should do it.

  36. Ruben

    Thank you very much Dave! Now everything looks perfect!

  37. Alan Thorp

    Hi Dave,

    I’ve been trying to get the button on my course grid to center align for the past 2 hrs.

    I hacked together this code from looking through a few websites including yours:

    .ld_course_grid .thumbnail .caption .entry-title {
    text-align: center;
    }
    .ld_course_grid .thumbnail.course a.btn-primary,
    .ld_course_grid .thumbnail.course a.btn-primary:hover,
    .ld_course_grid .thumbnail.course a.btn-primary:active,
    .ld_course_grid .thumbnail.course a.btn-primary:focus {
    display: inline-block;
    background-color: #f4511e;
    Color: #fff;
    border: none;
    border-radius: 10px;
    width: 200px;
    height: 30px;
    margin: 10px;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    padding-top: 11px;
    }

    I don’t know anything about code but for some reason, the course grid button was pushing over the border of the grid as soon as I added the shortcode to a page.

    I got that code together and it has improved the design, but on some screen sizes it looks a bit off in terms of alignment.

    Theres probably a simple fix for someone like you, but I’m lost at this point 🙁

    Anyway you could take a look please?

    Keep up the good work on the site. I’m loving all of the tutorials 🙂

    • Hi Alan — The code should be much simpler than that. Please send me a link to the page with your grid and I’ll have a look. Could you remove all that code so I can see the original issue?

      I’m out of town for 2-3 days but will have a look when I return.

      [email protected]

  38. Alan Thorp

    Thanks Dave, I just sent you an email 🙂

  39. Alan Thorp

    For anyone that might have similar issues to what I was having, Learndash support gave me this code and it worked perfectly to fix the button issues I was having.

    body .ld-course-list-items div.ld_course_grid .thumbnail.course a.btn, body .ld_course_grid .thumbnail a.btn, #et-boc .ld_course_grid .thumbnail a.btn, .entry-content div.ld_course_grid .thumbnail a.btn {
    width: auto;
    display: block;
    }

    • Glad you got it figured out 👍.

      In case anyone is curious about the specifics, LearnDash’s course grid plugin adds width:100% to the button. My plugin adds more padding to the button. In my opinion, LearnDash’s padding is not sufficient nor cross-theme compatible.

      Typically, most elements on your site would be using box-sizing:border-box, which adds up BOTH borders and padding into calculating the total width. But border-box is not applied to this element, therefore having 100% width PLUS some additional padding makes the button larger than 100% of the containing area, making it cut off.

      Instead of the above code, you could have also just added box-sizing:border-box; and it would have fixed it.

  40. Alan Thorp

    Thanks very much Dave.

    To think that little line of code could of saved me a 3hr headache 😂.

    Hope it helps someone else in the future.

    Have a great day.

  41. Patrick F Kellogg

    this is not a complete guide

    • Everything is a work in progress, Patrick.

      What would you suggest I add to make it more complete?

  42. There is so much that can be done with template overriding the course grid: Now you easily customize the LearnDash Course Grid “on the fly” with ceu’s, pdh’s, instructor, national flag, two ribbons, change the button link and even change the button label if viewer is enrolled in the course or not. Also did you mention about changing the button link with the ‘learndash_course_grid_custom_button_link’ filter depending if the user is logged in or not ? The possibilities are endless. Thanks again, I appreciate your hard work and nice place to find stuff. https://elearningcomplete.com/course-grid-customizer/

  43. Kim

    Wonderful. This and your Short Description styling guide has been really helpful, thank you.

  44. i suggest highly because its a work in progress you rename your description to the “Incomplete Complete Guide ….” because claiming to be complete while leaving out the most important half is extremely misleading.

    • Patrick,

      Do you tell the hundreds of thousands of website owners that what they call complete guides are not actually complete? There might literally be millions of incomplete “complete guides” out there.

      1. I was only using that language in search engine result pages, and nowhere in the article itself did I ever claim it to be a complete guide.

      2. “Incomplete Complete Guide” doesn’t make any sense.

      3. For 95% (or more) of LearnDash users, overriding template files and/or using hooks is out of the question. It’s far too technical for them, and they’ll end up breaking their site. This article serves the 95%. It’s not for developers.

      4. With that being said, please direct me to a more complete guide on the LearnDash course grid. If one exists, I’ll consider changing this article’s title to something more appropriate in your eyes.

      “…while leaving out the most important half…”
      5a. What is the most important half?
      5b. “most important” is as subjective as it gets, and you are not the one who gets to decide this. The user decides what’s most important to them.

      6. If you want to promote your plugin, I’d be happy to try it out. If I think it provides value, and others say good things about it, I’ll happily include it as part of this article.

      But you aren’t selling it yet. No one can use it. And no one has seen how it works.

      7. On a similar note, if you want to publish free content on “the most important half” that I left out of this article, I’d be happy to link over to it.

  45. the half you are missing is accomplished by template overriding the course grid. you talk about it often when it comes to lessons, courses and topics but not when it comes to customizing the course grid. i find this strangely inconsistent.

    • There are several reasons why I don’t talk about template overriding the course grid. I’d be happy to explain them so it no longer appears strange or inconsistent.

      1. As previously stated, this article doesn’t mention it because it’s geared towards the majority of LearnDash users who are not developers. In my opinion, template overriding should only be done by developers.

      2. The course grid requires an add-on. It’s not part of LearnDash core.

      3. Along the lines of #2, if you override the /shortcodes/course_list_template.php in LearnDash core, include aspects from the course grid add-on in your override, and then deactivate the course grid add-on, I suspect you will run into issues, if not flat out errors, because LearnDash core would be trying to access fields & data from an add-on that is no longer active. (I haven’t tested this, but if you have and have information to the contrary, please share)

      4. Along the lines of #2 and #3, in order to override the course grid, you need to override the entire [ld_course_list] shortcode. This means that it will forever be mandatory to display your courses in a grid format, or with whatever customizations you have made. But what if someone wants to display their courses in a list, or some other format? They lose this ability.

      5. If one were to override the course grid template, it’s confusing. The course grid add-on uses a file called /shortcodes/course_list_template.php to output the grid’s HTML. In LearnDash core, there is a /shortcodes/course_list_template.php file (same exact name), but it has drastically different HTML. It appears to be the HTML output of a course page, not a grid.

      As one digs deeper, they might find the /shortcodes/course-listing.php template file. This file has some of the course grid output (category dropdown, parent divs, etc.), but then calls in a course_list_template template file.

      I’d love to know how many people DON’T find this confusing. If anyone (besides Patrick) has overridden the course grid template, I’d love to hear about your experience, and see what you’ve created.

  46. fair enough., at least people now who read this page will know it exists so i will consider this article complete. thanks for the offer. perhaps later i will take you up on it.

  47. ali

    Hi Dave,

    Firstly thank you so much for this post, your work is greatly appreciated 🙂

    Can I ask if it is possible to align the course in the centre of the page rather than on left as I only have 1 course?

    Also is there a way to hide the complete bar under courses?

    Thank you

    • You’re welcome. Glad you find it useful.

      Aligning a single course in the center is probably going to require some custom CSS. I’d recommend you set the column parameter to 1 (col="1"), and then use CSS to limit it’s width and center it.

      You can remove the progress bar by using the progress_bar parameter: progress_bar="false"

      Those options are outlined in the official LearnDash docs.

  48. Thanks for the reply Dave,

    When i paste “[ld_course_list progress_bar=”false”]”
    in customize>additional css nothing changes?

    • [ld_course_list progress_bar="false"] is not CSS. It doesn’t go in the Customize > Additional CSS area. It goes on the actual page where you want the course grid to show up.

  49. ah right, no wonder ahaha

  50. Adewale

    Thanks Dave for this article. I find it pretty useful but I am working on a project currently and the client does not want the default learndash listing for the lessons, would prefer to have a thumbnail, lesson title and a little description for each lesson item.

    How best can I achieve this?

    • Two options:

      1. Hide the default course content list with CSS. Then use the [ld_lesson_list course_id="123"] shortcode to add your own lesson list, and use the Course Grid add-on. This will display your lessons in a grid format, with featured image and an optional short description (if you’ve added it to the lesson page).

      2. Use the Visual Customizer plugin by Snap Orbital.

    • Adewale

      Thanks Dave for being really helpful. This implies I have to create course pages individually, am I right? Or is there a way to still use a single course page to output lessons for each course I have on the platform?

    • Individual course pages are created automatically by LearnDash, each time you create a course in the backend of WordPress. Most people prefer to send users to those pages to find lessons, but you don’t have to. You could create your own custom page and output the lessons for ALL courses. I think you can use [ld_lesson_list] (without any course ID) and it will display ALL lessons. Or you can use it multiple times on the same page, each with a unique course ID. It’s up to you.

  51. Tom

    Hiya,

    I’m sure I’m just not doing something obvious here but I don’t have the option for LearnDash in the Customizer panel, any ideas?

    Thanks,

    Tom

  52. SP

    Hi Dave, great tutorial! I have a grid with 3 columns but depending on the courses the user is enrolled in somethimes there are only 1 or 2 courses in a row. Is there a way to put the courses to the middle of the row rather than allign them to the left side?

    • Technically, probably. It would most likely be tricky though because the number of courses in each row is different for each user, so you’d need something that works dynamically for both 1 and 2 courses in the row. I don’t have time now to dig into the CSS and write anything. Sorry.

  53. laura

    Hi, Dave!
    I am trying to do this, but I don’t know how and I guess you can help me.
    I have installed LD + EDD and some other pluggins (Uncanny, etc.)
    The process of a course is
    1. Course grid -> Access button
    2. Course page of Learndash -> Enroll.
    3. Course product of EDD -> Pay
    4. Checkout.

    I was wondering how to do like you have on your page: avoiding one step (2 or 3). From course grid to course product of EDD; or from Course page to checkout.

    Thank you in advance!
    Laura.

    • Hi Laura,

      Good question. I choose not to use the Course Grid add-on as a hub for the courses that I’m trying to sell. Since they go to LearnDash course pages by default, which is not where I’m selling my courses (that is done with EDD), it doesn’t make sense to me. I believe I covered this in this article (watch the video).

      You could use a listing of EDD products as your sales hub, and they will link to the EDD product page, which then has add-to-cart buttons/links.

      Or you keep your course grid, continue linking to the course page, but then in the Access Mode where you set it to Closed, use a custom EDD add-to-cart link for the Button URL.

      Does that make sense?

  54. Laura

    Hi, David!
    And first of all, thank you so much for your response! Yes, it does make sense! 🙂
    In fact, I’m looking how to do it like you say, because I think it’s quite better.
    One question more: I have seen how you have made it in your page, but that “course grid” is not from EDD. Did you customize it (with CSS, etc.) or is there any way to do it (with shortcodes or something like that)?
    Thank you so much again!!
    Laura.

    • Are you referring to the “grid” on ldx.training? If so, that was created with Elementor Pro. I created a custom grid which queries the EDD downloads post type, and used Elementor to style it (along with a little custom CSS of my own).

  55. Hi Dave…i’m having an issue where the featured image option is not showing upi on the course page in WP. I have been going back and forth with support with no progress. I have tried their suggestions and tested three themes. The only issue this causes is that I cant see a thumbnail image on the course grid. wee here…

    https://www.playlouder.com/courses-page/?course_catid=2448

    Do you know any way to force a thumbnail in there? Or perhaps a third party plugin that allows me to override what would normally be the featured image. This is literally my past obstacle!

  56. Haha. Im sorry i finally did. I had three exchanges with learned Dash support, and in none of them did they direct me to the box that I have to check to have featured images on!. I finally found it myself. Why it is not on by default I have no idea. Thx for looking.

  57. Marlon Gabriel Flores Ramos

    Hi Dave, great post help me a lot, is it posible to change the text label of ribbon, i’d like to replace “enrolled” to “inscrito”, for my spanish page.

    • Hi Marlon. Glad you found it helpful 🙂.

      To change text like that, most people use a translation plugin. The most popular one I’ve heard of people using with LearnDash is Loco Translate. I don’t do any translations myself so I can’t speak directly to it, but many have used it and say good things.

  58. Hi Dave. Thx for a great resource you’ve created for people like myself who are new to Learndash. Is there any way to add the following information about each course in the grid – the number videos, number of articles and the total length of the videos in the course. I have seen this kind of info on other LMS and find it suoer-helpful for deciding which courses to tackle.

    • LearnDash doesn’t provide this feature out of the box. The Visual Customizer plugin by Snap Orbital provides the ability to add some of this info, but you are required to use their layouts to do it, and you still have to enter the information in manually.

      Technically, there are ways in LearnDash to get the number of lessons in a course, and you could write some custom PHP to find the number of videos in a course. But this is quite advanced and would require custom development. Getting the total length of videos would be extremely difficult because WordPress/LearnDash has no way of extracting the video length.

      If you were ok doing all of this manually, you could use custom fields, and then customize the LearnDash template files to insert those fields. But again, this would require custom development of a child theme.

  59. Paul

    Hi, is there a way to display a message to users if the course grid does not display any available courses? I’m trying to show users courses they are not enrolled in. If there are non available there should be a message of some kind, otherwise the page is blank. Thoughts?

  60. Thank you so much for your prompt and helpful reply. I was thinking that this would be the case as the the options I was seeking hadn’t been mentioned in any of the articles on Learndash I had read. I’m thinking that the simplest method for now might be to simply calculate the data manually and enter it as part of the short description. Not as neat moving forward as the number of courses grow or as we update content (and have to remember to update our calculations and the short description). Anyway, I will experiment with this. Thx again for your help.

  61. Hi Dave, thank you so much for the page. I was able to change the ribbon for “enrolled” but not the “general” ribbon using the code. Any tips?

    • Hi Lauren — You’re welcome.

      I just tried it on this page of your site, and it worked for the green price ribbons. Are these not the ribbons you’re referring to? Can you post a link to the page or email me privately if there’s another one? [email protected]

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén