View Categories

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.

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

Updated on June 20, 2022