mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

How to fix the LearnDash course grid layout

learndash fix grid

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

learn dash grid fixed - How to fix the LearnDash course grid layout

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:

learn dash grid fixed - How to fix the LearnDash course grid layout 
Do you use LearnDash…?

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

 

Like this article?
User Review
0 (0 votes)
Comments Rating 0 (0 reviews)

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
Do you want to make your YouTube video disappear automatically after it finishes playing? This quick & dirty tutorial that will show you how!
Learn how to integrate WooCommerce with myCRED, award buyers points, and how to skip the default WooCommerce checkout flow.
How to use WP Fusion and Active Campaign automation for managing tags and replacing users between tables
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
E.M.
E.M.
September 17, 2020 12:09 pm

Hi SC,

is there a possibility to hide the category title, if there are currently no courses in it?

Victor Barannik
Reply to  E.M.
December 27, 2020 12:52 pm

Hello E.M.

Unfortunately no. But you can hide it using CSS.