In November 2021, LearnDash released version 2.0 of the LearnDash Course Grid add-on. This is a free extension for the highly popular LearnDash LMS plugin for WordPress which provides better styling possibilities for course listing pages, whether it be to display all courses available on a LearnDash LMS platform, or to customise the courses shown within the grid based on course categories, tags, or even to only show the courses that the currently signed in user has access to in their own Learner Profile.
The original LearnDash Course Grid plugin was first released in January 2020, and until this point the number of style customisation options have been fairly limited. LearnDash have seeked to rectify the situation with the 2.0 release however, providing a number ‘Skin’ and ‘Card’ templates to choose from which further customise the style of the course grid display based on the admin user’s preference.
At this moment in time the available skin and card templates are only available when using the block editor built into Gutenburg. It is for this reason that many of the new styling features available in Course Grid 2.0 may not be immediately obvious or accessible to all WordPress users, especially those like my own clients who prefer the simplicity and extensive page building features found within their premium WordPress themes that utilise either WP Bakery Page Builder or Elementor. In this case the LearnDash Course Grid shortcode continues to work but currently doesn’t seem to support any of the new features of 2.0. This may hopefully change over time.
Though there are several new dynamic options to be taken advantage of out-of-the-box with the Course Grid plugin, alot more can be achieved with some straight forward HTML and CSS code editing within the plugin itself.
In this blog post, we intend to show you one such interactive example that we recently built for one of our bespoke LearnDash LMS development project clients.
The great thing about this custom hover interaction is that it can be used with the default shortcode Course Grid view, as well as with any of the new style templates.
Here’s how you can achieve the same effect within your own LearnDash LMS platform:
Step 1 – Make the following code edits within the item.php file
Within the plugin folder for ‘learndash-course-grid’ navigate to templates/skins/legacy-v1 and open the item.php. Here you will need to replace lines 59-62 with the following code:
<?php elseif( has_post_thumbnail() ) :?> <a href="<?php echo esc_url( $button_link ); ?>" rel="bookmark"> <div class="ld-thumb-container"> <?php the_post_thumbnail( $thumb_size ); ?> <div class="middle"> <div class="thumb-text">Dive In!</div> </div> </div> </a>
(If you are using a version of Course Grid prior to the 2.0 release, you can find the same block of code to edit on line 253 of the course_list_template.php file.)
As you can see, the code above created the div containin the ‘Dive In!’ text that you can see in the animated GIF example above. If you would like to use your own text just type it in here. You may also need to adjust your CSS rules accordingly based on how much space your text takes, which we will cover in the next step.
If you update the Course Grid plugin in the future your code will be overwritten, so keep a local backup of this file on your computer when you need to update.
Step 2 – Add the following CSS rules to your site, applied to the page where your Course Grid is to be displayed
.ld_course_grid_button {display:none;} h3.entry-title {padding-bottom:6px;} .middle { transition: .5s ease; opacity: 0; position: absolute; top: 44.5%; left: 48.5%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } .attachment-course-thumb { opacity: 1; transition: .5s ease; backface-visibility: hidden; } .ld-thumb-container:hover .attachment-course-thumb { opacity: 0.3; } .ld-thumb-container:hover .middle { opacity: 1; } .thumb-text { background-color: #0076bf; color: white; font-size: 16px; padding: 16px 32px; }
The CSS rules printed above are designed to achieve the same look as the animated GIF demo shown above. You can easily make tweaks to any of these values yourself, such as changing colours and sizing/padding in order to better match the aesthetic of your own LearnDash site.
With these tweaks in place you can create a very interesting effect for your own LearnDash Course Grid pages. Do you have your own similar LearnDash Tip or Trick to share? Feel free to contribute by commenting on our post below.