Course Grid 2.0 TemplatingLearnDash 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.
Table of Contents [show]1 Skin2 Card3 Pagination3.1 Was this article helpful to you?
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:
layout.php (mandatory) : define skin HTML layout
style.css (optional) : define skin CSS styles
script.js (optional) : define skin javascript file
In layout.php, there are 2 available variables:
$posts Array of WP_Post objects which are the query results of the course grid
$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:
get_posts()
* $atts Shortcode/Block editor attributes that call this template
*/
?>
<div class="items-wrapper ">
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:
layout.php (required) : defines card HTML layout.
style.css (optional) : defines card CSS stylesheet
To create a custom card design, users can follow the following steps:
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/
Add the required layout.php file to the folder with the other optional files style.css
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/.
Was this article helpful to you?
Yes
No
