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.
An important concept to be aware of is there are two sets of shortcodes included.
-
Page Builder Shortcodes…
This group is to be used only if you are using any type of “drag and drop” page builder plugin on your site. We highly recommend you use the Elementor page builder plugin. These shortcodes can also be used within Visual Composer, Thrive Architect, Beaver Builder and others.
-
And Basic Shortcodes
(aka ‘No Page Builder’ shortcodes)…If you’re not using any type “drag and drop” page builder plugin with your WordPress site, this is the group of shortcodes you’ll want to use.
Here’s an example of what a “basic” shortcode looks like:
[membc_course-grid-basic]All the shortcodes in this group have the word “basic” added at the end of each name to differentiate them from the other group. The other page builder shortcodes don’t have the word ‘basic’ included in the names.
Here are some other main ideas to be aware of when using these shortcodes…
- Want to list multiple courses on a single page?
Just repeat the same shortcode multiple times on the same page and fill in the info for each course. - Not using LearnDash or LifterLMS on your site?
Use the standard “Course Grid” or “Course List” shortcodes to create your course library page. - Using LearnDash or LifterLMS?
You’ll want to use the LearnDash or LifterLMS versions of the shortcodes.
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
Allows you to display a 3×3 grid of courses that a member has access to. This displays 3 courses listed per row.
Course List
Allows you to display a directory of courses that a member has access to, with one course listed per row.
LearnDash
If you’re using LearnDash on your site, you’ll want to use the LearnDash course shortcodes. These allow you to display which courses a member has access to and their LearnDash course progress. You can display them in a Course Grid (3×3) format or Course List (1×1) format.
LifterLMS
If you’re using LifterLMS on your site, you’ll want to use the LifterLMS versions of the shortcodes. These allow you to display which courses a member has access to and their current LifterLMS course progress. You can display them in a Course Grid (3×3) format or Course List (1×1) format.
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…
If you’re not using any type of page builder plugin on your site, you can choose from the following examples…
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…
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]
SamCart features attractive, easy to implement sales and order pages, that integrate with InfusionSoft, so that the clients are recorded and stored for later email marketing, and product fulfillment. This article walks you through how to easily use SamCart with Memberium.
