---
title: "Course Grid 2.0 Templating"
source: "https://docs.nexcess.com/software/learndash/course-grid-templating/"
description: "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.…"
vertical: "Software"
area: "LearnDash"
date: "2021-11-18"
last_modified: "2026-07-02"
---
# 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](https://docs.nexcess.com/software/learndash/course-grid/).
## 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: ```
/**
* 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 echo esc_attr( $atts['skin'] ); ?>">
foreach ( $posts as $post ) : ?>
learndash_course_grid_load_card_template( $atts, $post ); ?>
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/`.