Course Grid 2.0 Templating

LearnDash Course Grid (CG) 2.0 is a brand new plugin written from scratch. It supports custom templating to make it easier for users to customize the template. All the front-end aspects of the plugin including skins, cards, filter, and pagination are customizable.

NOTE

This documentation is regarding templating the Course Grid Add-on, if you want to learn more about using the actual add on and it’s features, check out our Course Grid Add-on documentation.

Table of Contents

1. Skin
2. Card
3. Pagination

Skin

Skin in Course Grid 2.0 is an object that defines the whole course grid style. The Skin templates folder is located in /templates/skins/ . By default there are 4 different types of skins: grid, masonry, list, and legacy-v1. The first three skins are available to choose from in the Course Grid Gutenberg block while the legacy-v1 skin is specific to support CG 1.0 shortcodes.

Each skin folder can have the following files:

1. layout.php  (mandatory) : define skin HTML layout
2. style.css  (optional) : define skin CSS styles
3. script.js  (optional) : define skin javascript file

In layout.php, there are 2 available variables:

1. $posts  Array of WP_Post  objects which are the query results of the course grid
2. $atts learndash_course_grid  shortcode attributes

In layout.php, users can use the helper function learndash_course_grid_load_card_template( $shortcode_atts, $post )  to load the skin’s card template automatically.

To add a custom skin, users can follow the steps below:

• Create a folder named with a unique skin slug in their active theme folder in the following path: /learndash/course-grid/skins/  . For example if a user uses the Kadence theme, they can create a new folder like this: wp-content/themes/kadence/learndash/course-grid/skins/custom-skin-slug/  .

layout.php  example:

<?php
/**
* Available variables:
*
* $posts   Array of WP_Post objects, result of the WP_Query->get_posts()
* $atts    Shortcode/Block editor attributes that call this template
*/
?>
<div class="items-wrapper <?php echo esc_attr( $atts['skin'] ); ?>">
   <?php foreach ( $posts as $post ) : ?>
       <?php learndash_course_grid_load_card_template( $atts, $post ); ?>
   <?php endforeach; ?>
</div>

• Add the required layout.php  file to the folder with the other optional files style.css  and script.js  if necessary. 
• Add the following code to the active theme’s functions.php or a plugin:

add_filter( 'learndash_course_grid_skins', function( $skins ) {
   $skins['custom-skin-slug'] = [
       'slug' => 'custom-skin-slug',
       'label' => 'Custom Skin',
       // Optional
       'script_dependencies' => [
           'dependency-slug' => [
               'url' => 'https://script_url',
               'version' => '1.0'
           ]
       ],
       // Optional
       'style_dependencies' => [
           'dependency-slug' => [
               'url' => 'https://style_url',
               'version' => '1.0'
           ]
       ],
   ];
   return $skins;
} );

Card

Card in Course Grid 2.0 is an object that defines how an individual card inside a skin looks. Each skin can has multiple different card designs. Card templates folder are located in /templates/cards/ . By default there are 5 different cards: grid-1, grid-2, grid-3 (available for grid and masonry skin), list-1, list-2 (available for list skin).

Each card folder can have the following files:

1. layout.php  (required) : defines card HTML layout.
2. style.css  (optional) : defines card CSS stylesheet

To create a custom card design, users can follow the following steps:

1. Create a folder named with a unique card slug in their active theme folder in the following path: /learndash/course-grid/cards/  . For example if a user uses the Kadence theme, they can create a new folder like this: wp-content/themes/kadence/learndash/course-grid/cards/custom-card-slug/
2. Add the required layout.php  file to the folder with the other optional files style.css
3. Add the following code to the active theme’s functions.php or a plugin:

add_filter( 'learndash_course_grid_cards', function( $cards ) {
   $cards['custom-card-slug'] = [
       'label' => 'Custom Card',
       // Skins this card is available for
       'skins' => [ 'grid', 'custom-skin', 'etc' ],
       // CG elements exist in the card design, added elements will be available in CG Gutenberg block
       'elements' => [
           'thumbnail',
           'ribbon',
           'content',
           'title',
           'description',
           'meta',
           'button',
       ],
   ];
   return $cards;
} );

Pagination

Course Grid 2.0 comes with 2 default paginations: load more button and infinite scrolling. Pagination templates are located in /templates/pagination/ .