1. Home
  2. Knowledge Base
  3. Uncanny LearnDash Toolkit Pro
  4. Enhanced Course Grid

Overview

The Enhanced Course Grid module is part of the Pro Suite of modules for the Uncanny LearnDash Toolkit. It’s much like the Course Grid add-on for LearnDash, except that it’s intended more for signed-in users and adds a lot of flexibility to how courses are displayed in the grid.

Live Demo

See this module in action on our LearnDash demo site!

Shortcode

[uo_courses]

The course grid can be added to any page using this shortcode. Out of the box, it will display a nice 4-column grid of courses (featured images of equal sizes should be added to courses) that are listed in a single row but expandable to display all available courses. For signed in users, courses are ordered by progress, enrolment status and “Coming Soon” tag. Courses that the user is enrolled in are displayed first (except completed courses), in descending order by percent complete. Completed courses are displayed last, as users may be less likely to return to completed courses. Available courses that the user isn’t enrolled in come next, followed by courses the user isn’t enrolled in that have a “Coming Soon” tag. This feature adds a way to list courses that will be added at a later date and to flag them as such.

The default grid view has 4 columns including the View More button. Each course includes a featured image as shown in the screenshot below.

course_grid

With the release of version 2.0 of this module, course descriptions can also be optionally included in the grid. Descriptions are set at the course level and, when populated, are displayed beneath the course name in the grid element.

Attributes

The [uo_courses] shortcode includes a lot of available attributes to keep things as flexible as possible. It’s helpful to watch the screencast above before getting started as it demonstrates how each of the attributes works and the impact to the course grid. Here’s a list of the attributes that are currently available:

Attribute NameDescriptionAttribute ValuesDefault Value
categoryShows only courses in a specific category. This is a great way to organize courses into a fourth hierarchical level (beyond courses, lessons and topics)."all" or a category slug"all"
ld_category
(Lower case ld as in learndash)
Shows only courses in a specific course category. This is a great way to organize courses into a fourth hierarchical level (beyond courses, lessons and topics). Note this attribute does not support multiple categories."all" or a course category slug"all"
category_selectorShow a drop-down list above the grid to allow filtering courses by WordPress category (not LearnDash category)."show" or "hide""hide"
course_categoryselectorShow a drop-down list above the grid to allow filtering courses by LearnDash course category (not WordPress category)."show" or "hide""hide"
enrolled_onlyShows only courses that the user is enrolled in."yes" or "no""no"
not_enrolledShows only courses that the user is not enrolled in. This is useful when you want to show a list of available courses that the user hasn't yet purchased."yes" or "no""no"
colsSets the number of columns to display per row."3", "4", or "5""4"
limitSets the number of courses to display in front of the View More button. If set to "all", the View More button does not appear."all" or any integer"4"
hide_view_moreHides the View More button."yes" or "no""no"
hide_descriptionHides Course Description."yes" or "no""no"
hide_progressHide the progress bar for the user; this can improve performance on sites with many courses"yes" or "no""no"
hide_creditsHides the assigned credit value of the course"yes" or "no""no"
moreDirects the user to a page instead of expanding the list of courses when the View More button is clicked.a URL
show_imageControls whether or not course featured images are displayed. If no featured images are set for courses, this should be "no". Note when uploading a featured image, WordPress will automatically crop it to 1.33:1 aspect ratio. The image you upload should be at least 624 x 468 pixels."yes" or "no""yes"
priceSets whether or not the price and price banner are displayed in the upper left corner of courses. If the grid is used on a page accessible to registered users only, prices may not be appropriate. Also note that Closed courses with no price listed will be labelled as "Free", which may be incorrect."yes" or "no""yes"
link_to_courseDetermines whether or not clicking a grid item should take the user to the associated course page. While generally this should stay as "yes", on public-facing pages it may be useful to have a list of courses that aren't linked."yes" or "no""yes"
default_sortingSorts courses by their status. For example, if default_sorting is set to "course-progress,enrolled,not-enrolled,completed,coming-soon", courses that are in progress will be listed first whereas courses that are not yet available for enrollment will be last. If you set custom default_sorting and exclude any values/categories will be excluded. In other words, if you set default_sorting="completed", ONLY completed courses will be shown."course-progress,enrolled,not-enrolled,coming-soon,completed" (in any order)"course-progress,enrolled,not-enrolled,coming-soon,completed"
orderbySets whether courses should be ordered by title, date, or menu order. "title", "date", or "menu_order""title"
orderControls whether courses should be listed in ascending or descending order based on what's set in the order_by attribute."asc" or "desc""asc"
ignore_default_sortingControls whether the default_sorting order should be ignored. By default, default_sorting takes precedence over orderby, i.e., courses will be sorted by their status, and then by "date", "title", or "menu_order". When ignore_default_sorting is set to "yes", all courses will be ordered by the orderby value regardless of what's set in default_sorting."yes" or "no""no"
start_course_buttonShow a Start button beneath the course. Visible only if the user is enrolled and progress is 0%. "show" or "hide""hide"
resume_course_buttonShow a Resume button beneath the course. Visible only if the user is enrolled and has progress. The Resume module MUST be enabled for this to work and the button will only be visible if users have progress reported after installing version 2.5 of this plugin."show" or "hide""hide
border_hoverChanges the border colour of grid items when they are hovered over.
view_more_colorChanges the fill colour of the View More button.
view_more_hoverChanges the fill colour of the View More button when it is hovered over.
view_more_text_colorChanges the text colour of the View More button.
view_more_textChanges the text label of the View More button.
view_less_textChanges the text label of the View Less button.

Let’s take a look at an example of how you might customize the course grid. Suppose that you want to show a course grid on a Learner Dashboard which only displays courses that the user is enrolled in. You also want to first list the courses that they have started, followed by those they have yet to begin, and then by those they have completed. You also want to list courses in alphabetical order (the default). In this example, you only want to show courses that the user is taking or has taken. Price is no longer relevant so you would hide it. Your shortcode will look like this:

[uo_courses enrolled_only="yes" price="no" default_sorting="course-progress,enrolled,completed"]

Using CSS to Customize the Course Grid

You can customize the grid layout directly in a CSS file rather than using shortcodes by copying the following file:
/wp-content/plugins/uncanny-toolkit-pro/src/assets/frontend/css/course-grid-view.css
Move it to your child theme so that it’s available at:
/wp-content/themes/your-theme/uncanny-toolkit-pro/css/course-grid-view.css

Overriding the Course Grid template

If you need to make more extensive changes to the course grid, you can override the template file by modifying this filter and replacing the value with the path to your override file.

$grid_template = apply_filters( 'uo_course_grid_template', dirname( dirname( __FILE__ ) ) . '/templates/course-grid.php' );

 

Was this article helpful?

6 replies
  1. Marlène FV
    Marlène FV says:

    Hello,
    I apparently have a compatibility problem with woocommerce.
    I used the shortcode [uo_courses] and everything works … until I ask woocommerce to use this page as a shop page. At this moment the presentation changes. Here are screenshots to better understand.
    Before: https://drive.google.com/open?id=1uD8oaHcaGa06DEe2OQjl1sLYfo5x5VXE
    After: https://drive.google.com/open?id=1Zemq-JEJ1K1a71FzREESXYjkPezJ3aT_
    Thanks a lot for your help ! It makes me crazy !!

    Reply
    • Ryan
      Ryan says:

      This cannot work unless you make significant changes to the WooCommerce template for the store page. When you set this page in WooCommerce settings, Woo will take it over and modify things about it. We cannot recommend using our shortcodes if you’re also using it as a Woo store page.

      Reply
    • Ryan
      Ryan says:

      Sorry Frank, very briefly (for about 3 hours) there was a release that showed the drop-down selection by default. That shouldn’t have happened, and you can hide it by adding this attribute to your course grid shortcode: categoryselector=”hide”. If you’re still having issues make sure to send us a support ticket (we don’t monitor the Knowledge Base as much).

      Reply

Comments/Questions

Please note that this is not an official support channel and questions/comments may go unanswered.
To request support, log in to your account and click Submit a Request.

Leave a Reply

Your email address will not be published. Required fields are marked *