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.

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/.