{"id":4348,"date":"2021-11-17T21:39:55","date_gmt":"2021-11-18T02:39:55","guid":{"rendered":"https:\/\/learndash.com\/support\/docs\/guides\/course-grid-2-0-templates\/"},"modified":"2026-04-22T08:53:54","modified_gmt":"2026-04-22T12:53:54","password":"","slug":"course-grid-templating","status":"publish","type":"docs","link":"https:\/\/learndash.com\/support\/kb\/non-knowledgebase\/uncategorized\/course-grid-templating\/","title":{"rendered":"Course Grid 2.0 Templating"},"content":{"rendered":"

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.<\/span><\/p>\n

NOTE<\/strong>
\nThis 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<\/a>.<\/p>\n

Skin<\/h2>\n

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\/<\/code>. 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.<\/span><\/p>\n

Each skin folder can have the following files:<\/span><\/p>\n

    \n
  1. layout.php<\/code> (mandatory) : define skin HTML layout<\/span><\/li>\n
  2. style.css<\/code> (optional) : define skin CSS styles<\/span><\/li>\n
  3. script.js<\/code> (optional) : define skin javascript file<\/span><\/li>\n<\/ol>\n

    In layout.php, there are 2 available variables:<\/span><\/p>\n

      \n
    1. $posts<\/code> Array of WP_Post<\/code> objects which are the query results of the course grid<\/span><\/li>\n
    2. $atts learndash_course_grid<\/code> shortcode attributes<\/span><\/li>\n<\/ol>\n

      In layout.php, users can use the helper function <\/span>learndash_course_grid_load_card_template( $shortcode_atts, $post )<\/span><\/code> to load the skins card template automatically.<\/span><\/p>\n

      To add a custom skin, users can follow the steps below:<\/span><\/p>\n

        \n
      • Create a folder named with a unique skin slug in their active theme folder in the following path: \/learndash\/course-grid\/skins\/<\/code> . 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\/<\/code> .<\/span><\/li>\n<\/ul>\n

        layout.php<\/code> example:<\/span><\/p>\n

        <?php<\/span>\r\n\/**<\/span>\r\n* Available variables:<\/span>\r\n*<\/span>\r\n* $posts  Array of WP_Post objects, result of the WP_Query->get_posts()<\/span>\r\n* $atts  Shortcode\/Block editor attributes that call this template<\/span>\r\n*\/<\/span>\r\n?><\/span>\r\n<<\/span>div<\/span> class<\/span>=<\/span>\"items-wrapper <\/span><?php<\/span> echo<\/span> esc_attr<\/span>( <\/span>$atts<\/span>[<\/span>'skin'<\/span>] ); <\/span>?><\/span>\"<\/span>><\/span>\r\n<\/span><?php<\/span> foreach<\/span> ( <\/span>$posts<\/span> as <\/span>$post<\/span> ) : <\/span>?><\/span>\r\n<\/span><?php<\/span> learndash_course_grid_load_card_template<\/span>( <\/span>$atts<\/span>, <\/span>$post<\/span> ); <\/span>?><\/span>\r\n<\/span><?php<\/span> endforeach<\/span>; <\/span>?><\/span>\r\n<\/<\/span>div<\/span>><\/span><\/pre>\n
          \n
        • Add the required<\/span> layout.php<\/code> file to the folder with the other optional files <\/span>style.css<\/code> and <\/span>script.js<\/code> if necessary.<\/span><\/li>\n
        • Add the following code to the active themes functions.php or a plugin:<\/span><\/li>\n<\/ul>\n
          add_filter<\/span>( <\/span>'learndash_course_grid_skins'<\/span>, <\/span>function<\/span>( <\/span>$skins<\/span> ) {<\/span>\r\n<\/span>$skins<\/span>[<\/span>'custom-skin-slug'<\/span>] = [<\/span>\r\n<\/span>'slug'<\/span> => <\/span>'custom-skin-slug'<\/span>,<\/span>\r\n<\/span>'label'<\/span> => <\/span>'Custom Skin'<\/span>,<\/span>\r\n<\/span>\/\/ Optional<\/span>\r\n<\/span>'script_dependencies'<\/span> => [<\/span>\r\n<\/span>'dependency-slug'<\/span> => [<\/span>\r\n<\/span>'url'<\/span> => <\/span>'https:\/\/script_url'<\/span>,<\/span>\r\n<\/span>'version'<\/span> => <\/span>'1.0'<\/span>\r\n ]<\/span>\r\n ],<\/span>\r\n<\/span>\/\/ Optional<\/span>\r\n<\/span>'style_dependencies'<\/span> => [<\/span>\r\n<\/span>'dependency-slug'<\/span> => [<\/span>\r\n<\/span>'url'<\/span> => <\/span>'https:\/\/style_url'<\/span>,<\/span>\r\n<\/span>'version'<\/span> => <\/span>'1.0'<\/span>\r\n ]<\/span>\r\n ],<\/span>\r\n ];<\/span>\r\n<\/span>return<\/span> $skins<\/span>;<\/span>\r\n} );<\/span><\/pre>\n
          Card<\/h2>\n
          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\/<\/code>. 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).<\/span><\/p>\n
          Each card folder can have the following files:<\/span><\/p>\n
            \n
          1. layout.php<\/code> (required) : defines card HTML layout.<\/span><\/li>\n
          2. style.css<\/code> (optional) : defines card CSS stylesheet<\/span><\/li>\n<\/ol>\n
            To create a custom card design, users can follow the following steps:<\/span><\/p>\n
              \n
            1. Create a folder named with a unique card slug in their active theme folder in the following path: \/learndash\/course-grid\/cards\/<\/code> . 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\/<\/code><\/span><\/li>\n
            2. Add the required layout.php<\/code> file to the folder with the other optional files style.css<\/code><\/span><\/li>\n
            3. Add the following code to the active themes functions.php or a plugin:<\/span><\/li>\n<\/ol>\n
              add_filter<\/span>( <\/span>'learndash_course_grid_cards'<\/span>, <\/span>function<\/span>( <\/span>$cards <\/span>) {<\/span>\r\n<\/span>$cards<\/span>[<\/span>'custom-card-slug'<\/span>] = [<\/span>\r\n<\/span>'label'<\/span> => <\/span>'Custom Card'<\/span>,<\/span>\r\n<\/span>\/\/ Skins this card is available for<\/span>\r\n<\/span>'skins'<\/span> => [ <\/span>'grid'<\/span>, <\/span>'custom-skin'<\/span>, <\/span>'etc'<\/span> ],<\/span>\r\n<\/span>\/\/ CG elements exist in the card design, added elements will be available in CG Gutenberg block<\/span>\r\n<\/span>'elements'<\/span> => [<\/span>\r\n<\/span>'thumbnail'<\/span>,<\/span>\r\n<\/span>'ribbon'<\/span>,<\/span>\r\n<\/span>'content'<\/span>,<\/span>\r\n<\/span>'title'<\/span>,<\/span>\r\n<\/span>'description'<\/span>,<\/span>\r\n<\/span>'meta'<\/span>,<\/span>\r\n<\/span>'button'<\/span>,<\/span>\r\n ],<\/span>\r\n ];<\/span>\r\n<\/span>return<\/span> $cards<\/span>;<\/span>\r\n} );<\/span><\/pre>\n
              Pagination<\/h2>\n
              Course Grid 2.0 comes with 2 default paginations: load more button and infinite scrolling. Pagination templates are located in \/templates\/pagination\/<\/code>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
              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…<\/p>\n","protected":false},"author":25,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_helpful_status":1,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"doc_category":[],"doc_tag":[],"knowledge_base":[],"class_list":["post-4348","docs","type-docs","status-publish","hentry"],"year_month":"2026-05","word_count":660,"total_views":"6066","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"jack","author_link":"https:\/\/learndash.com\/support\/author\/jack\/"},"doc_category_info":[],"doc_tag_info":[],"taxonomy_info":[],"featured_image_src_large":false,"comment_info":0,"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/4348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/comments?post=4348"}],"version-history":[{"count":8,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/4348\/revisions"}],"predecessor-version":[{"id":4649,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/4348\/revisions\/4649"}],"wp:attachment":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/media?parent=4348"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_category?post=4348"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_tag?post=4348"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/knowledge_base?post=4348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}