How to Make the Entire Course Grid Element Clickable in LearnDash

In LearnDash’s course grid, only the featured image & “see more…” button are clickable by default. If you click on the course title, or the short description, nothing happens. Many people expect the course title to take them to the course page, so let’s see how we can make that happen.

The Ideal Solution… ❌

The ideal solution would be to modify the HTML code so that the entire grid element is wrapped in an <a> tag. This is valid, semantic HTML and would not require any further coding to make the grid element clickable.

Unfortunately, LearnDash doesn’t provide an easy way to edit the HTML output for the course grid. Technically, there is a way to do it, but I wouldn’t recommend it, so I’m not going to cover it in this article.

A Solution That Works ✅

I try to keep all code light & simple, and only use what’s absolutely necessary. While this isn’t a job I would normally do with JavaScript, because of the restraint I mentioned above, we’re going to use a little JavaScript to make this work.

Where to place the code

Since you’re only using the course grid on one, or a few, pages, we don’t want to run the JavaScript on every single page. That’s wasteful and unnecessary.

So just place the following JavaScript on the pages where you add a course grid.

NOTE
Regardless of which editor you’re using, the code should be placed at the top of the page.

If you’re using the new/block editor, I recommend placing the code in an HTML block.

If you’re using the Classic Editor, I recommend switching to the “Text” tab and inserting this code at the top of the page.

The code

Here’s the JavaScript code that will make the entirety of every grid item clickable:

<script>
document.addEventListener("DOMContentLoaded", function() {
	// get all dom elements with class ".thumbnail.course"
	var aFeatures = document.querySelectorAll(".thumbnail.course");
	// for each selected element
	for (var i = 0; i < aFeatures.length; i++) {
		// add click handler
		aFeatures[i].addEventListener('click', function() {
			// get href of first anchor in element and change location
			window.location = this.querySelectorAll("a")[0].href;
			return false;
		});
	}
});
</script>

CSS to finalize things

You might want to display a pointer hand 👆 on hover, just to make it clear that the entire element is clickable. For that, we’ll add the following CSS to the “Additional CSS” area of the WordPress Customizer.

.ld-course-list-items div.ld_course_grid .thumbnail.course:hover {
	cursor: pointer;
}

And that’s all there is to it. Now the entire area of each course grid item is clickable, and will direct the user to the course page.