Introduction
Overview
LearnDash is one of the best learning management systems (LMS) and many of our customers use it on their WordPress websites.
Recently, I discovered that even if all updates are done and the Course Grid Add-On is installed, LearnDash still has a problem with displaying the courses grid correctly.
The LearnDash shortcode I used was also the correct one. But instead of a nice organized grid, all of the courses were on a single line looking weird…
In this article I will show you how to fix this annoying issue and make the LearnDash courses grid great again! 😉
The LearnDash course grid shortcode
LearnDash recommends using the following shortcode to generate a 4 column grid of all courses:
[ld_course_list col=4]
Now let’s suppose that you want to show courses only from a certain category. In that case you will use a shortcode like this:
[ld_course_list col=4 course_category_name=”my_category” order=”ASC” orderby=”menu_order”]
If this doesn’t work for you—as it didn’t for us—then you will need to use the below method to fix it.
CSS code to fix the LearnDash Courses grid
To have a clear demonstration of how this works we will add other two categories with the corresponding LearnDash shortcodes under the <h2> category titles.
In your post editor where you have added the shortcodes, we will add a <div> with a certain ID which wraps the shortcodes. This is to be sure that the CSS code will not interfere with other parts of your website.
So the code in editor text tab will look like this:
html
<div id="mygrid"> <h2>Category 1 title</h2> [ld_course_list col=4 course_category_name="my_category1" order="ASC" orderby="menu_order"] <h2>Category 2 title</h2> [ld_course_list col=4 course_category_name="my_category2" order="ASC" orderby="menu_order"] <h2>Category 3 title</h2> [ld_course_list col=4 course_category_name="my_category3" order="ASC" orderby="menu_order"] </div>
css
#mygrid .ld-entry-content p, .ld-entry-content .module_success_desc, .ld-entry-content .module_rec_prereq { display:none; }
#mygrid .ld-entry-title { width:80%; text-align:center; margin:0 auto; font-size:18px; font-weight:bold; line-height:1.3em; height: 50px; }
#mygrid .ld-entry-title a:hover { text-decoration:none; }
#mygrid .ld-entry-content { text-align:center; padding-bottom: 17px;}
#mygrid .ld-entry-content img { float:none; margin:0 auto 1em auto; background:white; border:4px solid #59638C; border-radius:15%;-moz-border-radius:15%;-webkit-border-radius:15%;padding:10%; }
#mygrid .coursebox {width:25%;float:left;}
#mygrid .ld-course-list-items {padding:30px;}
We are almost done. The last thing to do is to add the below jQuery code right before the </header> closing tag in your header.php file from your theme folder:
js
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.ld-course-list-items h2').each(function(){
var $set = jQuery(this).nextUntil("h2").andSelf();
$set.wrapAll('<div class="coursebox" />');
});
});
</script>IMPORTANT: I highly recommend that you first create a child theme, or use the My Custom Functions WordPress plugin whenever you add custom code to your theme files. Otherwise, any time you update your theme your changes will get wiped out.
We are done! Your page with the LearnDash grid should look similar to the following screenshot:
Share a screenshot of your favorite course in the comments section below!
Hi SC,
is there a possibility to hide the category title, if there are currently no courses in it?
Hello E.M.
Unfortunately no. But you can hide it using CSS.