WordPress Course Catalog Plugin - Use Case - How to Display Calendar With Courses and Organize Student Dashboard
Use Case - How to display calendar with courses and organize student dashboard
Note: This guide covers features from:
- WordPress Course Catalog plugin - This document uses version 1.3.6.
- CM Course Catalog Calendar add-on - This document uses version 1.0.7.
- CM Course Catalog Dashboard add-on - This document uses version 1.0.9.
- CM Course Catalog Form Builder add-on - This document uses version 1.0.7.
- CM Course Catalog Payments add-on - This document uses version 1.0.10.
- Easy Digital Downloads (EDD) - This document uses version 3.1.1.4.2.
Introduction
The WordPress Course Catalog plugin allows you to create a directory of courses, each with their own page.
Using the add-on Calendar, it is possible to display all upcoming courses in a calendar on a list view.
The add-on Dashboard lets you organize a student dashboard to let your users manage the courses they registered to.
Use Case Front-End
Use Case Assumptions
In this example use case guide we will consider how to display the courses as a calendar and how to organize a student dashboard.
We assume that you have already bought the WordPress Course Catalog plugin and add-ons, but not installed them yet.
It follows:
Installing the Plugin
The process is the same for all CM plugins and add-ons.
- Download the plugin from your customer dashboard.
- Log in to WordPress and navigate to the WordPress Admin → Plugins settings.
- Click on Add New.
- Activate it and add the license.
Learn more: Getting Started - Plugin Overview
Quick Recap
If you still have questions about how to create and organize courses on your website, then check this use case guide first:
In this use case guide we will focus only on the process of organizing the courses calendar and student dashboard.
Calendar and List Views
The CM Course Catalog Calendar add-on allows showing courses in the calendar/list modes. The students can easily pick up any convenient time and the courses available during the selected dates, and open the course for more information.
Settings
Let's start with the setting up of the add-on. Navigate to Admin Dashboard → CM Course Catalog Pro → Settings → Calendar Addon tab.
There you will find a few sections with settings.
General
In this section you can configure the base calendar settings:
- Search for open course [month] - Shows the number of month that the calendar will process to find an open course. The calendar will open a month with the first available course if found. If no courses are found the calendar will open for the current month.
- First day of the week - Set when the week starts. You can choose between Monday and Sunday.
Calendar start year - Choose the year from which the user will be able to see the courses.
Start year on the front-end - Open course in the new tab - If enabled, clicking on courses in the calendar will open them in a new tab.
Appearance
In this section you can configure the base calendar colors:
- Primary calendar color
- Course background color
- Course text color
- Month day background color
Calendar Labels
In this section you can configure the calendar labels:
- List view
- Calendar view
- No courses were found
When you finished configuring the settings, click the button Update at the bottom of the page to save the changes.
Course Appearance Settings
You can also edit the colors for each course in the calendar list. To achieve that, open any course in the editing mode, and find the metabox Course Calendar Background Color. Click the button Select Color to specify it, then click the button Update to save the changes.
Displaying the Calendar On the Front-end
To display the calendar on the front-end, you need to place the following shortcode on the needed page:
[cmcc_calendar_view]
For example, you can create a new page and add there a shortcode as it's shown on the screenshot below:
Shortcode Parameters
This shortcode has a set of parameters which you can use:
- category - Add multiple courses at once. Use the course slug and insert it into the brackets "..". Example: category="book-production,coding,mathematics,science"
- view - Show your courses in the calendar or the list view. Example: view="calendar" or view="list"
- custom-tax1, custom-tax2, custom-tax3, custom-tax4 - Display custom taxonomies. Works the same as with the parameter category.
- days-labels - Specify custom day labels and translate them into other languages. Default value is "Mon,Tue,Wed..". Example: days-labels="Sun,Mon,Tues,Wed,Thurs,Fri,Sat"
- mon-labels - Specify custom month names. Default value is "January,February,March..". Example: mon-labels="January,February,March,April,May,June,July,August,September,October,November,December"
- mon-short-labels - Specify custom month short names. Default value is "Jan,Feb,Mar,Apr..". Example: mon-short-labels="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sept,Oct,Nov,Dec"
The calendar is configured and published, now let's check the result on the front-end.
Calendar View
On the top left the user can switch between calendar and list views. On the top right the user can navigate through the months and years. Clicking on the needed course will open the course page. As it's been said before, each course can have its own color. The user can also see how many days the course will run.
Here's an example of the calendar with all available courses for the particular month:
List View
And here's how the courses for a particular month look like in the list view. Each course shows its start date.
Student Dashboard
The CM Course Catalog Dashboard add-on allows you to display a front-end dashboard for your students.
Settings
To configure the student dashboard, head to Admin Dashboard → CM Course Catalog Pro → Settings → Student Dashboard tab.
Find there a section Student dashboard. You will see there the following options:
Allow students to unregister - Let users unsubscribe from the registered courses. The user will see a button Remove for each course in his student dashboard.
Unregsitering from the course Student Dashboard tabs - Here you can set up the tabs which will be displayed in the student dashboard. For each tab you can define the title and the content. The content area accepts HTML and shortcodes (even from third-party plugins). Click the link +Add tab for adding new custom tabs. Drag and drop the tabs to define their positions.
Managing tabs of the student dashboard
By default, you can see there 3 tabs:
Profile
By default, this tab contains the shortcode [cmccdb_edit_profile] provided by the CM Course Catalog Profile Builder add-on. This tab shows the profile fields filled by the user. Above the custom fields, there are displayed the fields filled in the EDD cart while purchasing (first and last names, email and username). Learn more about Profile Builder.
Profile tab example:
Purchases
By default, this tab contains the shortcode [purchase_history] provided by the payment add-on Easy Digital Downloads. This tab shows all purchases made by the user, including purchased courses.
Purchases tab example:
Courses
By default, this tab contains the shortcode [cmcc_user_courses] . This tab shows all courses that the user got registered to, their details and statuses.
Courses tab example:
Displaying Student Dashboard On the Front-end
There are two ways how to display student dashboard on the front-end.
The first way is to manually place the shortcode [cmcc_user_profile] in any place you want (page, post, etc).
The second way - head to Admin Dashboard → CM Course Catalog Pro → Settings → General tab. Find there the option User profile page. You can choose there any page, and the shortcode will be added to that page automatically. We recommend to choose an empty page, as if you have any other content on that page - it will not be displayed on the front-end, there will be displayed only the student dashboard.
End Result
Following instruction found in the plugin and guides, you should be able to display the courses as a calendar and organize a student dashboard.
Use Case Front-End
 |
More information about the WordPress Course Catalog Plugin Other WordPress products can be found at CreativeMinds WordPress Store |
 |
Let us know how we can Improve this Product Documentation Page To open a Support Ticket visit our support center |