Directories

Directories form an integral part of WPLMS. The directories are no longer cookie and ajax based. Whole of the directories are now built on reactJS.

The directories leverage browser caching a lot, the member card views are saved in the browser session, which means that when you load the same member in the browser tab, it would not make any hit to your server.

At the same time if you make changes in your directory you will not notice the change. But if you just close the browser tab and open a new tab, you will see the updated results.

See below notice on how to edit directory pages

Elementor crashes while editing directory page

This is expected behavior. The Buddypress pages are not regular pages, hence Elementor fails to detect when these pages are set as directory pages. The tick is to disconnect these pages from the directory page by going to WP admin - Settings- BuddyPress - Pages. And then editing these pages in the Elementor.

By default on upgrading, you will not notice any change. To make the change you will need to set the directory layout to blank

After setting this, you will need to disconnect the page from BuddyPress.WP admin - Settings- BuddyPress - Pages, set the directory page to none and then add the Directory widget in the page.

Lets take a loook at what all changes have been made in the directories.

Directory is blank

Refresh the BuddyPress cache : Go to WP admin - Settings- BuddyPress - Save components.

Let us see what all has changed in the version 4 implementation of following.

The Course directory

In all previous versions the Course directory followed the BuddyPress templating system, it stored cookies for retaining data and sent those cookies in the requests to filter out searches and sorting. The problem with this approach is that it is slow and we are not at all using the Browser here for doing the complex jobs.

The version 4 implementation removes a lot of these barriers, to provide a much faster and flexible way of doing things.

To create any page a course directory simply edit the page with Elementor and drag the course directory Elementor widget.

After that you just need to configure the widget.

Two most improtant settings in this widget is Coruse block minimum width and number of course blocks to show in the directory in 1 page.

You can add following filters in the course directory widget.

Course Category
Course Levels
Course Locations
Any other taxonomy related to Courses will be automatically detected in the course directoryelementor widget
Instructors Filter, filter results by registered instructors in your site
Price filter, currently it supports Paid / Free, but in coming update, it will support range selection.
Course Duration, the maximum total duration of the course
Total number of students enrolled in the course
Course Start date, select by range
Course Seats : Maximum students allowed in the course
Badge Percentage : score students need to gain a badge in the course
Completion Certificate : If student will get a certificate of completion or not.
Passing Percentage : The passing score that you set for certificate of completion or not.
Drip Feed : Wheather drip feed is enabled or nor for the course
Course Retakes : IF the user can retake the course
Any other setting which adds additional information would automatically appear in the widget. For example : Batch enrollment would automatically appear if it is enabled in the batches addon. So using this filter would show all courses which require the user to enroll in a batch. Many other settings from the addons would automatically appear here.
Card Style This is the appearance

The loading icon is expected as this is a react template and Elementor does not provide all data to our template. This is a temporary issue while we find a way to resolve this. You can simply click on the menu icon on top right of your elementor edit screen and click on "view the page" in a new tab. Now you can make the changes in the widget and see those changes in the new tab.

Note while making changes if you are changing the card style, you may have to open the directory page again as the browser caches the course block views and changing block view in Elementor will not seem to impact the view in the directory.

There is no longer any restriction to keep 1 directory page, you can create multiple directory pages for courses or even prepare your page in Elementor and embed the directory widget in the page

The Members directory

The buddypress members directory . You can create unlimited members directory by simply pacing the members directory Elementor widget in any page. The members directory widget also supports Member Types.

Member types

Member types is a core functionality of BuddyPress. It allows you to sub categorize users in your site into sections. You can use member types for various departments of your school, university, or to categorize student vs instructor vs company or parents.

To create new member types you can go to WP admin - Vibebp - Settings - BuddyPress - Member types and add new member type.

You can use this member type for creating different directories in your site. Like a different members directory for Instructors, or a different directory for Students.

Lets see what all options are available in the members directory.

Total Number of members Number of members you want to display in one page of the members directory.

Width of member block Member blocks automatically adjsut based on availability of space. This minimum width sets how much space the member block takes. The maximum value of this width is set to 100% of the container size. So it will gracefully default to 100% of screen on mobile screens..

Member Type Restricit the directory to a specific member type.

PaginationShow pages on number of members, if you want to show more members. You may keep this turned off if you want to show top 10 students of a class etc.

Filters Member filters based on Profile fields. Only the profile fields which have auto link enabled, see below screenshot.

Preparing the course cards

See the video on how to prepare a good course card and use directory controls.