Iframe Based LearnDash Setup

This article describes the old LearnDash integration that is iframe based. We suggest you use the new API based method instead.

The LearnDash integration allows you to get courses, topics, lessons, and quizzes into your app.

You can restrict content based on login status, and incorporate a membership plugin, BuddyPress, gamification, and more.

Here is the simplest way to add LearnDash to your app:

  1. Install and activate the AppLMS plugin
  2. Create a course list page in your app

That's it! You can then customize as much as you like.

Setup

First install the AppPresser core plugin and theme as described in the  Getting Started docs here.

Make sure the LearnDash and App LMS plugins are installed and activated.

Visit the AppPresser => Settings page, click "Licenses" in blue. Enter your license key and save. (You can get your license key on your  account page.)

There are no other admin settings for this plugin.

Video Tutorial

Adding Courses To Your App

To add LearnDash to your app, all you need to do is create a page that displays your courses. The rest is taken care of.

1. Create your course list page

To add courses to your app, create a new custom page in your app customizer under custom pages => add new page.

Add the following code:

<ap-list wp="true" card="true" route="https://mysite.com/wp-json/wp/v2/sfwd-courses?per_page=10"></ap-list>

Modify the  per_page parameter to show any number of courses you like.

This will display your courses in a 2 column card layout. You can also modify the ap-list component to display them in a single column list like this:

<ap-list wp="true" route="https://mysite.com/wp-json/wp/v2/sfwd-courses" infiniteScroll="true"></ap-list>

To see sample code used in our demo app with a slider and title tags,  click here.

Add any other text or HTML code you like, then save. Next you need to add this page to your menu and rebuild your app.

2. Add the page to your menu and rebuild your app

Add your courses page to your menu under Menus => My Menu => Add Items, then save.

Alternative Course List Page

If you don't like the API based approach above, or you need more customization, you can use this WordPress based approach instead.

Create a new page on your WordPress site and add the LearnDash course list shortcode:

[ld_course_list]

Tip: You can use an SEO plugin to noindex this page so it doesn't show up to your desktop site visitors.

Next, visit your app customizer and go to Menus => Add Items => WordPress/External Links. Add the url to your course list page (using https) and save.

For information on adding icons and other menu customizations, please see the  menu documentation.

LearnDash Category Pages

In order to display your LearnDash courses based on their individual categories, then the following structure should work

<ap-list wp="true" route="https://mysite.com/wp-json/wp/v2/sfwd-courses?ld_course_category=xx" infiniteScroll="true"></ap-list>

Remember to change "mysite.com" to your actual site URL and the "xx" to the category ID.

Adding other LearnDash Pages

To add other LearnDash pages to your app such as Profile and Groups, add the url to your menu the same way as described above in the alternative course list page.

You can also add an individual course to your menu the same way. Just add the course url to your menu under WordPress/External Links.

Templates

This plugin uses custom templates for the app, along with custom CSS styling. You cannot use your desktop theme with the app.

To customize the templates, you can create a child theme and copy the template files in applms/learndash/templates. Copy them to a folder in your child theme named learndash: child-theme/learndash/