The official LearnDash Course Grid Add-on plugin provides a more visually enhanced method of displaying your LearnDash LMS course lists on the front end.
With the release of version 2.0, LearnDash included many different styles and options to choose from to suit the theme of your LMS platform, including a number of different skins and card designs.
Something that is common amongst all of these designs however, and something that we recently realised when working on a client-based LearnDash LMS custom development project, is that the clickable area of the card which links to a course page is only the featured image and ‘See More…’ button if you chosen to include this in the card, e.g. the areas highlighted here:
Depending on your design choices and how you wish to display your LearnDash Course Grid interface, you might instead wish that it was instead possible for the entire card itself to be clickable in order for users to navigate to the course homepage.
This is possible with the following edits made to the LearnDash Course Grid plugin. (Note that this tutorial will cover the legacy template style available when using the standard ld_course_list shortcode within the WP post/page editor. In order to customise any of the latest 2.0 skins and card designs we can create a template folder within our child theme folder in order to set up our own custom course grid style. We will cover this in more detail in a future tutorial post)
Customise the LearnDash Course Grid Default Template To Make The Entire Card Area A Hyperlink
Download the LearnDash Course Grid plugin folder to your computer and navigate to the following folder: templates > skins > legacy-v1. Here you will find a file named item.php, open the file in your preferred source code editor app.
The first step to take is to remove the opening and closing anchor tags that surround the featured image thumbnail, these can be found on lines 61, 63, 65, and 67. Just delete or comment out the entire lines.
Next and final step is to add in a new anchor tag that encapsulates the entire course grid card segment. To do this, add the following code into line 46 just above where you will find the div with class name ld_course_grid col-sm-…
<a href="<?php echo esc_url( $button_link ); ?>">
Scroll further down the file until you find the closing div tag for the ld-course-grid at around line 96. It will contain the following: </div><!– .ld_course_grid –>
Just below this you can add the closing anchor tag for the opening tag that we just created.
</a>
Go ahead and save the file and replace the existing item.php file in the same plugin folder installed on your LearnDash LMS platform. You can also reupload the entire plugin if you wish from your Add Plugin menu, replacing the existing version with the customised version that you have created.
With this installed the results will be immediately visible for all site visitors that load a page containing a LearnDash course grid. Now hovering over the card the user can click any part of the full card in order to activate the link and navigate to the course page.
This customisation is very much ideal for creating stacked card UI designs, or scrolling carousels.
