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 all 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
- Install the Course Grid
- Add extra information
- Choose which content to display
- Sort & filter the grid
- Better grid styling
- Custom CSS snippets
- Course Grid FAQ
- Bonus Tips
1. Install the Course Grid add-on
Make sure you have installed & activated the course grid add-on.
- Navigate to LearnDash LMS > Add-Ons
- The “LearnDash Course Grid” should be the first option
- 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.
- In your WordPress admin area, navigate to one of your courses
- 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.

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:

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 only supports YouTube, Vimeo, Wistia & native videos that you upload through the Media Library.
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.
[ld_course_list col="4"]
Bug: There is currently a bug with the course grid columns. They don’t line up properly, and some courses wrap to the next line when they shouldn’t.
The easiest way to fix this is by installing our free plugin, Design Upgrade for LearnDash. It will not only fix this issue, but make your entire grid look more polished 🙌.
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 titleID
– uses the course IDdate
– uses the original publish datemodified
– uses the date the course was modified/updatedmenu_order
– uses the specified menu order that you providedrand
– 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 10course_category_name="math"
– Only show courses whose category slug is mathcourse_tag_id="10"
– Only show courses assigned to the tag with ID of 10course_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 & tags…
[ld_course_list course_categoryselector="true"]
To allow filtering by WordPress categories & tags…
[ld_course_list categoryselector="true"]
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 10category_name="math"
– Only show courses whose category slug is mathtag_id="10"
– Only show courses assigned to the tag with ID of 10tag="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.
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 60 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 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;
}
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;
}
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 lessons in a course 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.
Can I display topics in a course 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.
Can I display quizzes in a course grid?
Yes. Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_quiz_list]
.
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"
orcat="12"
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
Patrick Kellogg
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.
Dave Warfel
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.
Moira
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.
Dave Warfel
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
Dave Warfel
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 );
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.
Dave Warfel
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.
sandra
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?
Dave Warfel
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.
sandra
yes indeed that page. I think it was someting with caching, because it’s look alright now.
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?
Dave Warfel
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.
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.
Dave Warfel
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?
Kate
What is the correct size of the featured image to upload?
Dave Warfel
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:
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.
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.
Dave Warfel
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.
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 ?
Dave Warfel
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/
folder2. 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 post5.
echo
that into thecourse_list_template.php
file where you want it to appearYou would also have to ensure you always kept the course grid plugin active, otherwise you’ll probably run into issues.
Renato
How can I delete the word “Courses” from “Course Categories” and “Select Course Categories” in the category list filter on LearnDash Grid?
Dave Warfel
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.
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.
Dave Warfel
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!
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?
Dave Warfel
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 eithertag="health"
orcourse_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.
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
Dave Warfel
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.
Riz
I am using “Legacy” template and LearnDash Version 3.0.5.1
Dave Warfel
Sorry, but I’m not sure what the problem is then.
Raphael
Hey,
is it possible to sort courses by a specific order of post ids:
110, 947, 456, …
thanks a lot!
Dave Warfel
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.
Raphael
Thanks a lot for your answer. Is there no way to sort them according to self-chosen sequence?
Dave Warfel
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.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.
Dave Warfel
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.Christina
How can I show one grid with only incomplete courses and another grid with completed courses?
Dave Warfel
Unfortunately, you can’t. Completion status is not available as a parameter.
Mark Freels
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.
Dave Warfel
Mark — If you’re trying to add the course grid to your site…
[ld_course_list]
You can then use any of the parameters I explain on this page to customize the course grid.
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!
Roger
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!
Dave Warfel
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.<body>
tag for the class name. It should be something likepage-id-123
.