How to fix the LearnDash course grid layout

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.

Related: If you need any help setting up LearnDash we can assist!

[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:

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

Below is the CSS code which we will use to make the LearnDash grid work properly:

#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;}

This CSS code can be also added by going to Appearance > Customise > Additional CSS or, if you are using Divi theme, by going to Divi > Theme Options > General > Custom CSS in your WordPress Dashboard.

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:

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

You can edit the header.php file by connecting to SFTP or FTP or by going to Appearance > Theme Editor in WordPress Dashboard.

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:

 
Do you use LearnDash…?

Share a screenshot of your favorite course in the comments section below!