How to Easily Build a Responsive Course Library Page for Your Membership Site With Memberium

There’s some exciting updates now available with the latest version of Memberium’s Membership Site Installation Wizard.

A major update is you can now quickly add responsive “Course Library” pages or “Course Directory” pages to any membership site with some of the new shortcodes that come with the Wizard.

Here’s a peek at what the “course grid” shortcode for LearnDash (also has an option for LifterLMS, or no LMS) looks like…

And here’s a look at what the “course list” shortcode looks like…

To do this, you just create a list of courses that you want to list on a course library page, then repeat the shortcode for each course that you want to have listed.

This allows a logged in member to then be able to see which courses they have access to, and which ones they don’t, based on their Infusionsoft tags.

If you’re using either LearnDash or LifterLMS, you can display a logged in member’s course progress so they can see where they last left off in a course. They can also see which courses they’ve completed at a quick glance.

The great part is you don’t need to mess with any custom code to set either of these up.

There’s a few different shortcodes you can choose from to create your own “Course Library” page depending on the other plugins that you’re using.

Throughout the rest of this post, we’ll show you how you to choose which to use shortcodes and how to build all the “course library” pages that you can build.

Here’s an overview of how each of these works with examples you can copy and paste to build your own course library page…

---

---

---

---

---

Course Grid Shortcodes

You can use this type of shortcode to create a course grid type page that will display all the courses a member currently has access to based on their Infusionsoft tags.

This shortcode displays a list of 3 courses per row. To list multiple courses on a single page, just repeat the shortcode and fill in the info as needed for each course.

There’s 6 different course grid shortcodes you can choose from based on the other plugins that you’re using on your WordPress site. Click the name below to auto scroll to the example that you’re looking for…

If you’re using a page builder such as Elementor (we highly recommend), Visual Composer, Thrive Architect, etc. you can choose from the following examples…

• Page Builder Example
• Page Builder + LearnDash Example
• Page Builder + LifterLMS Example

If you’re not using any type of page builder plugin on your site, you can choose from the following examples…

• Basic (No Page Builder) Version
• Basic Version + LearnDash
• Basic Version + LifterLMS

---

Course Grid – Page Builder Example

Here’s how to use this shortcode if you’re using Elementor or any other page builder.

To set this up, you’ll want to first create a 3 column layout using Elementor (or other page builder) on a blank page.

We recommend you use the “Shortcode” Elementor block to place your shortcodes into. This way you avoid paragraph spacing issues.

Here’s an example of what this looks like in Elementor…

The first step is to create an empty elementor row with 3 columns like the above example. Then place a shortcode block inside each column and paste in the Memberium shortcode in each block. Then just repeat to add additional courses. Here’s an example use of this shortcode you can copy into each shortcode block:

[membc_course-grid membership_level="Bronze" course_link="#" course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info, here’s a link to the full documentation page on [membc_course-grid]

---

Page Builder + LearnDash Example

If you’re using LearnDash with Elementor, or other page builder plugin, you can use this shortcode example to display a grid of courses with a LearnDash progress bar below each course description.

If you’re using LearnDash to apply a ‘course completion tag‘ and have the course completion tag ID included in the “course_completion_tag_id” parameter, a green checkbox will appear over a course once a member has completed it. Here’s how to find the ID to use.

To set this up, you’ll want to first create a 3 column layout using Elementor (or other page builder) on a blank page.

We recommend you use the “Shortcode” Elementor block to place your shortcodes into. This way you avoid paragraph spacing issues.

Here’s an example of what this looks like when editing in Elementor…

The first step is to create an empty elementor row with 3 columns like the above example. Then place a shortcode block inside each column and paste in the Memberium shortcode in each block. Then just repeat to add additional courses. Here’s an example use of this shortcode you can copy into each shortcode block:

[membc_course-grid-learndash membership_level="Silver" course_completion_tag_id="198" lms_course_id="587" course_link="#"  course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info, here’s a link to the full documentation page on [membc_course-grid-learndash]

---

Course Grid – Page Builder + LifterLMS Example

If you’re using LifterLMS with Elementor, or other page builder plugin, you can use this shortcode example to display a grid of courses with a LifterLMS progress bar below each course description.

If you’re using LifterLMS to apply a ‘course completion tag‘ and have the course completion tag ID included in the “course_completion_tag_id” parameter, a green checkbox will appear over a course once a member has completed it. Here’s how to find the ID to use.

To set this up, you’ll want to create a 3 column layout using Elementor (or other page builder) on a blank page.

We recommend you use the “Shortcode” Elementor block to place your shortcodes into. This way you avoid paragraph spacing issues.

Here’s an example of what this looks like when editing in Elementor…

Here’s an example use of this shortcode you can copy into each shortcode block:

[membc_course-grid-lifterlms membership_level="Bronze" course_completion_tag_id="196" lms_course_id="1904" course_link="#"  course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info, here’s a link to the full documentation page on [membc_course-grid-lifterlms]

---

Course Grid – Basic (No Page Builder) Version

If you’re not using any page builder plugin on your WordPress site, and no LMS, you’ll want to use the [membc_course-grid-basic] shortcode.

To do this, you just paste the [membc_course-grid-basic] shortcode into the WordPress content editor on a blank page multiple times like this…

Here’s an example use of this shortcode you can copy:

[membc_course-grid-basic membership_level="Bronze" course_link="#" course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info, here’s a link to the full documentation page on [membc_course-grid-basic]

---

Course Grid – Basic Version (No Page Builder) + LearnDash

To display a course grid with LearnDash and no page builder plugin, you’ll want to use the [membc_course-grid-learndash-basic] shortcode.

If you’re using LearnDash to apply a ‘course completion tag‘ and have the course completion tag ID included in the “course_completion_tag_id” parameter, a green checkbox will appear over a course once a member has completed it. Here’s how to find the ID to use for this.

To do this, just paste the [membc_course-grid-learndash-basic] shortcode into the WordPress content editor on a blank page, multiple times like this…

Here’s an example use of this shortcode you can copy as an example:

[membc_course-grid-learndash-basic membership_level="Silver" course_completion_tag_id="194" lms_course_id="587" course_link="#" course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info, here’s a link to the full documentation page on [membc_course-grid-learndash-basic]

---

Course Grid – Basic Version (No Page Builder) + LifterLMS

To display a course grid with LifterLMS and no page builder plugin, you’ll want to use the [membc_course-grid-lifterlms-basic] shortcode.

If you’re using LifterLMS to apply a ‘course completion tag‘ and have the course completion tag ID included in the “course_completion_tag_id” parameter, a green checkbox will appear over a course once a member has completed it. Here’s how to find this ID.

To set up a course grid with this, just paste the [membc_course-grid-lifterlms-basic] shortcode into the WordPress content editor on a blank page, multiple times like this…

Here’s an example use of this shortcode you can copy:

[membc_course-grid-lifterlms-basic membership_level="Silver" course_completion_tag_id="194" lms_course_id="1904" course_link="#" course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info on how to use this, here’s a link to the full documentation page on [membc_course-grid-lifterlms-basic]

---

Course List Shortcodes

You can use this type of shortcode to create a course directory page that displays all the courses that a member has access to with one course listed per row.

To list multiple courses on a single page, just repeat the shortcode and fill in the info for each course you want to list.

There are 6 different course grid shortcodes you can choose from based on the other plugins that you’re using. Click the name below to auto scroll to the example that you’re looking for…

If you’re using a page builder such as Elementor (we highly recommend), Visual Composer, Thrive Architect, etc. you can choose from the following examples…

• Page Builder Example
• Page Builder + LearnDash Example
• Page Builder + LifterLMS Example

If you’re not using any page builder plugin, you can follow one of these examples…

• Basic (No Page Builder) Version
• Basic Version (No Page Builder) + LearnDash
• Basic Version (No Page Builder) + LifterLMS

---

Course List – Page Builder Example

You can use the [membc_course-list] shortcode if you’re using Elementor or with any other page builder and no LMS plugin. Here’s how to set up a page like the above picture…

First, create a 1 column layout with Elementor (or other page builder) on a blank page.

We recommend you use the “Shortcode” Elementor block to place the shortcodes into. This will help avoid any paragraph spacing issues or any unwanted changes from happening.

Here’s an example of what this looks like when editing in Elementor…

Here’s an example use of this shortcode you can copy into each shortcode block:

[membc_course-list membership_level="Silver" course_completion_tag_id="198"  course_link="#" course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

Then just repeat to list multiple courses on a page.

For more info, here’s a link to the full documentation page on [membc_course-list]

---

Course List – Page Builder + LearnDash Example

If you’re using LearnDash with Elementor, or any other page builder plugin, you can use this shortcode example to display a directory of courses with a LearnDash progress bar below each course description.

If you’re using LearnDash to apply a ‘course completion tag‘ and have the course completion tag ID included in the “course_completion_tag_id” parameter, a green checkbox will appear over a course image once a member has completed it. Here’s how to find this ID.

To set this up, you’ll want to first create a 1 column layout with Elementor (or other page builder) on a blank page.

We recommend you use the “Shortcode” Elementor block to place your shortcodes into. This helps avoid paragraph spacing issues and any unwanted changes.

Here’s an example of what this looks like when editing in Elementor…

Here’s an example of this shortcode you can copy onto your own page to use:

[membc_course-list-learndash membership_level="Bronze" course_completion_tag_id="194" lms_course_id="587" course_link="#" course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info, here’s a link to the full documentation page on [membc_course-list-learndash]

---

Course List – Page Builder + LifterLMS Example

If you’re using LifterLMS with Elementor, or any other page builder plugin, you can use this shortcode example to display a directory of courses with a LifterLMS progress bar below each course description.

If you’re using LifterLMS to apply a ‘course completion tag‘ and have the course completion tag ID included in the “course_completion_tag_id” parameter, a green checkbox will appear over a course image once a member has completed it. Here’s how to find this ID.

To set this up, you’ll want to first create a 1 column layout with Elementor (or other page builder) on a blank page.

We recommend you use the “Shortcode” Elementor block to place your shortcodes into. This helps avoid paragraph spacing issues and any unwanted changes.

Here’s an example of what this looks like when editing in Elementor…

Here’s an example of this shortcode you can copy onto your own page to use:

[membc_course-list-lifterlms membership_level="Silver" course_completion_tag_id="198" lms_course_id="1904" course_link="#" course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info, here’s a link to the full documentation page on [membc_course-list-lifterlms]

---

Course List – Basic (No Page Builder) Version

If you’re not using any page builder plugin on your WordPress site, and no LMS, you’ll want to use the [membc_course-list-basic] shortcode.

To do this, you just paste the [membc_course-list-basic] shortcode into the WordPress content editor on a blank page multiple times like this…

Here’s an example use of this shortcode you can copy:

[membc_course-list-basic membership_level="Bronze" course_completion_tag_id="194" lms_course_id="587" course_link="#" course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info, here’s a link to the full documentation page on [membc_course-list-basic]

---

Course List – Basic Version (No Page Builder) + LearnDash

To display a course list with LearnDash, you’ll want to use the [membc_course-list-learndash-basic] shortcode.

If you’re using LearnDash to apply a ‘course completion tag‘ and have the course completion tag ID included in the “course_completion_tag_id” parameter, a green checkbox will appear over a course once a member has completed it. Here’s how to find this ID.

To set up a course list like this, just paste the [membc_course-list-learndash-basic] shortcode into the WordPress content editor on a blank page, multiple times like this to create your course library page…

Here’s an example use of this shortcode you can copy:

[membc_course-list-learndash-basic membership_level="Silver" course_completion_tag_id="194" lms_course_id="587" course_link="#" course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info, here’s a link to the full documentation page on [membc_course-list-learndash-basic]

---

Course List – Basic Version (No Page Builder) + LifterLMS

To display a course list with LifterLMS and no page builder plugin, you’ll want to use the [membc_course-list-lifterlms-basic] shortcode.

If you’re using LifterLMS to apply a ‘course completion tag‘ and have the course completion tag ID included in the “course_completion_tag_id” parameter, a green checkbox will appear over a course once a member has completed it. Here’s how to find this ID.

To set up a course list, just paste the [membc_course-list-lifterlms-basic] shortcode into the WordPress content editor on a blank page, multiple times like this to create your course library page…

Here’s an example use of this shortcode you can copy:

[membc_course-list-lifterlms-basic membership_level="Bronze" course_completion_tag_id="196" lms_course_id="1904" course_link="#" course_image_url="https://m4ac.vidsteps.com/wp-content/uploads/2018/01/course-photo-example.jpg" course_title="Your Course Title Goes Here" course_description="Insert a brief description of what a member will learn from completing this section of your membership site or delete this sentence if you don't want to include one."]

For more info, here’s a link to the full documentation page on [membc_course-list-lifterlms-basic]

---

Related Posts:

• Creating Your Course Library Page with Memberium’s Free Page Templates
• An Inside Look at Memberium’s New Page Templates and 24 Membership Site Page Examples
• How to Ghost an Image Block Based on Visitor Access