# About WPLMS is the most advanced Learning management system built for WordPress. The version 4 is a complete re-creation of our WPLMS Platform. We call it a platform because it is an entire system built using the theme and the plugins. Here is a short list of features included and possible in the theme. Below is the complete feature list of the Theme and plugins. ## Included Feature List in WPLMS | Feature | Description | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | PWA | Progressive Web App . Allow users to install the Progressive web app. | | Offline | Works offline even without internet based on cached data, images, videos\* and more. Instant load speeds of 200ms ! | | Mobile, DeskTop/ Tablet App | One Click generation of App from within the Theme options panel. One App for Administrator, Instructors, Students and any custom role of your site. | | Courses | Create courses in WPLMS. Include sections, units, quizzes, assignments with grading options. | | Live Chat | Inbuilt Live Chat with other members online in the site. | | Real Time Notifications | Notify users in realtime of the activities happening on site. Like : Student added to course, Instructor sends announcements etc. | | Push Notifications | Push notifications even when offline (Safari iOS not supported as of now) | | Course Layouts | Create Layouts in Elementor/Divi\* for courses. Different layouts for courses of different categories or individual course layout also possible. | | Activity | Activity Tracking of student. Categorised per course, quiz, assignment and other modules. | | Reporting | Create customised reports, schedule reports, email reports. Standard reports per course, quiz exist. | | Certificates | Design & Award your certificates. With Student, Instructor information with unique code validation. | | Quizzes | Create Quizzes in WPLMS. 2 Types of quizzes - Static question set, Dynamically generate question set from a pool of questions. Supports, Manual evaluation, automatic evaluation and re-evaluation of quizzes. | | Assignments | Create Assignments in WPLMS. Assignments are like homework, a problem statement and a manual evaluation. Users can upload assignments. Instructor Remarks & corrected uploads with marks. | | Badges | Award badges on Course completion. Assign a badge image and a title. | | Units | Create Units in WPLMS. Unit can comprise of Video, Audio, Documents, PDF, Text and | | Sections | Create Sections in WPLMS. A section can comprise of units, quizzes, assignments. | | **Font End Course Creation** | The powerful drag drop Course creation module for Instructors. Easy to use and all settings in 1 place. | | Personal/Instructor Notes | Notes module for units. Students can save personal notes. Instructor can leave notes for students besides the content. | | Discussions | Public discussions on Units in a course. | | Ask Instructor | Students can ask questions and notify instructor to respond on the messages. | | Bulk add Students | Bulk add students into courses. | | Questions | Create Questions in WPLMS. 8 Type of questions. Match Answers, Sort Answers, Select Drop down, Fill in the Blank, Multiple choice single correct, Multiple choice multiple correct, Text and Essay type. | | Questions Bank | Pull out questions in a Quiz from a Pool of questions | | Bulk Import Questions | Import questions in bulk. Easily import questions from a CSV and import questions in bulk. | | Code Questions | Self evaluation of Code questions. | | Sell Courses | Sell Courses via WooCommerce or EDD. All payment gateways supported by WooCommerce are supported. Manual payment methods, COD, Bank Account also accepted. | | MemberShips | Sell Courses via Memberships. Membership plugins required : Pmpro, Restrict content pro, WooCommerce Memberships. ARMember, WishlistMember and more. | | Practice Quiz | Allow students to do sample quizzes. | | Course bundles | Sell bundles of Courses. Group courses into bundles and sell for single price via WooCommerce, EDD. | | Course Subscriptions | Set a monthly, yearly, weekly price for Courses. | | Categories | Categorise the courses. Show categories and Filter courses by categories. | | Expire Courses | Set a maximum duration within which the courses should be completed | | Certificates | Assign certificates to Courses/ Users | | Manual Assign Courses | Assign Courses manually to Students.Notifications/Emails are sent. | | Manual Course Subscription | Manage Course subscription time manually, course administration area. Notifications/Emails are sent. | | Course Announcements | Send Announcement for the course. Displays highlighted in Students Profile. 1 announcement per course. Notifications/Emails included. | | Course News | Course's own blog. Instructor can create news and students will get notified by email/push/internal notifications. | | Messages | Private messaging for Student interaction with Instructors or other students. | | Notifications | Internal notification system. Users see a notifications panel. | | Friends | Users can add friends and friends can see each other's activities in activity module. | | Followers | Users can follow each other and get notifications when the followed user takes actions or comes online. | | Groups | Create groups, student groups, Instructor groups and more. | | Bulk Course Messages | Send Bulk message to Course students. All students, selected students or based on course status and expiration. | | Course Activity | Track all activity that happens in the course. Student's activity inside the course. | | Manual Evaluations | Manually evaluate courses, quizzes, assignments or re-evaluate existing one and instructor can leave remarks. | | Emails | Customise email appearance and content right from the WP admin panel. | | Custom Registration Forms | Create unlimited registration forms with various options. Registration forms for member types, user roles, filled information directly inside the profile. | | Notes | Create and Maintain notes site wide. Student can create note in the course pursue screen. | | Email Schedule | Send reminder emails to user before course expiry, when new content is unlocked in drip courses or when they've not logged in to the site for some time. | | | | ## Extendible Features | Feature | Description | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Members Directory | Customisable Sortable members directory. Create unlimited member directories for users in your site. Categorise users based on Member types. Show filter options based on Member type, member profile fields. | | Member Types | Categorise members of your site into Member Types. | | Member Cards | Create Cards for various members. Create Cards for Member types, Card for specific member. | | Vibe Drive | A Drive option where users can upload files and share among users. Option to sync with DropBox\*, Google Drive \* and S3\* \[works with version4 only] | | Vibe Calendar | A Calendar first Personal calendar for members of your site. Sync. with Google Calendar\* . Create events, invite members. Set location and drag drop on calendar. \[works with version4 only] | | Vibe KB | Knowledge base component. Create articles and share with members who can edit. Public knowledge base. \[works with version4 only] | | Groups Directory | Customisable Sortable Groups directory. Create unlimited group directories for users in your site. Categorise users based on Member types. Show filter options based on Member type, member profile fields. | | Group Cards | Create Cards for various groups. Create Cards for Group types, Card for specific group. | | Group Types | Categorise groups of your site into Group Types. | | Vibe Helpdesk | BBPress on ReactJS. Fast and works in app. \[works with version4 only] | ## Premium Features \[ available via Paid Addons ] All prices are one time, you will get a license key which you need to activate the addons. | Feature | Description | Price | | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | | Instructor Booking | Book instructors, slots, rate instructors, auto-connect Video conferencing. Sell slots via WooCommerce, EDD etc. Group Bookings, Cancellation, Re-scheduling. Calendar based directory search. Search using Custom profile field data. | $39 | | Classes/Batches | Sub Group Course users into Groups. Create multiple variations of Course based on start date, Instructor and other variables. Allow users to buy batch on a per seat pricing and add students in their batch. Create variation of same course for Batch. Restrict batch users to view only batch courses throughout the site. | $29 | | S3 \[Pending V4 update] | Upload content on Amazon S3. Works with assignments, audio, video and documents. | $29 | | Variable Pricing \[Pending V4 update] | Sell course with variable pricing options. Pricing variable for Certificate , for Badge, Subscriptions (per month, per year) and batches. | $19 | | Unit Timings | Time your students based on actual time spent in course. Restrict unit access based on time spent on unit. | $29 | | Parent User | Parents/Manager gets a special dashboard to track progress and other reports about his wards. | $19 | | Attendance | Track attendance of student in various courses. Comes with ID Card builder and QR Code reader in Mobile App to auto-mark attendance on scan via mobile app. | $19 | | Phone Authentication | OTP Based Login and registration using firebase (50 sms/minute limit under free tier) | $19 | | MailChimp | Integrate Mailchimp. Auto-generate and sync user lists with courses. Auto-create segments for course status and expiration value. | $19 | | ConvertKit | Integrate ConvertKit. Auto-generate and sync user lists with courses. Auto-create segments for course status and expiration value. | $19 | | Instructor Memberships \[Pending V4 update] | Create membership plans for Instructors. They pay based on membership payments. | $9 | | Zapier Integration | Integrate WPLMS with Zapier | $19 | | WPLMS SMS \[Pending V4 update] | Integrate Twilio SMS service with WPLMS. | $19 | | WPLMS Push Notifications \[Pending V4 update] | Send personalised push notifications on various trigger points in theme. All 32 touch points supported and option to send individual user notification as well. | $29 | | Custom Learning Paths | Create Programs spanning across courses and various other activities. Enable Program certificate. Optionally, give more than 1 path to the user to achieve their target. | $29 | ## More Features \[ available via Free Addons ] | Feature | Description | Addon | | -------------------------------- | -------------------------------------------------------- | ---------------------- | | BigBlueButton Video Conferencing | Conferencing services via BigBlueButton | Vibe BBB | | Zoom Conferencing | Conferencing Solutions Via Zoom | Vibe Zoom | | Certificate Builder | Drag drop certificate builder | WPLMS PDF Certificates | | Jitsi Conferencing | Conferencing Solutions Via Jitsi | Vibe Jitsi | | Front end blog posts | Enable users to post blogs using front end | vibe posts | | Deep Analytics | Google analytics tracking of various activities in WPLMS | WPLMS GA | ### Browser Status | Browser | Operating System | Status | | ---------------------- | ------------------------------- | --------------- | | Chrome | Windows / Mac / Linux / Android | Flawless PWA | | Safari | Windows / Mac / Linux | Working, PWA | | Opera | Windows / Mac / Linux | Working | | Firefox | Windows / Mac / Linux | Working, No PWA | | Internet Explorer Edge | Windows | Working | Unsupported Browsers include : IE 11 & Below ( No support from WP ) ## Improved About Section {% embed url="" %} ### # Documentation Structure ## How this documentation is structured. This documentation is borken down into 5 different parts. {% content-ref url="/pages/-MJF8ND7zSdPapJOGISp" %} [Installation](/installation/installing-wplms-on-a-fresh-wp-install) {% endcontent-ref %} {% content-ref url="/pages/-MJFQqLyU3FO2h2aSP82" %} [Administrator Guide](/administrator-guide/beginners-guide) {% endcontent-ref %} {% content-ref url="/pages/-MJGE1eJoh6oPp6YyO87" %} [Instructor Guide](/instructor-guide/instructor-guide) {% endcontent-ref %} {% content-ref url="/pages/-MJGEBpBqXYYP43iD\_Nu" %} [Student Guide](/student-guide/student-guide) {% endcontent-ref %} 1. Installation & Setup 2. Administrators Guide 3. Instructor Guide 4. Student Guide 5. Developer Guide Terminology used in the documenation * **WP Admin** Wordpress Administration area. [screenshot](http://wplms.io/documentation/assets/img/wp_admin_screen.png) * **Paths like : WP admin - Plugins/ WP Admin - VibeBP** Left side menu tab in the Wordpress Administration area. [screenshot](http://wplms.io/documentation/assets/img/wp_admin_links) * **Customizer / Theme Customizer** Wordpress Customizer scren. [screenshot](http://wplms.io/documentation/assets/img/customizer_screen.png) * **WPLMS ABout** The WP Admin - Dashboard - About WPLMS. [screenshot](http://wplms.io/documentation/assets/img/wplms_about_screen.png) * **WooCommerce** Wordpress Administration area. * **Course Admin / Course Administration** Wordpress Administration area. * **WPLMS Customizer Plugin:** This is a blank plugin so you can add your custom code here. This Plugin never receives updates, so your custom work will be safe here **Download the Zip from here and add in wp-admin > Plugins > Add New > Activate** {% file src="/files/-MP9FAkmfquwcwX1dyml" %} WPLMS Customizer Plugin {% endfile %} Throughout this documenation we will be following symbols, to highlight the importance of these sections. They are specifically placed on the pages to gain user's attention. {% hint style="info" %} **Information Block** Useful information regarding a content block {% endhint %} {% hint style="warning" %} **Warning Block** Things of importance. Place where user can make a mistake. {% endhint %} {% hint style="danger" %} **Error Block** Places where you might face an error and rectification steps. {% endhint %} {% hint style="success" %} **Help Block** If you need further help, where you contact us. {% endhint %} # Changelog Change log for the Theme. # Installing WPLMS on a Fresh WP Install Installing WPLMS requires a working WordPress site. So, first you need to setup WordPress on your server. You can refer this link on how to setup WordPress on your server. **What is a Fresh WordPress site ?** A Fresh WordPress site is a WordPress site with no content inside it. A fresh wordpress site will have 1 page with title Sample Page, 1 post with title Hello world !. One plugin Hello Dolly and Default WordPress Themes like TwentyTwenty. {% hint style="info" %} You can also reset an exsiting WordPress site to get a fresh wordpress site. [Learn how to reset ›](https://www.wpbeginner.com/wp-tutorials/how-to-restart-a-wordpress-site-reset-wordpress-the-fast-way/) {% endhint %} ### Hosting Requirements and Recommendations for the WPLMS Theme WPLMS is an advanced WordPress theme. It provides a complete framework for building educational sites, so comparing WPLMS with any other regular WordPress theme is like comparing apples to oranges. WPLMS uses popuplar plugins maintained by the WordPress core team like the BuddyPress, WooCommerce , and BBPress. Out of these only BuddyPress is the required plugin. If you need to sell courses you will be required to install WooCommerce. If you need Discussion forums on your site, you will need to install BBPress. The Hosting recommendations posted by these plugins are the basis for WPLMS Hosting recommendations as well. * **PHP Version** 7.2.1 \[tested upto version 8.3.9 as of 1st December 2024] * **Mysql/MariaDb Version** 5.6+/10.1+ * **Upload Limit** 10 MB or more * **PHP Memory Execution Limit** 128 MB or more * **PHP Time Limit** 300s * **PHP Post Max Size** 128 MB or more * **PHP Max Input Vars** 2000 * **PHP extensions required** dom,gmagick,SimpleXML,ssh2,xml,\ xmlreader,curl,date,exif,filter,ftp,gd,hash,iconv,imagick,json,libxml,\ openssl,pcre,posix, sockets, SPL, tokenizer, lib,mbstring,mysqli. {% hint style="info" %} The Upload limit is required for the theme even before you can begin uploading. Otherwise you will see an error “The link you followed has expired.” while uploading the theme.[Learn how to increase upload limit ›](https://kinsta.com/blog/wordpress-maximum-upload-file-size/) ![](http://wplms.io/documentation/assets/img/WordPress-Link-Expiration.png) {% endhint %} As a principle we are not affiliated to any hosting company. So the recommendations posted here are unbiased and based on feedback we collected from our users. Although any hosting plan should work for WPLMS. A [VPS](https://en.wikipedia.org/wiki/Virtual_private_server) or above plan provides better compatibility and lesser issues in the long run. Sharing hosting with everything unlimited usually do not work out good because the server is shared among many entities. From our observation : WPEngine, HostGator, KnownHost, OVH, DigitalOcean and SiteGround are good hosting providers. This list by no means is an exhaustive list, you are free to try other options and if they work great you can help us in updating this list. Just send out an email [here](https://themeforest.net/user/vibethemes/) ### Uploading the theme Uploading the WPLMS theme is just like any other theme. Following are the steps you can follow to upload the theme. **Downloading the theme** Download the WPLMS WordPress theme from your Themeforest Account.**Log in to your WordPress Admin \[a.k.a WP Admin]** ![themeforest screenshot](http://wplms.io/documentation/assets/img/download_theme.png) Login to your WordPress administration panel. You can simply append wp-admin to your site's url. So if your site is ABC.com , ABC.com/wp-admin is your WP Admin area.**Go to Apperance - Themes - Upload** ![wp screenshot](http://wplms.io/documentation/assets/img/wp_admin.png) Locate the Apperance in the left menu. Click on it, locate the themes sub-menu item, click on it. Locate the Add new button on your screen.**Upload the Theme** ![wp screenshot](http://wplms.io/documentation/assets/img/add_new_theme.png) Click on Upload Theme button. A Upload form will appear. Drag and drop the theme downloaded in the previous step here. Click on Install Button ![wp screenshot](http://wplms.io/documentation/assets/img/select_install.png) If you see the below error while uploading the theme, it most likely means that yoursame server is restricting the upload. ![wp screenshot](http://wplms.io/documentation/assets/img/WordPress-Link-Expiration.png) The possible reasons for above are : 1. Server Upload limit less than 8MB. 2. PHP Zip library not installed 3. File permissions incorrect(Folder Permissions should be 0755 and file permission should be 0644) 4. WordPress incorrectly configured. 5. Previous attempt of uploading the theme failed due to network issues. The best course of action in all above cases is to contact your web host. For the last step "previous failed attempt", you can login via FTP and locate for wp-content/themes/wplms folder and remove it. ### Setup Wizard On uploading and activating the theme, you will see a setup wizard automatically taking control of the things. This is expected and recommended method of installing the theme. The Purpose of the setup wizard is to configure a lot of settings automatically and avoid the hassle of manually configuring the theme. **Selecting an Installation Type** We have categorised the WPLMS theme usage into 4 broad categories : Instructor, Academy, University and MOOC (massive open online courses ). We've Demonstrated the theme into above broad categories and selected a feature set for each of these categories. However, this is just a classification factor and during the course of setup wizard you are free to enable recommended feature, designs for the type of installation you are selecting in this step. Even after the setup has been completed you can always re-run the setup wizard and enable disable features which you may need later on. For example : [Enabling BigBlueButton Meetings in existing site.](https://www.youtube.com/watch?v=kmIa8kfTxjA)
![themeforest screenshot](http://wplms.io/documentation/assets/img/setup_wizard.png) You will also see configuration checks and file permission checks which indicate any potential problem that may arise during the setup wizard. Mouse over to see more details. It is always better to make sure there is no failed configuration and file permission checks. However, sometimes failed configuration is disaplyed when WordPress is unable to detect them, in such cases these can be ignored. **Select a Demo Style** If you want to install a Theme Demonstration \[Demo] then click on the image to select it. When a Demo installation is selected, you will see a checkmark over it. To switch to another demo click on its image select it. To see how the demo works, click on the pop-out icon and you can go through the demos. Choosing latest demos is always a good idea as they have better design and the import wizard has been tested thoroughly for the demos. You can skip this step from the bottom skip option to not install any content or demo style. The images on this screen require an active internet connection, if you do not see images then please check your internet connection. ![themeforest screenshot](http://wplms.io/documentation/assets/img/theme_selection.png) Below the demos, you will find import content section. This expects a upload file to use as a demo style. We will come back to this area in later sections. If you have an existing WPLMS site or you are developing a WPLMS site on your local computer. You can use the WPLMS Export wizard to take out the export zip from your site and import that zip file here. **Select Features for this Site** In this area you select features for your site. To select a feature click on it and a check mark would appear over it. Click on it again to remove the check mark. Some of the features will come pre-selected based on the demo style you've selected in previous step. ![themeforest screenshot](http://wplms.io/documentation/assets/img/wplms_features.png) ### Authenticate and setup updates Authenticate your purchase by either authenticating from Envato account or by entering purchase code. Authenticating with Envato account also sets up the theme for auto-updates. Otherwise you can authenticate again from WP admin - WPLMS - Getting started section. This is also required to download the plugins in the next step. Hence you will not be able to skip this step and proceed to the next step in installation. ![themeforest screenshot](http://wplms.io/documentation/assets/img/auth.png) **Item Purchase code.** How to locate your item purchase code : [Link](https://wplms.io/support/knowledge-base/how-to-find-wplms-theme-purchase-code/) ### Installing Plugins The theme comes with a required and recommended set of plugins. Note that recommendations are good to have but not absolute necessity for the theme to work. The required plugins for the theme to work as advertised are BuddyPress , WPLMS and VibeBP. Based on your selection of previous "Features" step you will see the install plugins options here. Note that this is a sub-set of recommended plugins. Post installation you can view the complete set of recommended plugins from WP admin - Appearance - Install plugins section. ![themeforest screenshot](http://wplms.io/documentation/assets/img/install_plugins.png) You need an active internet connection to download these plugins. The plugins are hosted on Amazon servers and they are always available on the internet. **Ajax Error while installing plugins.** You may see some plugins returning status of ajax error. Such messages are safe to ignore as the plugin is trying to take you away from the installation wizard and we stop it from doing so. **Failed Plugins.** In case you see a failed error message, this means the plugin installation failed. It means the rest of the setup process may face further issues. In such cases, if the plugin is not a required plugin **\[BuddyPress, WPLMS & VibeBP]** you can still proceed with the installation. If it is a required plugin then download the plugin manually and install it from the WP admin - Plugins add a new screen.
In case you see failed error messages, you can follow these direct links for plugin downloads for required plugins : 1. BuddyPress: [Download link](https://downloads.wordpress.org/plugin/buddypress.6.2.0.zip) 2. WPLMS : 3. VibeBP : 4. Vibe-Helpdesk : 5. Vibe Drive : 6. Eventon : 7. Revolution Slider : 8. Layer Slider : 9. Visual Composer : 10. Vibe Zoom : 11. Vibe BigBlueButton : 12. Js Composer/Wp Bakery : 13. Vibe Jitsi : 14. Vibe Earnings : 15. Vibe Blogs : Copy and paste above links in the browser after replacing XXX with the WPLMS purchase code and you will be able to download the plugin files. You'll need to upload at WP dmin - plugins - add new and activate. Once the install and activation of the plugins is complete. Reload this page and you will see the updated status of the plugins. {% embed url="" %} ### Required Pages This step setups up various pages and layouts in the theme. This is one of the required steps we advise everyone to follow even if you are not installing any demo content. If the pages are already installed you will see the checks in green color. On fresh installation they'll appear as faded. ![themeforest screenshot](http://wplms.io/documentation/assets/img/required.png) ## Installing Sample Data The most important step for installing demo content. Note importing sample data is going to put data into your site. So, you can selectively import data into your site as well based on your requirements. We advise to install all content for a fresh WordPress setup to avoid any issues and output look similar to the demo. You will see many sections to import and this is a time consuming process. Content is downloaded from the demo and from our Amazon servers and imported in your site. This is how the import content screen looks like.![themeforest screenshot](http://wplms.io/documentation/assets/img/demo_content.png) If your screen does not appear like this and there is an error in red. It means that your server was unable to load the demo content file which is uploaded in our Amazon servers. This could be a temporary network issue and you can reload this page to load the data. Or try after few minutes to reload this page and load the data. In case the issue persists, the only alternative to this situation is to upload the content manually. **Export package download links** 1. Academy Demo : [Download link](https://demos.wplms.io/academy/wp-content/uploads/export_demos/academy.zip) 2. V4 Base Demo : [Download link](https://demos.wplms.io/wp-content/uploads/export_demos/chi.zip) 3. Demo 10 : [Download link](https://demos.wplms.io/demos/demo10/wp-content/uploads/export_demos/demo10.zip) 4. Demo 6 : [Download link](https://demos.wplms.io/demos/demo6/wp-content/uploads/export_demos/demo6.zip) 5. Demo 14 : [Download link](https://demos.wplms.io/demos/demo14/wp-content/uploads/export_demos/demo14_export.zip) 6. Demo 1 : [Download link](https://demos.wplms.io/demos/demo1/wp-content/uploads/export_demos/Demo1.zip) 7. Demo 17 : [Download link](https://wplmsupdates.s3.amazonaws.com/demodata/demo17.zip) 8. Learning Center Demo : [Download Link](https://demos.wplms.io/learningcenter/wp-content/uploads/export_demos/learningcenter_export.zip) Unable to see "Posts","Pages" in import content. You need to download the Zip files of our demos from below links and go back to step 1 "Select a demo style", click on this step on the left menu and upload the downloaded zip file from above links.
{% hint style="info" %} Nothing works ! no amount of refreshing works. Follow this guide : {% endhint %} If you are unable to download the slider, check FAQ section for direct link for sliders. ### Video Walkthrough Video walkthrough of how to install WPLMS verison 4 on a blank WordPress site. {% embed url="" %} ## FAQs FAQ's common mistakes which might happen during the installation. ### Missing Sliders Demo1 Slider {% embed url="" %} Demo2 Slider {% embed url="" %} {% embed url="" %} {% embed url="" %} Demo3 slider {% embed url="" %} Demo4 slider {% embed url="" %} {% embed url="" %} Demo5 Slider {% embed url="" %} Demo 6 slider {% embed url="" %} Demo 7 Slider {% embed url="" %} Demo 8 slider {% embed url="" %} DEMO 9 Slider {% embed url="" %} {% embed url="" %} Demo 17 Slider download links {% embed url="" %} {% embed url="" %} {% embed url="" %} ### Direct XML import here are direct XML import files for the demos #### Demo 2: {% file src="/files/-MkB5oR9ywL7qZqQ9T6o" %} demo2.xml {% endfile %} #### Demo 3: {% file src="/files/-MkB6T39qkNau0CPhmL\_" %} demo3.xml {% endfile %} #### Demo 4: {% file src="/files/-MkB6cXtkCNaPVH6vq7h" %} demo4.xml {% endfile %} #### Demo 5: {% file src="/files/-MkB6pC9rVxHhNltv1KB" %} demo5.xml {% endfile %} #### Demo 6: {% file src="/files/-MkB6xqPXaBNPjjPbhCv" %} demo6.xml {% endfile %} #### Demo 7: {% file src="/files/-MkB7Zu0iruVtFhwYkm3" %} demo7.xml {% endfile %} #### Demo 8: {% file src="/files/-MkB7p5WL6\_ArTzEJYza" %} demo8.xml {% endfile %} #### Demo 9: {% file src="/files/-MkB8-ssGktqDBUGWn2u" %} demo9.xml {% endfile %} #### Demo 10: {% file src="/files/-MkB8F8lHfUuAcxcfMm5" %} demo10.xml {% endfile %} #### Demo 12: {% file src="/files/-MkB8YggkHcJqEFHUu5x" %} demo12.xml {% endfile %} #### Demo 13: {% file src="/files/-MkB8oAQdmI2UVgJGzCh" %} demo13.xml {% endfile %} #### Demo 14: {% file src="/files/-MkB8yU81MHyo3Esv4vo" %} demo14.xml {% endfile %} #### Demo 15: {% file src="/files/-MkB9FMmY-E2Lr2XIi6x" %} demo15.xml {% endfile %} #### Demo 16: {% file src="/files/-MkB9ZK0TCtocrlH4ES6" %} demo16.xml {% endfile %} #### Demo 17: {% file src="/files/-MkB9hGCvaSUFnBM6\_JM" %} demo17.xml {% endfile %} # Upgrading from a 3.x or an older WPLMS Version. The WPLMS has changed a lot in verison 4.0. Consider WPLMS 4.0 a complete rewrite in terms of User experience, UI and technology. If you understand how internet evolves you'll understand that this change was an absolute necessity. We do realise we can't please everyone, even the best of the ideals fail at [this](https://www.youtube.com/watch?v=oeqPrUmVz-o). **Why 4.0 ?** A Scalable & Blazing fast LMS & Community site, which can be ported into a mobile app. A single App for Students, Instructors, Sellers, Administrators, Staff, Companies, Managers, Chairman and any other user. App which runs on Mobile, Tablet and Desktop and looks equally good. 4.0 works on a simple concept : Use more browser than the server. In short it will save you on your server expenses. {% hint style="info" %} Follow Web.dev a project by Google. The sites need to load under 4 seconds to be not categorised as "Poor".[Learn categorisation. ›](https://web.dev/vitals/) {% endhint %} {% hint style="info" %} Optimising TTFB : Time to First Byte Optimisation [Learn what is TTFB. ›](https://web.dev/time-to-first-byte/) {% endhint %} The 2020 is predicted is an year of Speed. The dynamics of the web has changed. There are more important terms which are missed in WordPress optimisation. A faster loading site is the best UX ! ### What has changed in the WPLMS 4.0 ? There are a lof of changes in the WPLMS 4.0 framework. But to summarize here's a list of big impact changes. **The Login system** WPLMS no longer uses WordPress login system. The WordPress login system is a cookie based authentication which verified by database sessions. The WPLMS 4.x series uses a JWT based authentication. Unlike default WordPress implementation where you'll notice a drop in server performance as the number of logged in users increased, the JWT makes sure the server performance remains same.[Learn more](https://wp-rocket.me/blog/difference-json-web-tokens-vs-session-cookies/). Any third party plugin which relied on WordPress login, would no longer work. The logins are now triggered by the browser so the server renderes a static page and javascript detects if the user is logged in to the site and then logs the user in. You may be able to observe this on page reloads at the login screen. \ \ **Merging of Core Plugins** The core plugins Vibe Course Module, Vibe Customtypes, Vibe Shortcodes, WPLMS Dashboards, WPLMS FrontEnd, WPLMS Assignments are all merged into 1 single plugin "WPLMS Plugin" \[[screenshot](https://prnt.sc/u3tyzc)]. The WPLMS Plugin requires VibeBP plugin which is the web app framework for BuddyPress. **No jQuery & Cache Ready** The jQuery dependency has been removed. All javascript is written in plain core javascript or in ReactJS. The benefit is that it can be easily loaded in defer mode. Which has a big impact on page load speed. **Page Builders for Profile/Course/Group/Directories Layouts** To create a flexible layouts and add custom information, we needed to use a flexible system for creating Course styles, profile styles and more. In 3.x or below we were using hard coded templates for creating designs for profiles, directories, courses in 4.x series we have Page builders doing this. You can create unlimited layouts and set layouts on per element basis as well. Currently Elementor is supported but all content is built using shortcodes, so we can integrated with your favorite page builder in future. **No more tabs** The Profile Tabs are gone. The Course tabs are gone. Elements which relied on server to generate dynamic content (per course, per members) are removed. Because these pages are dynamically generated for each member, the servers can not cache these pages as static. All this information exist in the members area. **No Course Status, No Create Course Page** Two core settings are no longer required. The users now create and manage courses from their Profile area. As the profile area would be converted into the Web/Mobile App, this provides users a consistent experience accross mobile and web. **New Members Area** The members area which loads in the profile when you are logged in to the new WPLMS (VibeBP). It is a fully customisable area and using menus and dashboards you can load different menu items, different widgets based on user role/capabilities. **Menus & Organisation** The Profile navigation is now managed from WordPress Menus. No longer need any code or third party plugin. **No Public Activity directory** We feel that activities is one of the most important part of WPLMS and any community site. WPLMS uses activities for generating reports and tracking a lot of information. Making this sensitive information public is a huge drawback. So, only the administrator can load the site wide activity in his members area. **Trimming and Extending BuddyPress** BuddyPress is "The" best membership plugin in the world. However, we felt that in some cases it went overboard in UX and in some cases it lacked. Based on our study we came out with the best possible case which can be used for education sites without any compromise on Speed. These are most notably : Static profiles for Public, Attachments in Activity, Improved Messaging, a Followers component, improved groups component and dynamic directories . **Using Social Logins & RealTime Communication via Firebase** There is no realtime communication inbuilt into WordPress or BuddyPress. The 4.x series comes with optional inbuilt firebase integration for Live chat, RealTime Communication and Social Logins. So,if student is online and an Instructor adds the student in a course, he gets a real time notification. In future upgrades we'll be using firebase for background sync, push notifications and machine learning implementations as well.
## Updating the theme To update the theme, you need an Envato / Themeforest account and a valid purchase. Although having an active support is not required, we certainly recommend users to ensure their support is active. You can use this link to verify if your Support is still active. You can also use WPLMS v4 theme with v3.9 plugins. **Verify Active Support**Enter your item purchase code ![themeforest screenshot](http://wplms.io/documentation/assets/img/support_period.png) **Authenticating Update** To Update the WPLMS theme, just go to WP admin - WPLMS (options panel) - Getting started section. Click on the large Authenticate button. If you see *Re-Authenticate* then also we recommend you to click on it Authenticate your purchase from Envato. You do not require active support to update the theme ![themeforest screenshot](http://wplms.io/documentation/assets/img/oncigure_updates.png) **Update the Theme** Go to WP admin - Updates section. If you do not see update for the theme in theme updates section. Click on check again. ![wp screenshot](http://wplms.io/documentation/assets/img/update_notice.png) Select and update the theme. ### Setting Up Plugins {% hint style="danger" %} On activating the verison 4 of the theme. you will land on the about page of the theme.**Do not ignore the big red button.** {% endhint %} To install the plugins in version 4 you need to add your item purchase code or authenticate in the Setup Wizard. Click on the big red button in the WPLMS About section. You'll not be able to install any WPLMS v4 plugins without entering the purchase code in the big red button. All plugins in WP admin - Appearance - Install Plugins will show failed to install message in the next step. \[[screenshot](http://wplms.io/documentation/assets/img/error_plugin_install.png)] ![themeforest screenshot](http://wplms.io/documentation/assets/img/updates.png) On clicking the big red button you will land on the Setup Wizard - Configure updates screen. Enter your item purchase code there and submit the form. Post submit you will see the link to go back to the About WPLMS screen. Get the purchase code for your theme : ![](/files/-MK5VNTDL57YRwucgnJl) ### Installing Plugins To install the required and recommended plugins simply click on the notification in your WP admin screen. You can now install the plugins from the install plugin notice. Installing the plugins would activate the WPLMS v4 in your site. This notice will appear on upgrading theme to version 4 ![](http://wplms.io/documentation/assets/img/install_plugin_notice.png) Clicking on install plugins you will land on the install plugins screen. You can then install the plugins. ![](http://wplms.io/documentation/assets/img/install_new_plugins.png) If you missed out on the step to authenticate in the WPLMS About section you will not be able to install the plugins here. Another case when plugins may not get installed is because of network connectivity. Your server unable to connect with Amazon server for plugin downloads**.**
{% hint style="warning" %} .**Page reloaded, plugins not installed !**If even after page reloads the install plugins fail. Check the direct links for the plugins which you can manually download and install.[Direct download links](http://wplms.io/documentation/installation/upgrading.html#direct_download_links) {% endhint %} In case you see failed error messages, you can follow these direct links for plugin downloads for required plugins : 1. BuddyPress : [Download link](https://downloads.wordpress.org/plugin/buddypress.6.2.0.zip) 2. WPLMS : 3. VibeBP : 4. Vibe-Helpdesk : 5. Vibe Drive : 6. Eventon : 7. Revolution Slider : 8. Layer Slider : 9. Visual Composer : 10. Vibe Zoom : 11. Vibe BigBlueButton : {% content-ref url="/pages/-MJGyTsi4fZuMJZmXshp" %} [List of All Addons](/extensions-and-addons/list-of-all-addons) {% endcontent-ref %} Copy and paste above links in the browser after replacing XXX with the WPLMS purchase code and you will be able to download the plugin files. You'll need to upload at WP **a**dmin - plugins - add new and activate. Once the install and activation of the plugins is complete. Reload this page and you will see the updated status of the plugins. ### What happened to old plugins, why should i deactivate them ? The wplms plugin has all those plugins inbuilt. So it is safe to deactivate,a ll your functionality is intact. See screenshot for reference ![internal structure of WPLMS plugin version 4](/files/-MKZYgAytWOd2y5HoNoL) ## Migrate to 4.0 Notice Once the plugins are active you will see a migrate notice in your site. The migrate notice requires you to deactivate the plugins which were used in the 3.x versions. This is a mandatory step. {% hint style="warning" %} **Important** : **Deactivate WPLMS Assignments addon first.** Go to WP admin - Plugins and deactivate the WPLMS Assignments addon. Older version of Assignments gets re-activated and can cause fatal issue on 4.0 update. {% endhint %} {% hint style="info" %} **Click the Notice button to deactivate the plugins** The plugins need to be deactivated in bulk. Clicking on the button deactivates all the plugins at once. Deactivating plugins one by one from the WP admin - plugins section can cause issues. {% endhint %} Click on the "Deactivate plugins" button in this notice. ![themeforest screenshot](http://wplms.io/documentation/assets/img/migrate_notice.png) Post deactivation you can verify the plugins are deactivated from the WP admin - Plugins screen. {% hint style="danger" %} **If you see a White Screen or Fatal Error !**If due to some reason the plugin deactivation failed. You will need to deactivate the plugins manually. [Link](http://vibethemes.com/deactivate-plugin-without-accessing-wp-adm/) {% endhint %} ![themeforest screenshot](http://wplms.io/documentation/assets/img/deactivated_plugins.png) The plugins Vibe course module, Vibe Customtypes, Vibe shortcodes, WPLMS Assignments, WPLMS Dashboard, WPLMS EventOn, WPLMS Front end plugins should be deactivated. ### **Migrate Theme framework to 4.0** Once the above plugins are deactivated you will get the notification to migrate the fraemwork to 4.0. This is a very important step as it activates 4.0 features in the theme. ![themeforest screenshot](http://wplms.io/documentation/assets/img/switch_4_0.png) From here onwards your login system is now upgraded to 4.0. All the modules now start detecting this switch. The notice will stay on your site and asking you for confirmation. Once satisfied you and confirm and remove the notice forever. ### Installing Sample Layouts Post migration you would want to install Sample layouts for your courses, profiles and directories. You can either use the VibeBP importer to import sample layouts from any demo. To import from any demo, restart the setup wizard and go to Content step to import the layouts. **Importing from VibeBP setup Wizard** You will see a notification in your WP admin area to import the Layouts and run the vibebp setup wizard. {% hint style="info" %} Not importing any profile field can show this error ![](http://wplms.io/documentation/assets/img/member_profile_missing_error.png)r {% endhint %} . **Importing from WPLMS Setup Wizard** Select the demo whose Profile/Course layouts you want to install. Skip all the remaining steps and reach the Import content step. Here only select the Profile layotus, Course layouts, Member card, Course card and import. Selectively import the "Member Profiles", "Member cards", "Course layouts" and "Course cards"
### Switching Layouts and Remaining settings The last step is to switch to new layouts. The most important layout is the profile layout which activates the members area in your site. Go to Customizer - Layouts and select the blank layouts for Profile/Course/Directory. So each of these layouts force you to move to the 4.0 version. If you want to stick to 3.x layouts, you do not need to enable this. [![themeforest screenshot](http://wplms.io/documentation/assets/img/blank_layout.png)](http://wplms.io/documentation/assets/img/blank_layout.png) Learn more about how to edit these layouts in the Administrator guide.
### Video Walkthrough Video walkthrough of how to upgrade to WPLMS verison 4 of WPLMS **Video** {% embed url="" %} ### Step By Step Migration Process {% embed url="" %} ### FAQs FAQ's common mistakes which might happen during the installation. # Installing WPLMS on an Existing WordPress site. If you have an existing WordPress site. First and foremost ensure that the content that you built in the site is built using a theme independent page builder. Which means switching the theme to WPLMS ## Prepare a backup Even thought we are absolute certain that nothing can go wrong during while following this wizard, there are still contigencies which we can not tackle alone from the wizard itself. A network failure, server overload, traffic congestion are few examples why we should always prepare a backup of the site before migrating to WPLMS. WPLMS is a BuddyPress theme and BuddyPress is the required plugin. If you need to sell courses you will be required to install WooCommerce. If you need Discussion forums in your site, you will need to install BBPress. The Hosting recommendations posted by these plugins are the basis for WPLMS Hosting recommendations as well. * **PHP Version** 7.2.1 \[tested upto version 7.4.8 as of 20th August 2020] * **Mysql/MariaDb Version** 5.6+/10.1+ * **Upload Limit** 10 MB or more * **PHP Memory Execution Limit** 128 MB or more * **PHP Time Limit** 128 MB or more * **PHP Post Max Size** 128 MB or more * **PHP Max Input Vars** 128 MB or more * **PHP extensions required** dom,gmagick,SimpleXML,ssh2,xml,\ xmlreader,curl,date,exif,filter,ftp,gd,hash,iconv,imagick,json,libxml,\ openssl,pcre,posix,sockets,SPL,tokenizerz,lib,mbstring,mysqli. {% hint style="info" %} The Upload limit is required for the theme even before you can begin uploading. Other wise you will see an error “The link you followed has expired.” while uploading the theme. ![](http://wplms.io/documentation/assets/img/WordPress-Link-Expiration.png) [Learn how to increase upload limit ›](https://kinsta.com/blog/wordpress-maximum-upload-file-size/) {% endhint %}
As a principle we are not affiliated to any hosting company. So the recommendations posted here are unbiased and based on feedback we collected from our users. Although any hosting plan should work for WPLMS. A [VPS](https://en.wikipedia.org/wiki/Virtual_private_server) or above plan provides better compatibility and lesser issues in the long run. Sharing hosting with everything unlimited usually do not work out good because the server is shared among many entities. From our observation : WPEngine, HostGator, KnownHost, OVH, DigitalOcean and SiteGround are good hosting providers. This list by no means is an exhaustive list, you are free to try other options and if they work great you can help us in updating this list. Just send out an email [here](https://themeforest.net/user/vibethemes/) ### Uploading the theme Uploading the WPLMS theme is just like any other theme. Following are the steps you can follow to upload the theme. **Downloading the theme** Download the WPLMS WordPress theme from your Themeforest Account.**Log in to your WordPress Admin \[a.k.a WP Admin]** ![themeforest screenshot](http://wplms.io/documentation/assets/img/download_theme.png) Login to your WordPress administration panel. You can simply append wp-admin to your site's url. So if your site is ABC.com , ABC.com/wp-admin is your WP Admin area.**Go to Apperance - Themes - Upload** ![wp screenshot](http://wplms.io/documentation/assets/img/wp_admin.png) Locate the Apperance in the left menu. Click on it, locate the themes sub-menu item, click on it. Locate the Add new button on your screen.**Upload the Theme** ![wp screenshot](http://wplms.io/documentation/assets/img/add_new_theme.png) Click on Upload Theme button. A Upload form will appear. Drag and drop the theme downloaded in the previous step here. Click on Install Button ![wp screenshot](http://wplms.io/documentation/assets/img/select_install.png) If you see the below error while uploading the theme, it most likely means that yoursame server is restricting the upload. ![wp screenshot](http://wplms.io/documentation/assets/img/WordPress-Link-Expiration.png) The possible reasons for above are : 1. Server Upload limit less than 8MB. 2. PHP Zip library not installed 3. File permissions incorrect. 4. WordPress incorrectly configured. 5. Previous attempt of uploading the theme failed due to network issues. The best course of action in all above cases is to contact your web host. For the last step "previous failed attempt", you can login via FTP and locate for wp-content/themes/wplms folder and remove it. ## Setup Wizard On uploading and activating the theme, you will see a setup wizard automatically taking control of the things. This is expected and recommended method of installing the theme. The Purpose of the setup wizard is to configure a lot of settings automatically and avoid the hassle of manually configuring the theme. **Selecting an Installation Type** We have categorised the WPLMS theme usage into 4 broad categories : Instructor, Academy, University and MOOC (massive open online courses ). We've Demonstrated the theme into above broad categories and selected a feature set for each of these categories. However, this is just a classification factor and during the course of setup wizard you are free to enable recommended feature, designs for the type of installation you are selecting in this step. Even after the setup has been completed you can always re-run the setup wizard and enable disable features which you may need later on. For example : [Enabling BigBlueButton Meetings in existing site.](https://www.youtube.com/watch?v=kmIa8kfTxjA)
![themeforest screenshot](http://wplms.io/documentation/assets/img/setup_wizard.png) You will also see configuration checks and file permission checks which indicate any potential problem theat may arise during the setup wizard. Mouse over to see more details. It is always better to make sure there is no failed configuration and file permission checks. However, sometimes failed check in configuration can also appear if the wordpres is unable to identify them. **Select a Demo Style** If you want to install a Theme Demonstration \[Demo] then click on the image to select it. When a Demo installation is selected, you will see a check mark over it. To switch to another demo click on its image select it. To see how the demo works, click on the pop-out icon and you can go through the demos. Chosing latest demos is always a good idea as they have better design and import wizard has been tested thorroughly for the demos. You can skip this step from the bottom skip option to not install any content or demo style. The images in this screen require an active internet connection, if you do not see images then please check your internet connection. ![themeforest screenshot](http://wplms.io/documentation/assets/img/theme_selection.png) Below the demos you will find import content section. This expects a upload file to use as a demo style. We will come back to this area in later sections. If you have an existing WPLMS site or you are developing WPLMS site in your local computer. You can use the WPLMS Export wizard to take out the export zip from your site and import that zip file here. **Select Features for this Site** In this area you select features for your site. To select a feature click on it and a check mark would appear over it. Click on it again to remove the check mark. Some of the features will come pre-selected based on the demo style you've selected in previous step. ![themeforest screenshot](http://wplms.io/documentation/assets/img/wplms_features.png) ## Authenticate and setup updates Authenticate your purchase by either authenticating from Envato account or by entering purchase code. Authenticating with Envato account also sets up the theme for auto-updates. Otherwise you can authenticate again from WP admin - WPLMS - Getting started section. This is also required to download the plugins in the next step. Hence you will not be able to skip this step and proceed to the next step in installation. ![themeforest screenshot](http://wplms.io/documentation/assets/img/auth.png) **Item Purchase code.** How to locate your item purchase code : [Link](https://wplms.io/support/knowledge-base/how-to-find-wplms-theme-purchase-code/) ### Installing Plugins The theme comes with required and recommended set of plugins.Note that recommendations are good to have but not absolute necessity for the theme to work. The required plugins for the theme to work as advertised are BuddyPress , WPLMS and VibeBP. Based on your selection of previous "Features" step you will see the install plugins options here. Note that this is a sub-set of recommended plugins. Post installation you can view the complete set of recommended plugins from WP admi - Appearance - Install plugins section. ![themeforest screenshot](http://wplms.io/documentation/assets/img/install_plugins.png) You need an active internet connection to download these plugins. The plugins are hosted on Amazon servers and they are always available on the internet. **Ajax Error while installing plugins.** You may see some plugins returning status of ajax error. Such messages are safe to ignore as the plugin is trying to take you away from the installation wizard and we stop it from doing so.**Failed Plugins.**In case you see a failed error message, this means the plugin installation failed. It means the the rest of the setup process may face further issues. In such cases if the plugin is not a required plugin \[BuddyPress, WPLMS & VibeBP] you can still proceed with the installation. If it is a required plugin then download the plugin manually and install it from the WP admin - Plugins add new screen.
In case you see failed error messages, you can follow these direct links for plugin downloads for required plugins : 1. BuddyPress : [Download link](https://downloads.wordpress.org/plugin/buddypress.6.2.0.zip) 2. WPLMS : 3. VibeBP : 4. Vibe-Helpdesk : 5. Vibe Drive : 6. Eventon : 7. Revolution Slider : 8. Layer Slider : 9. Visual Composer : 10. Vibe Zoom : 11. Vibe BigBlueButton : 12. Vibe Affiliate : For themes like Divi you can download the Divi addons : Replace XXX with your WPLMS Theme purchase code [wplms.io/verify-purchase/?purchase\_code=XXX\&plugin=wplms.io/vibebp-divi.zip](http://wplms.io/verify-purchase/?purchase_code=XXX\&plugin=wplms.io%2Fvibebp-divi.zip\&fbclid=IwAR3cvIA8BTV254-fAw140MlL25wFlwHr50W0lkWm3oHcWvVPAjJYA038ayQ) [http://wplms.io/verify-purchase/?purchase\_code=XXX\&plugin=wplms.io/wplms-divi.zip](http://wplms.io/verify-purchase/?purchase_code=XXX\&plugin=wplms.io%2Fwplms-divi.zip\&fbclid=IwAR3pQGg5AN0rV8bquzIVzMy7pwJRDJUrDSWD0Ktwr9e8R3RpKye-jVKc95E) {% content-ref url="/pages/-MJGyTsi4fZuMJZmXshp" %} [List of All Addons](/extensions-and-addons/list-of-all-addons) {% endcontent-ref %} Copy and paste above links in the browser after replacing XXX with the WPLMS purchase code and you will be able to download the plugin files. You'll need to upload at WP dmin - plugins - add new and activate. Once the install and activation of the plugins is complete. Reload this page and you will see the updated status of the plugins. ### Required Pages This step setups up various pages and layouts in the theme. This is one of the required steps we advise everyone to follow even if you are not installing any demo content. If the pages are already installed you will see the checks in green color. On fresh installation they'll appear as faded. ![themeforest screenshot](http://wplms.io/documentation/assets/img/required.png) ### Installing Sample Data The most important step for installing demo content. **We strongly advise not to select all data blindly and import .** The data import would add a lot of sample posts which is garbage into your site. So take caution and select appropriately. We recommend selecting Member Profiles, Member Cards, Course Cards, Course layouts, Group Layouts and Group cards. You can also select pages to get the demo pages from the site. This is how the import content screen looks like. ![themeforest screenshot](http://wplms.io/documentation/assets/img/demo_content.png) If your screen does not appear like this and there is an error in red. It means that your server was unable to load the demo content file which is uploaded in our Amazon servers. This could be a temporary network issue and you can reload this page to load the data. Or try after few minutes to reload this page and load the data. In case the issue persists, the only alternative to this situation is to upload the content manually.**Export package download links** 1. Academy Demo : [Download link](https://demos.wplms.io/academy/wp-content/uploads/export_demos/academy.zip) 2. V4 Base Demo : [Download link](https://demos.wplms.io/wp-content/uploads/export_demos/demo1.zip) 3. Demo 10 : [Download link](https://demos.wplms.io/demos/demo10/wp-content/uploads/export_demos/demo10.zip) 4. Demo 6 : [Download link](https://demos.wplms.io/demos/demo6/wp-content/uploads/export_demos/demo6.zip) 5. Demo 14 : [Download link](http://wplms.io/documentation/installation/existing.html) 6. Demo 1 : [Download link](https://demos.wplms.io/demos/demo1/wp-content/uploads/export_demos/Demo1.zip) {% hint style="info" %} Unable to see "Posts","Pages" in import content. You need to download the Zip files of our demos from below links and go back to step 1 "Select a demo style", click on this step on the left menu and upload the downloaded zip file from below links.[Video walkthrough ›](http://wplms.io/documentation/installation/existing.html) {% endhint %} If you are unable to download the slider, check FAQ section for direct link for sliders. ### Video Walkthrough Video walkthrough of how to install WPLMS version 4 on a blank WordPress site. **Video** {% embed url="" %} ### FAQs FAQ's common mistakes which might happen during the installation. # Beginners Guide This is stepwise guide for the beginners. ### Install the theme {% content-ref url="/pages/-MJFQqLz5wz92nPCu-dp" %} [Setting Up](/administrator-guide/step-by-step-guide-for-administrators) {% endcontent-ref %} ### Setup Logo & Header {% content-ref url="/pages/-MOFnWtP2nQs9lq-pbla" %} [Header](/administrator-guide/step-by-step-guide-for-administrators/customizer/header) {% endcontent-ref %} ### Setup footer {% content-ref url="/pages/-MJHEexZDTnMHSU5rcp9" %} [Vibe Options Panel](/administrator-guide/step-by-step-guide-for-administrators/vibe-options-panel) {% endcontent-ref %} ### Setup Menus {% content-ref url="/pages/-MJHIn\_DhaU4ynbiwnU0" %} [Menus](/administrator-guide/step-by-step-guide-for-administrators/menus) {% endcontent-ref %} ### Customising colours fonts {% content-ref url="/pages/-MJHErim2V8diQeB8OZO" %} [Customizer / Colors / Fonts](/administrator-guide/step-by-step-guide-for-administrators/customizer) {% endcontent-ref %} ### Setting up Dashboards {% content-ref url="/pages/-MJmWWnomyKZwr1Mc8BS" %} [Dashboards](/members-area/dashboards) {% endcontent-ref %} ### Creating your first course & testing it {% embed url="" %} Create course guide {% endembed %} {% content-ref url="/pages/-MJGE1eKykT0gXpXg24i" %} [Creating Courses](/instructor-guide/instructor-guide) {% endcontent-ref %} # Setting Up This is the adminstrator's guide for managing WPLMS. This guide deals in how things are setup and managed in the WPLMS. ## Important Settings in version 4 The WPLMS Version 4 is very different from its predecessor version 3. The Following plugins must be active in order to use WPLMS : **BuddyPress, VibeBP, and WPLMS Plugin** **Recommended plugins include :** WPLMS PDF Certificates, Vibe Drive, Vibe Zoom, Vibe BBB, Vibe Calendar and Vibe HelpDesk. For Selling courses : WooCommerce \[Sell courses one by one], PaidMemberShips Pro PMPRO. {% hint style="info" %} Some of the recommended plugins which really extend the functionality of WPLMS include. Batches/Classes, Vibe Appointments, Parent User, Unit Timings, VideoVibe, Learning Paths. {% endhint %} Here is a list of important settings that should always be configured in your WPLMS Setup. ### A. Setup Purchase Code To update the core plugins you are required to setup auto-updates. You need to go to WP admin - Dashboard - About WPLMS section and make sure there is no big red button asking you to add purchase code. ![](/files/-MJFSIwuakehkN5Oaxln) If you see this then it means that your site is not configured for automatic updates of the free plugins included in the pack. It means your plugins are not configured for auto-matic updates. Please click on the above button and follow the guide. **Video WalkThrough** ![Activate Updates](/files/-MJFSeM1qJh9GDKGR27O) As a rule of thumb we strongly recommend you to keep the theme and the plugins always up to date. However, during the course of updating the plugins, it might happen that the plugins fail to download. If nothing works, you can download the plugins via [direct link shared here](http://wplms.io/documentation/installation/index.html#plugins) and install them from the WordPress Administration area - Plugins - Add new section. During the course of updating it is possible that the updating fails. In that case, simply try the update again by opening WP admin - Dashboard - Updates. ### B. As this is WordPress it is totally safe to use third-party registration forms. Just make sure that they fill in the buddypress fields as well. ### C. Profile Layout A Profile layout is the display of member profile. In version 4 this is no longer the same BuddyPress profile. The disadvantage in BuddyPress profiles is that they do not allow page caching. The content on the profile pages is not static, for example the activity tab changes frequently, any content which comes frmo the server dynamically can not be cached by the browser, so a hit has to be made to the server to fetch the page hence such pages will always load slow. Other reasons, firstly a public profile displaying activity can be a privacy issue, secondly we really do not understand how useful it is for a third party user viewing the profile, none of the top sites have similar structure, including the facebook. A public profile should be static, configurable and showcase what the member wants to show. The Profile layouts in WPLMS v4 are built using Elementor. In previous versions the profile pages were static hard coded templates but the v4 comes with the flexibility of building these layouts right form your favorite page builder. You can create multiple profile layouts and assign these layouts to various member types. {% hint style="info" %} **Profile layout does not apply, still getting v3 layouts.** Two important settings are required. * Change customizer - Layouts - Profile - Blank * Toggle the switch, move to WPLMS v4.x {% endhint %} ![Migrate Notice](/files/-MJFX6WP-v6_OhsLbA9M) ![Setting Blank Layout](/files/-MJFXHNySLhynB6gYqo6) You can create multiple layouts and by default the latest layout will apply on all the member profiles. Unless you set a member type value in the layout. [**Customize Profile and Cards**](https://www.youtube.com/watch?v=AYXzAMxFWCU\&list=PL8n4TGA_rwD_5jqsgXIxXOk1H6ar-SVCV\&index=17\&t=16s) Currently, page builders supported by VibeBP & WPLMS is Elementor. Support for Divi and Oxygen builder is also planned. ### D. Directories ## Configuring The WPLMS Version 4 is very different from its predecessor version 3. Here is a list of important settings that should always be configured in your WPLMS Setup. Following plugins must be active in order to use WPLMS : **BuddyPress, VibeBP and WPLMS Plugin** Recommended plugins include : WPLMS PDF Certficates, Vibe Drive, Vibe Zoom, Vibe Recommended Plugins for Selling courses : WooCommerce \[Sell courses one by one], PaidMemberShips Pro aka PMPRO ( for selling courses via memberships ) ### VibeBp General Settings #### Additional Components * **Followers :** Checking this checkbox Let the users add the followers component as a profile menu. After enabling this you can actually add this component as Menu and it will be visible like this * **Likes :** Checking this checkbox let the users like the activities ![](/files/-MJFbU6uQXiE_a2Gf8XU) ![](/files/-MJFbYzJGgIaWjAwN43h) ![](/files/-MJFbmN_iPnzDDhQi03a) {% embed url="" %} #### Menu Options * **Different Menu For Instructors:** Once you enable this checkbox, in the menus you will get an option to set different set of menus only for instructors. You can set the menus on the basis of user roles * **Different Menu By Member Type :** Once you enable this checkbox, in the menus you will get an option to set different set of menus according to [**member types**](https://www.youtube.com/playlist?list=PL8n4TGA_rwD_5jqsgXIxXOk1H6ar-SVCV) #### Dashboard * **Different Dashboard For Member Type:** Once you enable this checkbox, in the widgets section you will get an option to set different dashboards according to [**member types**](https://www.youtube.com/playlist?list=PL8n4TGA_rwD_5jqsgXIxXOk1H6ar-SVCV) ![](/files/-MJFea1LJILCa8U49_X1) #### **Accessibility Settings** * **Disable Public Profile:** By Default, the profiles can be accessed by anyone but as soon as you enable this setting will turn the feature on and users cannot access each others profiles. * **Disable Public Member Directory :** Restrict Members Directory Access * **Disable Groups & Group Directory :** Restrict Groups Directory Access * **Disable Public Activities \[recommended] :** The Public Activities will be disabled after enabling this setting ![Disabled Publically Display Of Members Directory](/files/-MJFfKhvk-QBVAD3orMk) ![Groups and Groups Directory Disabled](/files/-MJFfOsLEbRLPWnEe0Sm) #### **BuddyPress Settings** * Buddypress Avatar Full Width * BuddyPress Avatar Full Height (px) * BuddyPress Avatar Thumbnail Width (px) * BuddyPress Avatar Thumbnail Height (px) The Default values are already added but you can change these values according to your requirement ### **VibeBp Member Types & Group Types** From Here you can create as many as member types you want. You can use member types for various departments of your school, university or to categorise student vs instructor vs company or parents. Similarly, as member types you can create group types as well
![Member Types](/files/-MJFgVi14NtVuqLC6G_1) ### Profile & Loggedin Menu There are two types of menus introduced one is "Profile Menu" and another one is "loggedin Menu". Loggedin Menu will be visible as a dropdown to access the pages. Profile Menus will be visible in profile section. You can set these menus from wp-admin > Appearance > Menus. Please check the FAQ section below if you don't find Buddypress Menus to Setup as Profile or Loggedin Menu ![Vibebp LoggedIn Menu](/files/-MJFhIwhoeyEm3h6YxZ2) ![](/files/-MJFhViSumGlwn8JEJGq) ### BuddyPress Refresh Navigation Sometimes users face this problem that after adding a new profile menu and hitting save menu. Still that menu is not visible in Profile so what you can do is forcefully refresh the navigation items by hitting this button. You will find this button in vibebp - settings ![](/files/-MJFhj2e42rYKTHf_x8N) ### {% hint style="info" %} **How to Remove A Widget Showing on a Page:** It is really simple, what you have to do is edit your page in the backend and check which sidebar is selected for that page. Then locate that sidebar from wp-admin > Appearance > widgets and Remove all the widgets from that sidebar {% endhint %} ## Vibe Page Builder IF you are still building content in our Vibe Page builder then you can enable the following switch. **Vibe Options Panel > Miscellaneous > Vibe Page Builder**. ![](/files/-MJFspOUfAjZxN9tPprA) ## Setup WPLMS with Any Other Theme {% hint style="info" %} **This will only work with wplms\_plugin 1.5.0.2 version. So Make sure you have the updated version** {% endhint %} {% embed url="" %} # Login and Registration Setting up login and Regiration ### Configure Login & Registration The version 4 the login script is not loaded by default on the entire site. It is loaded when you enable the setting WP admin - VibeBP - Global Login. Also as this is a front end login system, you need to enable the WP Login sync as well for vibebp to recognise WP logged in users. ![Enable Global Login](/files/-MJFTELXvSRMhSvSC7N6) The Login customization options in Customizer - Header - Login options would no longer work ### Video walkthrough - Customize Login Screen {% embed url="" %} customising colors and other things {% endembed %} You can also use other settings like expanded menus in the customizer. ![](/files/-MKu4WOZtDl5qfLoEup5) ### **Social Logins** **The social logins are now integrated with Firebase. As WPLMS v4 uses a JWT login system, it is much different than existing logins.** {% embed url="" %} **Why Firebase ?** We wanted the system to remain fast and not use server for social login integrations. For example : if 20 users use Facebook login in your site at the same time, your server ( a single cpu) would have immense amount of work to do as it would make a hit to facebook and send in credentials, generate WordPress session cookie and validate for all 20 users. Also maintain other tasks going on in the site. As compared to version 4 browser only system, the WPLMS uses 20 client CPU's to make the hits and only make the single hit to the server for registration. Cookie less, Fast and secure. ![Firebase Auth](/files/-MJFTyAAgvkhqlSR46eK) The server would only authenticate with firebase and firebase takes care of the rest of the integrations. Firebase is free, it provides "the" gold standard on how scalable login systems should be built. Several projects not just WPLMS but many use Firebase JWT classes to generate tokens. Also firebase takes care of evolving login patterns of these social networking sites. The firebase takes care of integrating with social login without putting any stress on your server. Your server just maintains integration with firebase. The firebase requests are validated by public keys which the WPLMS site fetches from firebase every 15 minutes interval. So this is as secure as it can be. **I liked v3 Login, can i revert ? Can I use third party plugin like Digits ?** We get this question a lot. Even though you lose out on tons of great options and sacrifice a lot on speed and even though I strongly recommend against this. Yes, you can still use old login system with WP login sync enabled in the WP admin - Vibebp - settings. {% hint style="warning" %} **Upgraded and Login not working** Go to WP admin - Vibebp - Settings and enable Global login and WP Login sync. {% endhint %} **Why this setting is not enabled by default ?** We have deliberately added this switch as in version 4 WPLMS can execute entirely on a single page. Yes, you do not need to convert your entire site into an LMS. That idea is actually a limitation of WordPress that to implement afunctionality as complex as Learning management system you have to add templates and implement functionality based on how WordPress functions. The WordPress lifted this with their HeadLess CMS concept. ### Configure Firebase Live chat {% embed url="" %} #### Single Session users accounts Enter firebase server key and service email account. This is mandatory for Single user session to logout all user sessions. Also required for Cache first service workers, iOS App, push notifications. ![Firebase server key](/files/-MeO_M5qzt8ML4eYb4c-) ![](/files/-MeOclWGUew1uE9tL9lk) ### Changing the messages in the login popup As you as you enable this, you will be able to click on the login link in the header and it would open the new login popup. You would want to change the login screen text messages and the references to vibethemes & wplms. To change simply go to WP admin - VibeBP - Settings and you can change these messages easily ![](/files/-MJFUYiq7er8bVtKn4fZ) You can also customize this screen further by adding checkbox for login and registration screens. Add login terms. A checkbox appears for users who login to your site. Add registration terms. A checkbox appears for users who want to register to your site. ![Login Checkbox](/files/-MJFUmI2NB-HV27TWqNA) ![Register Checkbox](/files/-MJFV5wnvCeqfk-jb4HT) The registration can be further modified. You may have requirements for a bigger registration form with custom information. In that case, you can setup a registration form. {% embed url="" %} #### I want multiple registration forms, for instructors, students and more options. We have some fantastic options available, you can explore the custom registration forms feature. This is really a useful feature considering the options it provides. * Fill information directly in profile fields * Embed Google captcha validation * Enrol the user directly in a group / batch & into the courses. * Assign a different user role for the site. So if you assign an instructor as role to anyone registering using that form. It becomes an Instructor registration form. * If you are a school or community and have multiple member type requirements, you can assign custom member type to the user registring from the form. * End output is a shortcode and that shortcode can be embedded at any place on site. * Is built in native javascript, no jquery mode, so can work asynchronously. * Assign a custom activation email template. Different activation email per registration form. * Assign a custom welcome email template per form. * Add some styling and any custom layout is possible. Show in tabs, show in two column format. [WPLMS Registration Forms](https://www.youtube.com/watch?v=GQ_yvx1xU-I\&feature=emb_logo) {% hint style="info" %} **Third-party registration form plugins** You can use any third party registration form in WPLMS. {% endhint %} ### Synchronise WP with VibebP Login {% embed url="" %} # 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 {% hint style="warning" %} **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. {% endhint %} By default on upgrading, you will not notice any change. To make the change you will need to set the directory layout to blank ![Selecting Directory Layout](/files/-MJFYLlUfNrSw22A77vl) 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. {% hint style="warning" %} **Directory is blank** Refresh the BuddyPress cache : Go to WP admin - Settings- BuddyPress - Save components. {% endhint %} 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. ![Elementor Directory Component](/files/-MJFYi_9cCtLg1XaY4t1) 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. ![Editing Course Directory](/files/-MJFZ-UKImZXLoYOiImc) * 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. ![Members Directory](/files/-MJFZbUncud5qhRfNbao) **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. ![](/files/-MJF_LYI4ErESJ0BUTWP) **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. **Pagination**Show 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. ![](/files/-MJF_aHl-Z8lqxyf8jHY) **Preparing the course cards** See the video on how to prepare a good course card and use directory controls. {% embed url="" %} #### The Groups directory The groups directory . You can create unlimited groups directory by simply placing the groups directory Elementor widget on any page.[
](https://app.gitbook.com/s/-MJ6s5FGS69lFw7GlM7i/administrator-guide/assets/img/groups_directory.png) ![Group Directory](/files/-MJFaW9LAIgNAl5QJyf0) ### Creating Course Directory, Layouts & Cards in 4.0 {% embed url="" %} # Course Layouts Import course layouts from various demos directly in your WPLMS iste. ### Default course layout Download link : View : ### Academy Course Layout Download link : view: ### Learning Center Course Layout Download link {% file src="/files/znXG8LLJcwaCdQODjnUr" %} view : Main Course Layout Download Link {% file src="/files/XU8dJzYMX1280nsELRiN" %} view : # Profile Layouts Download profile layouts and directly import in your existing site. Download profile layouts from the demos Learning Center profile :thumbsup:: {% file src="/files/F5xC7xHoUz9VJFSMGqRs" %} Academy Profile layout : {% file src="/files/G4YCjLOzKo9RxsrPf03K" %} # Menus This page deals with Menu system in WPLMS. There are 6 Menu locations in WPLMS. Set Menus From Admin Panel > Appearance > Menus * **Profile Menu:** [**https://docs.wplms.io/administrator-guide/step-by-step-guide-for-administrators#uploading**](https://docs.wplms.io/administrator-guide/step-by-step-guide-for-administrators#uploading) * **LoggedIn DropDown Menu:** [**https://docs.wplms.io/administrator-guide/step-by-step-guide-for-administrators#uploading**](https://docs.wplms.io/administrator-guide/step-by-step-guide-for-administrators#uploading) **(These Two Menus Already explained above so please go through that)** * **Top Menu:** is located at the top of header, besides the login and signup links. This menu is hidden on Mobile devices. This menu does not support multi-level items. This top Menu is not supported by all header styles, there are a few header styles only in which this "Top Menu" will appear ![](/files/-MP3LHF47cjrluve4A-s) * **Mobile Menu:** is the Slide out menu. It appears only on Mobile layouts when the user clicks on the Menu icon placed in the header in Mobile layouts. This menu does not support multi-level items. * **Footer Menu:** located in the Footer bottom in the right corner. This menu does not support multi-level items. * **Main Menu:** is located in the header. This menu also supports Mega Menu. This menu is hidden on Mobile devices.
You can choose the Menus from .wp-admin > Appearance > Customizer > Menus Locations The menu Location can be also chosen from the backend. Go to wp-admin > Appearance > Menus You can read more about wordpress menu : [**Setting Up WordPress Menu**](https://codex.wordpress.org/WordPress_Menu_User_Guide) ## **Theme Mega Menus** The WPLMS theme supports regular as well as Mega menus. * Login to WP Admin panel. The access to this is only available to WordPress Administrators \[user role]. Go to Menus section in Appearance Tab in Admin panel.Before building a menu you need to enable the desired Menu items to include in the Menu from Screen options tab located in the top right corner of the screen. * Click on Create a new menu to get started with the menus. Give a name to your menu and click Create menu button to create the menu. Now select items from the sections in the right and click on button Add to Menu. * Once items are added to the Menu drag them around to place them one under another. WPLMS supports unlimited menu levels.By default the next menu level is shown on hover and towards right. * For Menus located closer to the right margin, you can add a CSS class left for the next level menu item to appear on left side. For this make sure you have enabled CSS classes from the screen options located on top right corner of the screen. {% embed url="" %} ### **Setting Up Mega Menu** * Mega menus are only available in 1 level menu items. * Since mega menus are full width menus, to enable a mega menu make sure that only one 1 level item is present in a menu with mega menu. * To enable Mega Menu, enable the Mega menu switch in the 1st level menu item. * Select a sidebar/widget area which will be shown in the mega menu. You can create unlimited mega menus and unlimited sidebars/widgetized areas can be created using Options Panel -> Sidebar Manager. * Select the number of columns in the Mega menu widgetized area. Add custom widgets in the selected Mega Menu sidebar/widget area. Mega menu supports all the non-animation widgets. So, widgets with carousels, galleries are not supported in the Mega Menu. #### Sidebar Mega Menu {% embed url="" %} #### Category Posts Style Mega Menu {% embed url="" %} #### Category Sub Category style Mega Menu {% embed url="" %} ## Profile Menu The menu which gets connected to the Profile in the dashboard area is the profile menu. ![](/files/-MJHKjbnQbAHRB4XcKqJ) This menu you can set at the profile menu location. You need the VibeBP plugin active to see this menu location. So, important point to note is that you can only drag the BuddyPress modules in this menu. ## Logged in Menu. The menu which appears to the user when he is logged into the site. So, important point to note is that you can only drag the BuddyPress modules in this menu. ![](/files/-MJHLJMBxHUq_hh8tZJ5) So you can only add the BuddyPress modules which you can enable from Screen Options in WP admin - Menus ![](/files/-MJHLjE09YPIx7CNmdjf) You can also add external links. See below video on who to add links outside of BuddyPress items into the profile and loggedin menu. ## Adding External Links in Menu {% embed url="" %} ## Setting up image in mega menu Add text widget in the menu menu sidebar and add the image. {% embed url="" %} # Customizer / Colors / Fonts This page deals with customizer settings. How to setup Colors , fonts and layouts for your sites. This section explains the various functions available in the theme customiser section. Theme customiser is located in WP Admin - Appearance - Customise section. Following sections in the theme customiser are explained below : ## **General Settings** These are settings mostly related to design elements of your site. ### **Site Identity** * Site title: You can set the title your site. The title of the site is used in generating the title of the home page which is important for SEO purpose. * Tagline: Site tagline, describe your site in one line. * Site Icon: The Site Icon is used as a browser and app icon for your site. screenshot ### **Background Image :** The option is used to change the background image. * Background Image: The background image can be set from this option. This is only visible in the Boxed Layout ( For boxed theme : Go to Theme Customiser->layouts->theme layout->boxed). [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_background_image.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_background_image.png) ### **Menus** The option is use to create/set the menus like main menu, footer menu, mobile menu etc. The menus set on the current page will be shown on the customiser sidebar. * Menu locations: Set the locations for different menus created from here like top, main, mobile, footer menu. * You can create a new custom menu from "Add a menu option" or edit/add items in the existing menu. [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_menu_1.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_menu_1.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_menu_2.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_menu_2.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_menu_3.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_menu_3.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_menu_4.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_menu_4.png) ### **Widgets** The option is used to customize the widgets. The widgets set on the page opened in customiser will show in the customiser sidebar. You can also set widgets from the backend, go to wp-admin->appearance->Widgets.[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/w1.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/w1.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/w2.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/w2.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/w3.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/w3.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/w4.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/w4.png) ### **Static Front Page** Option for setting front page and posts page. * Front page displays: Whenever some user visits your site, the first page you want your users to see. If it is posts, mark "Your latest posts", if it is some static page, mark "A static page". If you select "A static page", you should set the other two options front page /posts page. * Front page: Select the home page of the site from this option. * Posts page: Select the posts page or Blog page from this option. We recommend setting this value as blank as blog templates add their custom styling as per their design. [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/stf1.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/stf1.png) ## **Theme Settings** This is the most important section in the theme customiser. using thissection you can set your theme primary color, theme skin and theme text color. ### Theme skin * Select out of Default, Elegant, Minimal skins from this option. Elegant, Minimal skins. Each theme skin adds a unique style to the entire theme. Each style adds its own styling file in the display and also adds their own classes on the body section. ### Theme Primary Color The most important setting in the theme customiser. Theme primary color is used in multiple places like default button background, tab background, selected link, icons etc. In each theme skin the primary color is treated differently. #### Theme Primary text color This is the theme color, which appears whereever the background is theme primary color. For example on buttons, links, pagination buttons etc. [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/default_theme_skin.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/default_theme_skin.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/elegant_theme_skin.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/elegant_theme_skin.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/theme_primary_color.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/theme_primary_color.png) ### **Layouts** **In t**he layouts option , you can choose different layouts for theme, directory pages like All courses, all members etc, profile layouts, group and single course layouts : * Theme Layout: Container, fluid, boxed * [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/boxed_layout.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/boxed_layout.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/fluid_layout.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/fluid_layout.png) * Directory Layout: Default, D2, D3, D4, D5 and Blank * [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/directory_layout_1.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/directory_layout_1.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/directory_layout_2.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/directory_layout_2.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/directory_layout_3.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/directory_layout_3.png) * Profile Layout: Default, P2, P3, P4 and Blank * [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/profile_layout_1.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/profile_layout_1.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/profile_layout_2.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/profile_layout_2.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/profile_layout_3.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/profile_layout_3.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/profile_layout_4.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/profile_layout_4.png) * Group Layout: Default, G2, G3, G4 and blank * [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/group_layout_1.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/group_layout_1.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/group_layout_2.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/group_layout_2.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/group_layout_3.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/group_layout_3.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/group_layout_4.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/group_layout_4.png) * Course Layout: Default, C2, C3, C4,C5 and blank * [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/course_layout_2.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/course_layout_2.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/course_layout_3.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/course_layout_3.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/course_layout_4.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/course_layout_4.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/course_layout_5.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/course_layout_5.png) ## **Header** All settings in this section are used to customize the header of the theme. * Header Style: The option is used to select the header style from Default, Sleek, Transparent, Centre aligned, Standard, standard center, Mooc, App style. * Login Style: Default, Full screen, Popup, Big Drop, Modern * Logo size: Sets the logo height from this option * Adjust logo top: It sets the top spacing of the logo * Adjust logo bottom: It sets the bottom spacing of the logo * Header top/fixed background color: * Header top/ fixed text color: * Header background color: * Header text/menu text color: * Sub navigation background color: It sets the sub navigation background color * Sub Nav text color: The setting is to set the text color in the sub navigation. * Adjust menu padding: * Login drop light background: The login drop box top background color * Login drop dark background:The login drop box bootom background color * Login drop light text color: It sets the text color in the top part of the login drop. * Login drop dark text color: It sets the text color in the bottom part of the login drop. [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_login_1.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_login_1.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_login_default.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/customise_login_default.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/header_style_1.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/header_style_1.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/header_style_2.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/header_style_2.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/header_style_3.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/header_style_3.png) ## **Typography** * All the typogrpahy in the theme is maintained from this option * H1 font color: Sets H1 headings color via this option in the theme. * H1 font size: Sets H1 font size . * H2 font color: Sets H2 font color * H2 font size: Sets H2 font size via this setting * H3 font color: Sets H3 font color * H3 font size: Sets H3 font size * H4 font color: Sets H4 font color * H4 font size: Sets H4 font size * H5 font color: Sets H5 font color * H5 font size: Sets H5 font size * H6 font color: Sets H6 font color * H6 font size: Sets H6 font size * Widget title font weight: Font weight of the Title of widget * Widget title font color: Font color of the widget title * Widget title size: Font size of the widget title * Woocommerce product thumb title font color: * Woocommerce product thumbnail title size: * Woocommerce heading size: [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/typography_1.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/typography_1.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/typography_2.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/typography_2.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/typography_3.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/typography_3.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/typography_font_manager.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/typography_font_manager.png) Refer the tutorial : [**Google Fonts Manager**](https://www.youtube.com/watch?v=HWWLTWMVprg) ## **Body** All settings related to the body of the theme * Body background color: Set the background body color of the theme via this option. * Content area background color: * Content area text color: * Link color: This setting is used to set the link color of the site. * Price color: This options sets the Price color of the courses/ products in the theme. * Body font size: The setting is used to set the font size of the content of the body * Single menu dark color: * Single menu light color: * Main button color: Option to set the button color in the theme. [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/body_background_color.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/body_background_color.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/background_color_content_area.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/background_color_content_area.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/body_area_text_color.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/body_area_text_color.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/body_links_color.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/body_links_color.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/change_price_color.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/change_price_color.png) ## **Footer** * Footer style: Footer Bottom, Single Sidebar Footer, Default(Double Sidebar), Copyright Only. * Footer background color: It sets the background color of the footer * Footer text color: The setting is used to set the text color of the footer in the theme * Footer heading color: Heading/title color of the widgets added in the footer * Bottom footer background color: It is used to set the background color of the bottom footer. * Bottom footer text color: It sets the color of the text in the bottom footer. [![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/footer_background_color.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/footer_background_color.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/footer_style_1.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/footer_style_1.png)[![screenshot](https://vibethemes.github.io/wplms-docs/assets/images/demo/footer_heading_color.png)](https://vibethemes.github.io/wplms-docs/assets/images/demo/footer_heading_color.png) ## **Custom CSS** * In this section you can add your customized css part. Sometimes it happens that you want to hide something and that is not available in the theme. So, you can directly add your custom css. # Header Header changes in Customizer ### Header Styles Open Customizer from WP admin - Appearance - Customizer, locate the Header section. ![Transparent header](/files/-MOFuIqjuANNreP34yI_) ![Sleek Header](/files/-MOFuMyKO3IdqgpQf9k2) {% embed url="" %} Video explainer of how customizer works {% endembed %} ### Setting Logo Go to WP admin - WPLMS - Header , there you can set logos. 1. Standard logo : Visible in desktop 2. Alternate logo : Visible when the header is fixed. This is useful when the sticky header is of different color. 3. Mobile logo : The logo which is displayed on mobile screens. 4. Favicon : The icon which appears in the browser bar. ![](/files/-M_qOOu5-PUVI1VstBmb) ### Adjusting Logo Open Customizer from WP admin - Appearance - Customizer, locate the Header section. ![Adjusting logo height](/files/-MOFoEa_iTA5_CjwLpjr) ### Adjusting Menu Height Open Customizer from WP admin - Appearance - Customizer, locate the Header section. ![Menu padding](/files/-MOFoUKiBFFWCK-zw6yI) Together based on Menu padding and logo top bottom padding you can adjust the header appearance. # Vibe Options Panel Vibe Options Panel or WPLMS options Panel is located just below the Appearance section in WordPress admin panel. The panel contains a lot of controlling options for theme. ## Getting Started ![](/files/-MJFuA4rMQ2r1a_hYcMH) {% embed url="" %} One Option is this to automatically update wplms but in case, you are installing on a fresh setup then check this {% embed url="" %} ## Header The options in this section controls the header part of the theme. It has some important controls like: ### **Upload Logo** Upload or choose an image from the Media gallery as your site logo. ![](/files/-MJFvbC6R1DJR06Cg7uH) **Upload Logo for Mobile :** Upload or choose an image from the Media gallery as your site logo for Mobile. Uploaded Logo Image here will be visible only in mobile devices. ![](/files/-MORuz4piEM-Z7SdeBUY) **Upload Alternate Logo :** This Logo is shown in header when it becomes fixed or in the Header top or wherever the logo is not there by default this alternate logo will be visible. **Upload Favicon :** Upload or choose an image from the Media gallery as your favicon. A favicon is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is called up. ![](/files/-MJFwBaHTI9mv8lkujwv) ### **Fix Top header on Scroll** Fix the top header which has the login controls, on site scroll. You can fix the top header on scroll or remain it static so that whenever user scroll down the page the header do not scroll down with the page. ![Header on scroll](/files/-MJFwbq3CbOv1DELsg1n) ### **Navigation Search as Course Search** Enabling this option would force the default search in main menu to search for entered text only in courses. The result of this search is displayed in a special course search page. ![](/files/-MJFxNiZKqePqZ4k69Y-) ### **Header Top Content - standard header** You can Write the HTML here. It will be shown in the header. ***Only Selected header styles have this features***. So you have to first select header style from wp-admin > Appearance > Customize > Header > Header Style ![](/files/-MJFzJTv9OrHAvnU0z1t) ### **Header Content** You can Write the HTML here. It will be shown in the header. You can even add banner images, an important information, social icons images, or a shortcode as well. Whatever you will add here it will be visible at the top ![](/files/-MJFzUBE6IBtVbDkLNai) ### **Upload Title Background - transparent header** If your Header style is set as "transparent header" from wp-admin > Appearance > customize > header > header styles then this option will be visible here and you can upload image here which will be set as a page's title background ![](/files/-MJG-McXD8eYYOqmaF_E) ### **Title Text Color** Similarly, you can set the text color of title globally from here. ### **Custom Header \[ Elementor / Divi]** Now you can create your own header styles using any of the page builder. But first switch to "Offload". Now, our header css will stop loading and the Page Builder Style will apply on Headers ## SideBar Manager This section deals with Widget areas or sidebars. This functionality allows you to create unlimited sidebars in the theme. These sidebars are particularly useful when you want to have custom widget area/sidebars for a course, page or post. ### **Create new sidebars** As you can see in the wp-admin > Appearance > Widgets there are already sidebars present which is useful for all the purposes. What if, you want to create your own sidebar. To create own sidebar is needed when we use megamenu instead of simple navigation menus. ![](/files/-MOKI9Z-YoAorgygBSup) ### **Import/export sidebar settings** * Through this setting you can easily import sidebar settings in your current demo from another demo. Paste the code in the **import code** setion and click on import. This will import your sidebars from other demos as well as the widgets used in it. No need to set those widgets manually. * **Import/export widget settings :** This will import/export widget settings from other demos to your demo. ## BuddyPress This section deals with managing Buddypress Settings and controls within the theme. A lot of functionality has been built in the theme related to BuddyPress. Following parameters allows a user to effectively control privacy in BuddyPress. * **Upload Buddypress default avatar :** This is the default member avatar. When no avatar is set for any of the member then this avatar will be visible for all the members after logging in. ![](/files/-MOL22CWaprArYxpJvrl) * **Hide WP Admin bar :** You can hide the WP Admin bar for students, student and instructor or alternatively you can hide it for all users. As you can see in the image, that the user is an administrator but still he cannot access admin bar because it is disabled for everyone ![](/files/-MOS7pVDfNNbjsL-Ko1J) **WP Admin Area Access :** You can set the admin area access to all Users, Admins and Instructors or alternatively to Admins only. Using this feature, you can also restricts the instructors from accessing backend. Then Instructors can only access Frontend. Using the above setting will only hide the admin bar but this will restrict the access. * **BuddyPress items per page\[No longer required] :** This setting no longer required because now directory pages settings are controlled with Elementor. * **All Members View :** Control who all can view all members**\[Member Directory]** in your BuddyPress site. After setting the all members visibility, only group of those members are allowed to view members directory. As you can see in this image that, user is logged in as instructor and setting is set to show members directory only for Administrators so it is no longer visible fro instructors or for other user roles. ![](/files/-MOS7wlXekaav-ZjRcSh) You Can Create any page as Members Directory by Adding The Elementor Members Directory Component and then connect this page in wp-admin > Settings > BuddyPress > Pages > Members * **Single Member Profile view\[Legacy] :** This setting will no longer work so please check in vibebp - settings - Buddypress Tab - Disable Public Profile * **Single Member Profile Tabs visibility :** No longer works in v4 because now everything is managed from Members Area and other users can only check those things which are added in Profile Layout * **All Members No-Access Page :** The redirect page for users who are not allowed to access the All Members page or you can say Members Directory. As you checked in above setting that we can restrict the access of Members Directory for user groups, In that case, you can set a page here to show a notice or something like this page cannot be access by you. * **Activity View :** Control who all can view all activity in your BuddyPress site. Activity Stream or Buddypress Activities is a feature of Buddypress which records everything. You can check [**here**](https://buddypress.org/about/activity/)**.** * **Restrict Student Activity View :** No longer working in v4 * **Activity No-Access Page :** The redirect page for users who are not allowed to access the Activity page. The page which is set as "Activity Directory" page in wp-admin > Settings > Buddypress > Pages Tab > Activity. It will no longer accessible for the restricted user roles and those users will be redirected to this page which is set here. * **Group directory View\[All Groups Page] :** From the options given there, you can restrict the groups Directory visibility from here. {% hint style="info" %} You Can Create any page as Group Directory by Adding The Elementor Groups Directory Component and then connect this page in wp-admin > Settings > BuddyPress > Pages > User [Groups](https://buddypress.org/about/groups/). But this Option will be only visible when User Groups will be enabled from components tab. {% endhint %} * **Group directory no-access redirect Page :** The redirect page for users who are not allowed to access Group Directory. * **Create Groups :** Control who can create groups. All Members or All Instructors or Admins only. As you can check in this image, the user "Frenzy" is logged in as instructor and the setting is set as "Members only". So the create group option is visible to instructor as well. If it is set as Admin only then you will not find this option of creating groups for instructors ![](/files/-MOSHwdkxp9VSyH5U_yG) * **Create Blog (multisite) :** Control who can create Blogs in multisite. All Members or All Instructors or Admins only. * **Show Members Meta info :** No longer supports in v4 * **Profile Activity Tab :** No longer supports in v4 * **Profile Group View :** No longer supports in v4 * **Profile Forums View :** No longer supports in v4 * **Redirect Page on User Activation :** When a user registers via BuddyPress registration form and activates her account from the activation link in email, he/she is redirected to the page selected in this option. * **Enable Join Group/Request Membership button :** No longer Supports in v4, this join button you can directly control from Elementor Controls by editing the groups directory ![](/files/-MOSI2VqikeAprHPA4gN) * **Student Field :** No longer supported in v4 * **Instructor field :** No longer supported in v4 * **Instructor Field group :** No longer in v4 * **Instructor PayPal field group :** Field name that shows for Instructor PayPal ID. **refer this video:** [**Tutorial**](https://www.youtube.com/watch?v=TeVJs0dw-Os) * **Instructor Description Field :** No longer supported in v4 * **Enable Ajax Registration and Login :** No longer supported in v4 * **Custom Registration Page :** It Overrides the default registration page from Buddypress and shows the custom registration page link in the login popup. **Refer The Tutorial :** [**Customizing Registration Page In BuddyPress**](https://www.youtube.com/watch?v=kTyHuphnJrE) ## Setting up Fonts {% embed url="" %} ## Course Manager This is the most important section of WPLMS. However several settings in this area are now legacy settings as WPLMS now runs more as a plugin than a theme. The settings explained here will be according to v4. So, Please do not mix these settings with v3 * **Take This Course Page:** Set this page to "none" for v4 * **Connect Edit Course Page:** Set this page to "none" for v4 {% hint style="info" %} After setting the pages to "none", Enable this setting from wp-admin > LMS > Settings > Full Course Status in Course pages. \[No BP Single Page] and this will load course status page from course page instead of loading course status page inside PWA {% endhint %} * **Notes & Discussion Page** * **Maintain accurate Student Count\[Legacy]** - Not Compatible with v4 * **Disable right click in Course status page** * **Tab style course layout\[Legacy]** - Not Compatible with v4 * **Course status templates\[Legacy]** - Not Compatible with v4 * **Admin Approval for Course\[Coming Up]** * **Unit Locking** * **Unit Media Lock** * **Assignment Locking** * **Instructor Can Add Students** * **Instructors can Assign/Remove Certificates & Badges** * **Instructors can Extend subscription** * **Force Instructor Content Privacy** * **Leaderboard/Stats Visibility\[Legacy] -** Not Compatible with v4 * **Become an Instructor Page** * **Fallback Certificate Page** * **Course default avatar** * **Hide Courses from Directory** * **Course Duration parameter** * **Finished Course Access -** *\[For finished course access Global login is required]* * **Notes and Discussion styles\[Legacy] -** Not Compatible with v4 * **Display News** * **Enable Levels** * **Enable Course Location** * **Enable Linkage** * **Course Category/Level/Location redirect** * **Default Course Block Style** * **Show related courses at the end of single course** ## Footer Footer is the section lies at the bottom of every page. You can disable the footer or customise it as per your requirements. Footer in WPLMS is built using Widgets. And you can control widgets width as well. ### Footer layout ![Footer columns](/files/-MOGoZzsfcJ_ibsIQaPO) ### Double or Single footer ![Set single footer or Double footer](/files/-MOGolUgxPJp3-Ijzvab) ### Setup widgets in footer ![Manage footer widgets.](/files/-MOGqAJz9SHLuGS7CLAU) ### Setup Footer logo and Copyright test ![Change copyright and set Footer logo](/files/-MOGpMokUEYkEbiXVsvj) ## Social Information ## Miscellaneous ### Page Loader ### BootStrap 4 & Offload scripts ### Offload FontIcon & Fontawesome 4.7 ### Disable WebP & SVG Support ### Vibe Page Builder ### Site Lock ### Site Lock Logo Link Page ### Unique Security Key ### Default Archive style ### Default Excerpt Length ### Remove Extra checkout fields ![](/files/-MOGKtFjjJD8lbTIWfKR) ## Demo Switcher # Sidebars & Widgets This page describers various sidebars/Widget area in the WPLMS and widgets. **Sidebars and Widgets can be set up in WP Admin Dashboard->Appearance->Widgets.** In WPLMS we use the terminology [**Side**](https://developer.wordpress.org/themes/functionality/sidebars/)[**bar**](https://developer.wordpress.org/themes/functionality/sidebars/) for Widget areas in the theme. The sidebars are used in almost all the pages in WPLMS. Although sidebars are configurable for each post type like page, post, course, unit etc. each post type has a default value of the sidebar. Description of each sidebar is explained below. ### Registered Sidebars 1. **Student Sidebar :** This is the dashboard sidebar for students. This sidebar is visible on the dashboard area of students. Any widgets added in this sidebar will appear in the student dashboard. 2. **Instructor Sidebar :** This is the dashboard sidebar for instructors. Similar to student sidebar, this sidebar is visible on the dashboard area of instructors. Any widgets added in this sidebar will appear in the instructor dashboard. 3. **Main Sidebar :** This sidebar is the default sidebar for all the pages, posts, archive, category pages etc. For posts and pages you also get an option to override this sidebar from page/post settings area. 4. **BuddyPress :** This sidebar is shown on All BuddyPress pages like All members, All groups, All forums, All courses page and all activity. 5. **Course Sidebar :** This sidebar is the sidebar which is shown on single Course pages. You can also set a custom sidebar for any course from the course settings area while editing the course in wp admin area. 6. **Search Sidebar :** This sidebar is the sidebar on the default Search and course search pages. 7. **Shop :** This sidebar is shown on WooCommerce shop page. 8. **Product :** This sidebar is shown on All Product pages. 9. **Checkout :** This sidebar is shown on checkout page below the coupon widget. 10. **Top footer Sidebar :** This sidebar is shown on Footer top row. You can chose to show/hide this sidebar based on the footer layout value which can be set in Customizer - Footer. 11. **Bottom footer Sidebar :** This sidebar is shown on Footer bottom row. You can chose to show/hide this sidebar based on the Footer layout value set in Customizer - footer. 12. **Megamenu :** This is sidebar created from Sidebar manage in options panel. We'll use this sidebar in creating a Mega menu. Refer to [**Mega menu section**](http://vibethemes.com/documentation/wplms/knowledge-base/setting-up-mega-menu-in-wplms/) on how to use a sidebar for mega menu. 13. ***Vibebp Member Dashboard*****\[New in v4]:** This sidebar is introduced in v4 so if you will add widgets in this sidebar it will be appear in Adminstrator's Dashboard. The instructor and Student Sidebar is already explained above ![](/files/-MOGHIOiGZ94veqqQpeL) **You can create unlimited sidebars using Options Panel -> Sidebar Manager.**[
](https://vibethemes.github.io/wplms-docs/assets/images/demo/sidebars_backend.png) ![Vibe Options Panel](/files/-MJFqx36As8-xp25rCKj) ### VibeBP Dashboard Sidebars This is a dashboard sidebar. A special sidebar built for dashboards. Any widget that you add here shows up in the Dashboard area. ![](/files/-MJHNhASueH5Ci3RiLLH) ### Widgets A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. # Footer Learn how to edit footer Footer in WPLMS is created using Widgets. If you simply edit the widgets you can edit the footer. {% embed url="" %} editing footer widgets {% endembed %} # Icon Set The icon set used in WPLMS v4 is small. Total size 360kb (compared to 1500kb fontawesome) including fonts and only comprises of necessary icons. ![](/files/-MK-KECy6n1_AjWFjWst) ![](/files/-MK-KK6aNQcthtANZbfL) ![](/files/-MK-KQtvt2wu5vxjM-mA) ![](/files/-MK-KXHqJW3q4hUPaABn) ![](/files/-MK-KbJXXyAqdkkds7pQ) ![](/files/-MK-KgnRMaXa4E7-g08u) # Required pages for WPLMS Following is the list of required pages for WPLMS with their description. ### BP Single page This is an important page, even though it is optional, we configure it by default. This is the page where entire App works. {% content-ref url="/pages/-MQwQlpNFVW5NVKt8v7U" %} [BuddyPress Single page](/administrator-guide/step-by-step-guide-for-administrators/buddypress-single-page) {% endcontent-ref %} ### Course Directory The page where you want to show all the courses. This is the page connected with BuddyPress at WP admin - Settings - BuddyPress - Pages - Course. When you enable WP admin - WPLMS - Course manager - redirect course categories/levels to directory this setting becomes important. The slug of this page also sets the url of the course. To edit the page in Elementor, you will need to disconnect the page from Buddypress and after editing , reconnect it with buddypress. ### Activity Page This page is not required and automatically created by BuddyPress. ### Members Page This page is the members directory. The slug of this page is used in the url of members profiles. If you have private member profiles not visible to public / non-logged in members then you can very well remove this page. Removing this page you will need the buddypress single page. ### Register Page This is default registration page for buddypress. This page can also be safely removed as registration is inbuilt in the VibeBP / WPLMS. ### Activate page This is an important page and required for manual registration and activations that happen in your site. ### Certificate page This is the default certificate page, a blank page with page template certificate connected at WP admin - WPLMS - course manager - certificate fallback. This page is used by the certificate validator to validate certificates using certificate codes. IF you are using PDf certificates then you need the page. ### Contact page This is the contact page totally optional. It uses an embedded Google map whose coordinates ar entered in WP admin - WPLMS - Misc. ### Course Status Legacy page, no longer required in WPLMS. However if you still want to use version3, this can still be used to activate verison 3 course status in version 4 framework. ### Edit course Legacy page, no longer required in WPLMS. This used to be the page to edit the courses in version 3 framework, however with TinyMCE and classic editor being removed in WordPress core by december 2022 it may stop working or require an additional plugin to work. ### Shop page This is the WooCommerce shop page, where all products are listed. Required if you are selling courses via WooCommerce. ### Cart & Checkout page These are again important pages of WooCommerce. Required if you are selling courses via WooCommerce. # BuddyPress Single page One of the most useful setting in WPLMS. Run your entire Application in 1 single page. This gives great benefit that your entire LMS runs as a SPA ( single page application ) without page loads and provides all functionality necessary. ### Setting up 1. Create a new blank page 2. Add 2 shortcodes in this exact sequence : ``` [vibebp_login] [vibebp_profile] ``` 3\. Set page template as "Barebones" or "Elementor canvas" 4\. Publish the page. ### Set as BuddyPress single page. 1. Go to WP admin - Vibebp - settings - General 2. Locate setting BuddyPress single page 3. Set this page and save vibebp settings. # Extending Options One of the biggest advantages of WPLMS is its flexible framework and extendible framework. # Adding Captcha to Forms Login captcha, Google captcha Simply enter captcha to your forms. Default Registration form by adding captcha settings. ### How to get Captcha Keys ? {% embed url="" %} # Adding Custom Sections in Courses Add custom sections in Course Creation and Show in Course layout {% hint style="info" %} Custom Course Nav Plugin Download here : {% endhint %} Install the plugin from WP admin - Plugins section With this plugin you will be able to :\ 1\. Hide/Show course settings in front end and back end as well .\ 2\. Create custom sections in course. ### **1. Custom sections :** Activate the plugin. \ This will add a new custom section in your course .\ a. To begin with just click on “Add section” section .\ b. It will show a form to add a section which will have 5 settings namely : Post activation locate this screen in your WP admin area. i. Section title\ ii. Section slug : For the slug and permalink settings .**This must be unique and does not contain any spaces .** iii. Section description iv. Section courses(in which courses it should be visible)\ v.Section visibility (to which users it will be visible) . c. After filling the section info click on add section button at the bottom of the form . d. It will add the section .Similarly, you can add as many section you want to .\ Sections will be saved only when you click on Save section button . ![](/files/-MK8QHOm70m-kuvEnfNv) e. You can edit or remove sections By clicking on the edit and remove links . ![](/files/-MK8QR2Fzs1fKz4sGL9X) {% hint style="danger" %} **Please do not forget to re-save permalinks after each section you save by clicking on save section button .** {% endhint %} You can see the custom sections added in course settings : ![](/files/-MK8mhCJzGT5Voz-alYP) Information in these sections can be put in course layouts using Course Info elementor block . ![](/files/-MK8o9yJTAF57jeMpxu0) TIP : you can add tabs from elementor and can use the course info blocks to add different course custom tabs . ### **2. Front end course creation .** a. All the course settings will be listed and their corresponding hide/show with default values .\ PS : leave default value as blank if you do not want any defaults .\ b. There are some settings for which defaults are not available as they can be saved as blank .\ c. Just select the settings that you want to hide show in front end as well as back end for instructors . For example i will hide and set defaults duration and its parameter from instructors .\ It will not show for instructors in front end course creation or edition . ### Video Walkthrough {% embed url="" %} # Members Area This sections deals with how to customise members area. {% content-ref url="/pages/-MJmWWnomyKZwr1Mc8BS" %} [Dashboards](/members-area/dashboards) {% endcontent-ref %} # Dashboards The dashboard is the default component that loads up when user opens his profile. You can customise the dashboard area very easily. **The dashboards are built using Widgets.** The widgets are set in respective sidebars. Each widget displays relevant data for which it is configured. ## VibeBP Member Dashboard This is the default sidebar that comes up for members unless customised. If you are using WPLMS then the users with [user role](https://wordpress.org/support/article/roles-and-capabilities/) "Student" will see a **Student sidebar** and users with "Instructor" user role will see **Instructor sidebar**. Whereas the administrator will see this VibeBP Member dashboard sidebar. The dashboard is a "One Stop" snapshot of what is going in the site for the user. For example an administrator will like to see what all sales happened in site. An instructor would like to see how many students subscribed to his courses. A student might want to see the progress in various Courses he is enrolled into. So for all these small requirements a user can simply use the dashboard area. This area is created using Widgets. These widgets are set in the Sidebars / Widget areas of WordPress. ![Dashboard Widget areas](/files/-MJu2JrMeeo5_vkZe5sV) Now technically you can add any widget into these Sidebars/Widget areas but as these widgets are loaded in run time , third party widgets which are interactive or want user input would not work correctly here. To simplify this, we have created a big set of dashboard widgets. Simply search for "Dashboard" in your Widgets screen and you will find what all widgets you can embed in the sidebars. ## Adding External Link in PWA {% embed url="" %} # Profile Users can edit and maintain their profiles here. As administrator you have the ability to add profile fields which the user fill out, to complete their profiles. ## Creating Profile Fields Simply go to WP admin - Users - Profile Fields and you can add custom profile fields. Profile fields can be grouped into Profile Field Groups. To create a profile field group : ![WP admin - Users - Profile Fields](/files/-MK5CISh4ynOz6sH3jVA) {% hint style="warning" %} **Primary Field Group & Field** There is a primary field group and a primary field. Do not delete these under any circumstances. These are 2 values which are used internally by BuddyPress. The Primary field group is also displayed on BuddyPress registration page that you set at WP admin - Settings - BuddyPRess - Pages - Register ( requires WP Admin - settings - general - anyone can register ) {% endhint %} ![Creating Custom profile groups.](/files/-MK5Ck8RggTCJ4-_x2tM) On the members area it displays like the following : ![Members area display of profile field groups.](/files/-MK5DHg0hcFlKTgGjopt) ## User Specific Members Area {% embed url="" %} ## Show Instructor Controls To Instructors Only {% embed url="" %} # Setting Up Layouts Setting up directories, member profiles, member cards, course layouts and cards. ## Profile and Directories {% embed url="" %} Extending Profile and cards to custom member specific. {% embed url="" %} ## Course Directory & Layouts {% embed url="" %} # PWA Setup PWA for your site. ### Setting up {% embed url="" %} ### Colors ![](/files/-MO_M8QpQ9Xz7yWD3sir) ## RESILIENT PWA {% embed url="" %} ## PWA FAQs ### PWA builder is showing error 500 ![](/files/-MOKksLfCVa8FgpXU8ZQ) While Generating Android App this issue is faced by some users when your icon image is not of 512x512 px in size. ### PWA Plus icon does not appear. The + Icon will not appear in your PWA because of many reasons. There are 2 files required for PWA, 1. Manifest : manifest.json : 2. Service Worker : firebase-messaging-sw\.js : example : Both are located in your website root. So you should be able to access them like above links for vibethemes.com Possible reasons for PWA not working : 1. Missing Manifest 2. Missing Service worker file 3. Missing Icons in Manifest.json 4. Javascript errors in Service worker file 5. Scope mismatch of manifest and serviceworker 6. HTTPS missing 7. Huge Page and loading times Each of these have a different debug method and for 1,2,3,4 you can attempt re-generating the service worker from WP admin - Vibebp - Settings- BuddyPress but in general to debug you have to open your site in chrome browser and look for errors in Application : ![](/files/-ML8J_oBIdCsGUJ1nv36) ![](/files/-ML8JMhjv_ELcgKz31TW) ![](/files/-ML8JWFNmTTtjeKPamLT) ### ### Editing Elementor Pages When Service Worker is Enabled When Service Worker is enabled in Vibebp - Settings - General. You are not able to edit the pages in Elementor. This happens as the service worker caches scripts and Elementor is not able to work properly. The quick fix is to unregister the service worker on the page while editing in elementor. ![](/files/-MV6Mouw6AjIHidbsQ4i) After clicking Unregister, reload the page and your page starts loading normally. This will work with all the page builders(whatever you are using). # Android App ### How to publish android app Once the PWA is published, make sure the service worker and manifest.json are already there. yoursite.com/manifest.json is the manifest file. yoursite.com/firebase-messaging-sw\.js is the service worker. {% embed url="" %} ### Remove URL bar in Android app Once the app is there on Google playstore. Locate the "App Integrity" in Google playstore console and locate the SHA-256 fingerprint for your app. Copu and paste it in the asset links file, making sure that the package\_name is correct. ![](/files/JUT64JrWZ1r6AMKrsePi) # Translation Guide This guide will walk you through adding your own translations to a theme or a plugin that has already been set up for translation. Changing in the original files is not a good idea, because after updating theme or plugins you will lose all your translations. In wplms, we are using [**Loco Translate Plugin**](https://wordpress.org/plugins/loco-translate/) which is really easy to use and easy to setup as well. It's a free plugin and you can read more about this plugin in the [**docs**](https://localise.biz/wordpress/plugin/beginners)**.** **There are 3 important things after setting up Loco Translate Plugin** ​ > MO files: MO, or Machine Object is a binary data file that contains object data referenced by a program. It is typically used to translate program code, and may be loaded or imported into the GNU gettext program. > > PO files: PO files are the files which contain the actual translations. Each language will have its own PO file, for example, for French there would be a fr.po file, for german there would be a de.po, for American English there might be en-US.po. > > POT file: POT files are the template files for PO files. They will have all the translation strings left empty. A POT file is essentially an empty PO file without the translations, with just the original strings. ## Steps **Please follow the steps below for translation** * First Step, is to check your site language and for that Go to wp-admin > Settings > General Settings > Site Language * After Activating Loco Translate Plugin, Click on Loco Translate Plugin and Choose the plugin/theme which provides the text that you want to translate. * Click on that plugin/theme. Some settings will appear. * Now, this is an important step. Your site Language decides in which language you have to add translations. For Example: your site language is English(US) and you want to translate text into the German Language. Then Choose the English Language here and add strings translation in the German Language. ![](https://gblobscdn.gitbook.com/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MKxGc0mDkTRAsYpkX2U%2F-MKxM-wT4C31Nyl_s7Fb%2Ftranslation1.png?alt=media\&token=6a70c468-a5bd-4163-b560-fed790f06cb7) Selecting site language to add translation * In any case, you will not find your site Language here, then you have to click on New Language and Select your language. This will create a new po and mo file in your language. ![](https://gblobscdn.gitbook.com/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MKxGc0mDkTRAsYpkX2U%2F-MKxNISLJ-UCBFF-OWVU%2Ftranslation2.png?alt=media\&token=b6054357-b61f-4c38-8dd0-d3af2e11f0cd) ![](https://gblobscdn.gitbook.com/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MKxGc0mDkTRAsYpkX2U%2F-MKxNUlVEiBuzwQowAln%2Ftranslation3.png?alt=media\&token=f7e13199-9db9-47f8-9a88-0fe1c3c345c8) * In the above step, I mentioned Global Language Folder and Local language Folder so what it is and which Location we have to choose while creating a PO and MO file of our own Language * If you want to add your own po/mo files or your custom translation then it is strongly advised that you put **set the location as GLOBAL.** ​ **PO and MO local translation files Location** > For Themes : “wp-content\themes\wplms\languages” > > For plugins : “wp-content\plugins\pluginname\languages” **PO and MO Global translation files Location** > For Themes : “wp-content\languages\themes” > > For plugins : “wp-content\languages\plugins” > * **The Global translation files are not changed when you update any plugin or theme.** > * **Only Local Translation files are changed.** ### Translating The String * Now, you have your Language PO File, Click on Edit. Now a whole new set of settings will appear. * Click on the **Sync button.** This will sync all the strings of the newly created PO File with your POT file. Search for the text that you want to translate. * select the text. Write the translation text then click on **save.** * **If you are translating any string with Variables like %s, %d** Then You need to follow this guide. ​​ ![](https://gblobscdn.gitbook.com/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MKxPRR9JCIGhc3BTHlg%2F-MKxQkdWSy5FAmJXhDFw%2Ftranslation4.png?alt=media\&token=8c0505e7-3c36-4049-872f-b0ca76f9bb6b) * Now check the Frontend, you will see your translated text. ### Backup Translation Files Before Updating You can perform this step by inbuilt Loco Translate Plugin Feature. In any case, you saved the translation in Local Language File So what you have to do is, click on copy ![](https://gblobscdn.gitbook.com/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MKxPRR9JCIGhc3BTHlg%2F-MKxSJOB9tcdpJYI4sr_%2Ftranslation5.png?alt=media\&token=996b8e9a-43d2-49b2-9845-fe7c29ca309c) ![](https://gblobscdn.gitbook.com/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MKxPRR9JCIGhc3BTHlg%2F-MKxSPRVjhD14FGQRHtI%2Ftranslation6.png?alt=media\&token=c8b9414f-41d5-41df-af72-d65dd16051a7) * Now start Translating and your translations copied to Global language Folder. No need to translate again. ### Translations Still Not working It might be possible that you have all the translations saved in the Global Language Folder. Still, the language Folder is not loading in Frontend due to which your translations not visible in frontend. So create a copy of your translations, as instructed in above section And, create a copy of translations in your Local Language Folder as well. ![](https://gblobscdn.gitbook.com/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MKxTV7qfMHIqJwkKKPA%2F-MKxTtH1h0BqfUQjoFHt%2Ftranslation7.png?alt=media\&token=a2d74513-a33c-45d5-9f74-342f9dced2b2) Translating Profile Menu You don't need Loco Translate Plugin to translate this text. Simply Go to Appearance > Menus > and change the navigation label ![](https://gblobscdn.gitbook.com/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MKxTV7qfMHIqJwkKKPA%2F-MKxUPIYxqSVQb_9M85b%2Ftranslation8.png?alt=media\&token=9718021a-9415-4ce4-94ca-267e1c65a11d) ### Translating Members Area {% embed url="" %} ### Translating Buddypress Navigation {% embed url="" %} ## WPML WPLMS Compatibility Yes, now the WPML Plugin is compatible with v4. You can check this video tutorial. This is a multilingual plugin so you can create multilingual site with the help of this plugin. This is a paid plugin and not a part of WPLMS product or not included in the package. There are the package according to users so you can choose from these packages and use that. For more information, do visit [**WPML site**](https://wpml.org/home/about-us/) {% hint style="warning" %} **WPLMS plugin version 1.5.1 and Vibebp 1.5.0.3 required.** {% endhint %} {% embed url="" %} ​ For translation Queries, create Ticket here: ​ ​ ​ ​ # WPML Integration - MultiLingual sites Install WPML plugin for multilingual translation. See working demo at {% embed url="" %} ### Installing Plugins Install WPML Translation along with String translation and the WPLMS WPML Translation ![](/files/-MT6Apx5QTlhzz-bV1CL) Install the WPML WPLMS integration plugin from below : {% embed url="" %} ### Necessary Settings Required settings for WPML apart from regular WPML settings. WP admin - WPML Languages - Enable Ajax ![](/files/-MT6H4fqkfaliKKGwTPO) Translate course layouts in WP Admin - Vibebp - Coure layouts ### Do not sync Menus but create new ones 1. Translate the Loggedin Menu and Profile Menu 2. Do not sync menus in WP admin - WPML - Menu translations ![](/files/-MT6HC1-9o_A3sdkayJf) ### Refresh BuddyPress Navigation in each language After setting up each menu, make sure you click on BuddyPress refresh navigation button at WP Admin - Vibebp - settings - buddypress for each language. Note if you add new plugins to the PWA / Members area, then you'll need to follow this step again. ### Use BuddyPress Single page Enable BuddyPress single page and make sure the translated version of each page is available. {% content-ref url="/pages/-MQwQlpNFVW5NVKt8v7U" %} [BuddyPress Single page](/administrator-guide/step-by-step-guide-for-administrators/buddypress-single-page) {% endcontent-ref %} Translate other pages like Course directory, Members directory as recommended by WPML. ### Custom XML Configuration Go to WP Admin - WPML - Settings add following configuration ``` ``` ![](/files/-MT6Vyk7v0CnfpdhOCrc) Next you will see translation option in WP admin - WPML - String translation to translate the strings : ![](/files/-MT6WJWxbp9LS5jjidx9) And the translations applied in different languages : ![](/files/-MT6WeUR-5EgA7NsZKVQ) {% embed url="" %} # Buddypress Translation ### **You can download Buddypress’ 100% Translation Files from here :** [**https://translate.wordpress.org/projects/wp-plugins/buddypress**](https://translate.wordpress.org/projects/wp-plugins/buddypress) **1. Go to This link** [**https://translate.wordpress.org/projects/wp-plugins/buddypress**](https://translate.wordpress.org/projects/wp-plugins/buddypress) ![](https://i0.wp.com/image.prntscr.com/image/44543d362c4f4589acc59f26bdd9603a.png?resize=727%2C368) **2. Choose Portable object message catalog in the drop down menu (po/pot)** ![](https://i1.wp.com/image.prntscr.com/image/62b62c9795774b74a060ab2263f2ee05.png?resize=734%2C387) **3. Po file will be downloaded** ![](https://i0.wp.com/image.prntscr.com/image/1166c8d24f17429fb9c154c9c8fc5ccf.png?w=920) **4. Now Choose Machine object message catalog in the drop down menu (MO)** ![](https://i0.wp.com/image.prntscr.com/image/1c728c2b892748479a46110832f48db2.png?w=920) 5\. MO file will be downloaded. 6\. **Make a copy of the DOWNLOADED PO FILE**. 7\. So now, there are three files ![](https://i2.wp.com/image.prntscr.com/image/8656f7c8292245c081ba00e4351f02dc.png?w=920) * PO FILE * MO FILE * COPY OF PO FILE 8\. NOW IT’s Time to rename these files. PO FILE : **buddypress-xx\_XX.po** MO FILE: **buddypress-xx\_XX.mo** COPY OF PO FILE: **buddypress.pot** Where xx\_XX denotes the language code. For english usa, lanugage code is **en\_US** for Portuguese brazil, language code is **pt\_BR** 9\. Now there are THREE files * **buddypress-xx\_XX.po** * **buddypress-XX\_XX.mo** * **buddypress.pot** ![](https://i2.wp.com/image.prntscr.com/image/d9984696671441b3be679780bdf2cd8b.png?w=920) 10\. **NOW VIA FTP OR CPANEL** Go to **wp-content/languages/plugins/** folder Copy **buddypress-xx\_XX.po** and **buddypress-XX\_XX.mo** files there. ![](https://i0.wp.com/image.prntscr.com/image/b619f775543c41f8906874f30d11984e.png?w=920) 11\. Go to **wp-content/plugins/buddypress/** folder Copy **buddypress.pot** file there. > **DONE.** > ## **MANUALLY TRANSLATE BUDDYPRESS** 1\. Install and Activate Loco Translator Plugin.\ 2\. Go to wp-admin->loco translate->plugins->Choose BuddyPress ![](https://i1.wp.com/image.prntscr.com/image/0ca381acc8114b8faf1290f024230d48.png?w=920) 3\. Click on buddypress ![](https://i0.wp.com/image.prntscr.com/image/f1d9c3c1d4c143b38d081015f974fa4b.png?resize=344%2C363) 4\. **Now click on edit template if template is already created.** **Otherwise you will have to create a template.** ![](https://i1.wp.com/image.prntscr.com/image/b26eaeaca85b41d68cd1004cfc31272a.png?w=920) **OR** ![](https://i0.wp.com/image.prntscr.com/image/f7a4ee7917264f638b26f7b212ea3164.png?resize=424%2C200)![](https://i0.wp.com/image.prntscr.com/image/95bb71aa19424561a962109b28f4e7a6.png?resize=427%2C288) 5\. **After clicking on EDIT TEMPLATE** , Now a page will open. **Click on sync and save** to syncronise the pot file.![](https://i2.wp.com/image.prntscr.com/image/9d439ee7598c4d54a0e38582fa978adb.png?w=920) 6\. Now Select the language translation file or create a new language translation file. ![](https://i0.wp.com/image.prntscr.com/image/4b442c3f3bdf49d6a96e84afc9d4d297.png?w=920) 7\. After selecting the language, a new page will open.\ 8\. Click on **sync** to syncronise the po and mo files with the pot file.\ 9\. Search for the string that you want to translate.\ 10\. Write the intended translation .\ 11\. Click on Save.\ 12\. You can Download the po and mo translation files for BACKUP. ![](https://i1.wp.com/image.prntscr.com/image/07754235da8a47d1afc89ee63d14d8ca.png?w=920) ![](https://i0.wp.com/image.prntscr.com/image/46d703a1de9e44ca9d5048fd2983b131.png?w=920) 13\. **If you are translating any string with Variables like %s, %d** Then You need to follow this guide. > FINALLY CHECK THE FRONTEND TO SEE YOUR TRANSLATED TEXT. #CHEERS. **\*\* IF THE TRANSLATION DOESN’T WORK \*\*** 1\. Login to your website Via FTP.\ 2\. Make Sure the **buddypress-xx\_XX.po** and **buddypress-xx\_XX.mo** (Example: For English(US), the translation files will be buddypress-en\_US.po/mo) translation files of the buddypress are located in This Folder. > **/wp-content/languages/plugins/** {% embed url="" %} ### *Related* # Buddy Press Translation Guide Using Loco Translator ### **You can download Buddypress’ 100% Translation Files from here :** [**https://translate.wordpress.org/projects/wp-plugins/buddypress**](https://translate.wordpress.org/projects/wp-plugins/buddypress) **1. Go to This link** [**https://translate.wordpress.org/projects/wp-plugins/buddypress**](https://translate.wordpress.org/projects/wp-plugins/buddypress) ![](https://i0.wp.com/image.prntscr.com/image/44543d362c4f4589acc59f26bdd9603a.png?resize=727%2C368) **2. Choose Portable object message catalog in the drop down menu (po/pot)** ![](https://i1.wp.com/image.prntscr.com/image/62b62c9795774b74a060ab2263f2ee05.png?resize=734%2C387) **3. Po file will be downloaded** ![](https://i0.wp.com/image.prntscr.com/image/1166c8d24f17429fb9c154c9c8fc5ccf.png?w=920) **4. Now Choose Machine object message catalog in the drop down menu (MO)** ![](https://i0.wp.com/image.prntscr.com/image/1c728c2b892748479a46110832f48db2.png?w=920) 5\. MO file will be downloaded. 6\. **Make a copy of the DOWNLOADED PO FILE**. 7\. So now, there are three files ![](https://i2.wp.com/image.prntscr.com/image/8656f7c8292245c081ba00e4351f02dc.png?w=920) * PO FILE * MO FILE * COPY OF PO FILE 8\. NOW IT’s Time to rename these files. PO FILE : **buddypress-xx\_XX.po** MO FILE: **buddypress-xx\_XX.mo** COPY OF PO FILE: **buddypress.pot** Where xx\_XX denotes the language code. For english usa, lanugage code is **en\_US** for Portuguese brazil, language code is **pt\_BR** 9\. Now there are THREE files * **buddypress-xx\_XX.po** * **buddypress-XX\_XX.mo** * **buddypress.pot** ![](https://i2.wp.com/image.prntscr.com/image/d9984696671441b3be679780bdf2cd8b.png?w=920) 10\. **NOW VIA FTP OR CPANEL** Go to **wp-content/languages/plugins/** folder Copy **buddypress-xx\_XX.po** and **buddypress-XX\_XX.mo** files there. ![](https://i0.wp.com/image.prntscr.com/image/b619f775543c41f8906874f30d11984e.png?w=920) 11\. Go to **wp-content/plugins/buddypress/** folder Copy **buddypress.pot** file there. > **DONE.** > ## **MANUALLY TRANSLATE BUDDYPRESS** 1\. Install and Activate Loco Translator Plugin.\ 2\. Go to wp-admin->loco translate->plugins->Choose BuddyPress ![](https://i1.wp.com/image.prntscr.com/image/0ca381acc8114b8faf1290f024230d48.png?w=920) 3\. Click on buddypress ![](https://i0.wp.com/image.prntscr.com/image/f1d9c3c1d4c143b38d081015f974fa4b.png?resize=344%2C363) 4\. **Now click on edit template if template is already created.** **Otherwise you will have to create a template.** ![](https://i1.wp.com/image.prntscr.com/image/b26eaeaca85b41d68cd1004cfc31272a.png?w=920) **OR** ![](https://i0.wp.com/image.prntscr.com/image/f7a4ee7917264f638b26f7b212ea3164.png?resize=424%2C200)![](https://i0.wp.com/image.prntscr.com/image/95bb71aa19424561a962109b28f4e7a6.png?resize=427%2C288) 5\. **After clicking on EDIT TEMPLATE** , Now a page will open. **Click on sync and save** to syncronise the pot file.![](https://i2.wp.com/image.prntscr.com/image/9d439ee7598c4d54a0e38582fa978adb.png?w=920) 6\. Now Select the language translation file or create a new language translation file. ![](https://i0.wp.com/image.prntscr.com/image/4b442c3f3bdf49d6a96e84afc9d4d297.png?w=920) 7\. After selecting the language, a new page will open.\ 8\. Click on **sync** to syncronise the po and mo files with the pot file.\ 9\. Search for the string that you want to translate.\ 10\. Write the intended translation .\ 11\. Click on Save.\ 12\. You can Download the po and mo translation files for BACKUP. ![](https://i1.wp.com/image.prntscr.com/image/07754235da8a47d1afc89ee63d14d8ca.png?w=920) ![](https://i0.wp.com/image.prntscr.com/image/46d703a1de9e44ca9d5048fd2983b131.png?w=920) 13\. **If you are translating any string with Variables like %s, %d** Then You need to follow this guide. > FINALLY CHECK THE FRONTEND TO SEE YOUR TRANSLATED TEXT. #CHEERS. **\*\* IF THE TRANSLATION DOESN’T WORK \*\*** 1\. Login to your website Via FTP.\ 2\. Make Sure the **buddypress-xx\_XX.po** and **buddypress-xx\_XX.mo** (Example: For English(US), the translation files will be buddypress-en\_US.po/mo) translation files of the buddypress are located in This Folder. > **/wp-content/languages/plugins/** ### *Related* # Theme and Plugins Translation VERSION 3 Translation guide. ### **\*INDEX\*** > **WE RECOMMEND OUR USERS TO USE LOCO TRANSLATOR FOR TRANSLATING THE THEME AND PLUGINS :** [**https://wordpress.org/plugins/loco-translate/**](https://wordpress.org/plugins/loco-translate/) ## **1.** **Download and setup 100% Translated files of Buddypress, Woocommerce and buddydrive.** [**https://vibethemes.com/documentation/wplms/knowledge-base/buddy-press-translation-using-loco-translator/**](https://vibethemes.com/documentation/wplms/knowledge-base/buddy-press-translation-using-loco-translator/) ## **2. Start Editing our provided translation files with the theme and it’s plugins the correct way.** 1\. Go to WP Admin -> Plugins -> Add New\ 2\. Search for plugin “Loco Translate” 3\. Install and Activate the plugin.\ 4\. After Activation locate WP Admin -> Loco Translate [![loco\_translate\_1](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?resize=300%2C215\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?ssl=1) 5\. Click on Loco Translate. 6\. Choose the plugin/theme which provides the text that you want to translate. [![screenshot\_2](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?resize=300%2C147\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?ssl=1) [![screenshot\_4](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?resize=300%2C140\&ssl=1)](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?ssl=1) [![screenshot\_3](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?resize=300%2C142\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?ssl=1) 7\. Click on that plugin/theme. Some settings will appear. 8\. **Now click on edit template.** ![](https://i2.wp.com/image.prntscr.com/image/ba5120385efc47899f8f3e029083f070.png?w=920) 9\. **After clicking on EDIT TEMPLATE** , Now a page will open. **Click on sync and save** to syncronise the pot file. ![](https://i0.wp.com/image.prntscr.com/image/1eff5df20d57456d8be7a1aa736c7088.png?w=920) 10\. Now go back to **wp-admin->loco translator->plugins->select that plugin.** 11\. Now click on **COPY** on the language that you want to edit that is provided by us with the plugin. ![](https://i0.wp.com/image.prntscr.com/image/5091849295354a66b35af012470e2d93.png?w=920) 12\. Some Settings will appear. 13\. Now choose the exact language that you selected in the previous step. Choose system language and copy translations from XX. Click on start translating, it will create a copy of the translation file in the global folder. ![](https://i2.wp.com/image.prntscr.com/image/b7050d517ec94ea4b8a80dfab5ba48e1.png?w=920) 14\. Click on sync and save. ![](https://i1.wp.com/image.prntscr.com/image/b54d94fb467142d1b21e7c03eec44b4a.png?w=920) ![](https://i1.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_7.png?w=920\&ssl=1)[![screenshot\_7](https://i1.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_7.png?resize=300%2C141\&ssl=1)](https://i1.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_7.png?ssl=1) 15\. Now you can simply add your translation strings and then save them. All that translation that you make in this global file will retain even after updaing the theme and the plugin. 16\. Now go back to that **wp-admin->loco translator->plugins->select that plugin again** Since you have created a global translation file, now you can delete the local translation file. ![](https://i0.wp.com/image.prntscr.com/image/e88eb6f18d244ae486e680623c69bdef.png?w=920) **DONE.** ### NOW YOU CAN SUCCESSFULLY EDIT AND RETAIN THE TRANSLATION FILES PROVIDED BY US. \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ## **3. Creating your own Translation files.** WPLMS highly recommends using LOCO Translator for translation.1. Go to WP Admin -> Plugins -> Add New\ 2\. Search for plugin “Loco Translate”3. Install and Activate the plugin.\ 4\. After Activation locate WP Admin -> Loco Translate [![loco\_translate\_1](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?resize=300%2C215\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?ssl=1) 5\. Click on Loco Translate. 6\. Choose the plugin/theme which provides the text that you want to translate. [![screenshot\_2](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?resize=300%2C147\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?ssl=1) [![screenshot\_4](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?resize=300%2C140\&ssl=1)](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?ssl=1) [![screenshot\_3](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?resize=300%2C142\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?ssl=1) 7\. Click on that plugin/theme. Some settings will appear. 8\. **Now click on edit template if template is already created.** **Otherwise you will have to create a template.** ![](https://i1.wp.com/image.prntscr.com/image/b26eaeaca85b41d68cd1004cfc31272a.png?resize=320%2C191) **OR** ![](https://i0.wp.com/image.prntscr.com/image/f7a4ee7917264f638b26f7b212ea3164.png?resize=322%2C152) ![](https://i0.wp.com/image.prntscr.com/image/95bb71aa19424561a962109b28f4e7a6.png?resize=323%2C218) ![](https://i1.wp.com/image.prntscr.com/image/b26eaeaca85b41d68cd1004cfc31272a.png?resize=328%2C196) 9\. **After clicking on EDIT TEMPLATE** , Now a page will open. **Click on sync and save** to syncronise the pot file.![](https://i2.wp.com/image.prntscr.com/image/9d439ee7598c4d54a0e38582fa978adb.png?resize=450%2C342) 10\. Now Select the language translation file or create a new language translation file. ![](https://i0.wp.com/image.prntscr.com/image/e5c459a5fa14470b8ddbe988145b7072.png?w=920) 11\. Click on new language to add the language. Some settings will appear. [![screenshot\_6](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_6.png?resize=300%2C141\&ssl=1)](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_6.png?ssl=1) 12\. Choose your language and **always select the system location** ![](https://i0.wp.com/image.prntscr.com/image/681b3ccf35d24d7fb9f3b76914fbdf2c.png?resize=470%2C208) 13\. Click on start Translating. 14\. Now a whole new set of settings will appear. 15\. Click on the **Sync button.** 16\. Search for the text that you want to translate. 17\. select the text. [![screenshot\_9](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_9.png?resize=300%2C141\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_9.png?ssl=1) [![screenshot\_10](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_10.png?resize=300%2C141\&ssl=1)](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_10.png?ssl=1) [![screenshot\_7](https://i1.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_7.png?resize=300%2C141\&ssl=1)](https://i1.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_7.png?ssl=1) 18\. Write the translation text then click on **save.** 19\. You can download the PO and MO files from here. [![screenshot\_8](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_8.png?resize=300%2C140\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_8.png?ssl=1) 20\. **If you are translating any string with Variables like %s, %d** Then You need to follow this guide. > FINALLY CHECK THE FRONTEND TO SEE YOUR TRANSLATED TEXT. #CHEERS. ## **4. Backup Translations to safely update.** If you want to add your own po/mo files or your custom translation then it is strongly advised that you put **set the location as GLOBAL.** **PO and MO Global translation files Location** For Themes : “wp-content\languages\themes\” For plugins : “wp-content\languages\plugins\” **It is advised so because after each update we replace the po/mo files located in the local folders. So if you have added any translation of your own it will get replaced.** Also the priority of translation files is : 1\. Global 2. Local So always choose Global for your own custom translations. That way your custom translation will be retained even after the update. ![](https://i0.wp.com/image.prntscr.com/image/681b3ccf35d24d7fb9f3b76914fbdf2c.png?resize=470%2C208) > **GUIDE TO SAFELY BACKUP TRANSLATION FILES BEFORE UPDATING** **1.** Make a backup of all the po/mo files located in the local folders of your plugins and theme. **PO and MO local translation files Location** > For Themes : “wp-content\themes\wplms\languages” > > For plugins : “wp-content\plugins\pluginname\languages” **PO and MO Global translation files Location** > For Themes : “wp-content\languages\themes” > > For plugins : “wp-content\languages\plugins” * **The Global translation files are not changed when you update any plugin or theme.** * **Only Local Translation files are changed.** **2.** You can Also Download the po and mo files of one by one. Go to wp-admin->loco translator->choose the theme or plugin->choose the language. Now You can download the po/mo files of that plugin/theme ## **5. Synchronising your POT, PO and MO files after Update to add the new strings that are added to the source code into the translation files.** > **AFTER UPDATING PLUGIN/THEME** **Some strings maybe added, removed or changed after the update.** 1\. Go to wp-admin [![loco\_translate\_1](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?resize=300%2C215\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?ssl=1) 2.. Click on Loco Translate. 3\. Choose the plugin/theme which provides the text that you want to translate. [![screenshot\_2](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?resize=300%2C147\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?ssl=1) [![screenshot\_4](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?resize=300%2C140\&ssl=1)](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?ssl=1) [![screenshot\_3](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?resize=300%2C142\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?ssl=1) 4\. Click on that plugin/theme. Some settings will appear. 5.. Now click on edit template ![](https://i1.wp.com/image.prntscr.com/image/b26eaeaca85b41d68cd1004cfc31272a.png?resize=320%2C191) 6\. After clicking on EDIT TEMPLATE , Now a page will open. Click on sync and save to syncronise the pot file. ![](https://i2.wp.com/image.prntscr.com/image/9d439ee7598c4d54a0e38582fa978adb.png?resize=450%2C342) 7\. Now go back to the wp-admin-> loco translator->the plugin or theme you want to translate. 8\. Now Select the language translation file 9\. Click on the Sync button. ![](https://i1.wp.com/image.prntscr.com/image/e07b5e25da714ec7abfd0ff70931c98b.png?w=920) 10\. Click on save. > **YOUR POT FILE, PO FILE AND THE MO FILES ARE SYNCHRONISED WITH THE SOURCE CODE.** ## **6. IMPORTANT NOTES AND FIXES** **1.** WordPress changed the way how it manages the translation files in 4.6 Update. Prior to 4.6 version of wordpress style of naming the translation files was “xx\_XX.po/mo” but now they have changed it to “text\_domain-xx\_XX.po/mo”. So, we also had to change the way how we do it in our theme update “WPLMS 2.3″to make it compatible with wordpress 4.6 and up. **Please note the Code Styling won’t work for wordpress 4.6 and above.** You can Download This plugin from here: **2.** If you are translating any string with Variables like %s, %d, Then You need to follow this guide. **3.** Location Priority of translation files in our themes. **I. Global Folder** : Our theme loads the Translation files located in the global folder. System : wp-content/languages/plugins/’textdomain’-xx\_XX.po System : wp-content/languages/themes/’textdomain’-xx\_XX.po **II. Local Folder** : Our theme loads the Translation files located in the local foder. Author : wp-content/themes/themename/languages/’textdomain’-xx\_XX.po mo Author : wp-content/plugins/pluginname/languages/’textdomain’-xx\_XX.po mo ![](https://i0.wp.com/image.prntscr.com/image/911dfa3da7274526b09e84204b7c15ef.png?resize=630%2C202) 4\. **If translation Still Doesn’t work Then try doing this :** **VIA FTP** > **Theme translation file location** Move the **vibe-xx\_XX.po/mo** located in the “**../wp-content/themes/wplms/languages/**” folder to “**../wp-content/languages/themes**” folder. > **Plugin translation file location** Move the **‘abcd’-xx\_XX.po/mo** located in the “**../wp-content/plugins/’pluginname’/languages/**” folder to “**../wp-content/languages/plugins**” folder. {% embed url="" %} ### *Related* # Translation FAQs Translation related FAQs are listed here: ### Not all The strings Visible When you are trying to search for a particular string, and that string is not visible in the Loco Translate plugin. So you need to hit on **"Sync"** Button. So that your PO and MO File will read the strings of POT File and sync all the strings. ### Translations Completed Still Not Reflecting in Frontend Please check your site language and then check in Loco Translate, if you are translating in the correct language or not # Translate Using Loco Translate Plugin WPLMS Version 4 guide for translating Members Area : ————- VERSION 3 Translation guide. ### **\*INDEX\*** 1. [**Download 100% Translated files of Buddypress, Woocommerce and buddydrive.**](https://wplms.io/support/knowledge-base/translate-using-loco-translate-plugin/?replytocom=26014#translateone) 2. [**Start Editing our provided translation files with the theme and it’s plugins the correct way.**](https://wplms.io/support/knowledge-base/translate-using-loco-translate-plugin/?replytocom=26014#translatetwo) 3. [**Creating your own Translation files.**](https://wplms.io/support/knowledge-base/translate-using-loco-translate-plugin/?replytocom=26014#translatethree) 4. [**Backup translations for safely updating plugins and theme.**](https://wplms.io/support/knowledge-base/translate-using-loco-translate-plugin/?replytocom=26014#translatefour) 5. [**Synchronising your POT, PO and MO files after Update to add the new strings that are added to the source code into the translation files.** ](https://wplms.io/support/knowledge-base/translate-using-loco-translate-plugin/?replytocom=26014#translatefive) 6. [**Important notes and fixes.**](https://wplms.io/support/knowledge-base/translate-using-loco-translate-plugin/?replytocom=26014#translatesix) > **WE RECOMMEND OUR USERS TO USE LOCO TRANSLATOR FOR TRANSLATING THE THEME AND PLUGINS :** [**https://wordpress.org/plugins/loco-translate/**](https://wordpress.org/plugins/loco-translate/) ### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ## **1.** **Download and setup 100% Translated files of Buddypress, Woocommerce and buddydrive.** [**https://vibethemes.com/documentation/wplms/knowledge-base/buddy-press-translation-using-loco-translator/**](https://vibethemes.com/documentation/wplms/knowledge-base/buddy-press-translation-using-loco-translator/) ### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ## **2. Start Editing our provided translation files with the theme and it’s plugins the correct way.** 1\. Go to WP Admin -> Plugins -> Add New\ 2\. Search for plugin “Loco Translate” 3\. Install and Activate the plugin.\ 4\. After Activation locate WP Admin -> Loco Translate [![loco\_translate\_1](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?resize=300%2C215\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?ssl=1) 5\. Click on Loco Translate. 6\. Choose the plugin/theme which provides the text that you want to translate. [![screenshot\_2](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?resize=300%2C147\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?ssl=1) [![screenshot\_4](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?resize=300%2C140\&ssl=1)](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?ssl=1) [![screenshot\_3](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?resize=300%2C142\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?ssl=1) 7\. Click on that plugin/theme. Some settings will appear. 8\. **Now click on edit template.** ![](https://i2.wp.com/image.prntscr.com/image/ba5120385efc47899f8f3e029083f070.png?w=920) 9\. **After clicking on EDIT TEMPLATE** , Now a page will open. **Click on sync and save** to syncronise the pot file. ![](https://i0.wp.com/image.prntscr.com/image/1eff5df20d57456d8be7a1aa736c7088.png?w=920) 10\. Now go back to **wp-admin->loco translator->plugins->select that plugin.** 11\. Now click on **COPY** on the language that you want to edit that is provided by us with the plugin. ![](https://i0.wp.com/image.prntscr.com/image/5091849295354a66b35af012470e2d93.png?w=920) 12\. Some Settings will appear. 13\. Now choose the exact language that you selected in the previous step. Choose system language and copy translations from XX. Click on start translating, it will create a copy of the translation file in the global folder. ![](https://i2.wp.com/image.prntscr.com/image/b7050d517ec94ea4b8a80dfab5ba48e1.png?w=920) 14\. Click on sync and save. ![](https://i1.wp.com/image.prntscr.com/image/b54d94fb467142d1b21e7c03eec44b4a.png?w=920) ![](https://i1.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_7.png?w=920\&ssl=1)[![screenshot\_7](https://i1.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_7.png?resize=300%2C141\&ssl=1)](https://i1.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_7.png?ssl=1) 15\. Now you can simply add your translation strings and then save them. All that translation that you make in this global file will retain even after updaing the theme and the plugin. 16\. Now go back to that **wp-admin->loco translator->plugins->select that plugin again** Since you have created a global translation file, now you can delete the local translation file. ![](https://i0.wp.com/image.prntscr.com/image/e88eb6f18d244ae486e680623c69bdef.png?w=920) **DONE.** ### NOW YOU CAN SUCCESSFULLY EDIT AND RETAIN THE TRANSLATION FILES PROVIDED BY US. \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ## **3. Creating your own Translation files.** WPLMS highly recommends using LOCO Translator for translation.1. Go to WP Admin -> Plugins -> Add New\ 2\. Search for plugin “Loco Translate”3. Install and Activate the plugin.\ 4\. After Activation locate WP Admin -> Loco Translate [![loco\_translate\_1](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?resize=300%2C215\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?ssl=1) 5\. Click on Loco Translate. 6\. Choose the plugin/theme which provides the text that you want to translate. [![screenshot\_2](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?resize=300%2C147\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?ssl=1) [![screenshot\_4](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?resize=300%2C140\&ssl=1)](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?ssl=1) [![screenshot\_3](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?resize=300%2C142\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?ssl=1) 7\. Click on that plugin/theme. Some settings will appear. 8\. **Now click on edit template if template is already created.** **Otherwise you will have to create a template.** ![](https://i1.wp.com/image.prntscr.com/image/b26eaeaca85b41d68cd1004cfc31272a.png?resize=320%2C191) **OR** ![](https://i0.wp.com/image.prntscr.com/image/f7a4ee7917264f638b26f7b212ea3164.png?resize=322%2C152) ![](https://i0.wp.com/image.prntscr.com/image/95bb71aa19424561a962109b28f4e7a6.png?resize=323%2C218) ![](https://i1.wp.com/image.prntscr.com/image/b26eaeaca85b41d68cd1004cfc31272a.png?resize=328%2C196) 9\. **After clicking on EDIT TEMPLATE** , Now a page will open. **Click on sync and save** to syncronise the pot file.![](https://i2.wp.com/image.prntscr.com/image/9d439ee7598c4d54a0e38582fa978adb.png?resize=450%2C342) 10\. Now Select the language translation file or create a new language translation file. ![](https://i0.wp.com/image.prntscr.com/image/e5c459a5fa14470b8ddbe988145b7072.png?w=920) 11\. Click on new language to add the language. Some settings will appear. [![screenshot\_6](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_6.png?resize=300%2C141\&ssl=1)](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_6.png?ssl=1) 12\. Choose your language and **always select the system location** ![](https://i0.wp.com/image.prntscr.com/image/681b3ccf35d24d7fb9f3b76914fbdf2c.png?resize=470%2C208) 13\. Click on start Translating. 14\. Now a whole new set of settings will appear. 15\. Click on the **Sync button.** 16\. Search for the text that you want to translate. 17\. select the text. [![screenshot\_9](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_9.png?resize=300%2C141\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_9.png?ssl=1) [![screenshot\_10](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_10.png?resize=300%2C141\&ssl=1)](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_10.png?ssl=1) [![screenshot\_7](https://i1.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_7.png?resize=300%2C141\&ssl=1)](https://i1.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_7.png?ssl=1) 18\. Write the translation text then click on **save.** 19\. You can download the PO and MO files from here. [![screenshot\_8](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_8.png?resize=300%2C140\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_8.png?ssl=1) 20\. **If you are translating any string with Variables like %s, %d** Then You need to follow this guide. > FINALLY CHECK THE FRONTEND TO SEE YOUR TRANSLATED TEXT. #CHEERS. ### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ## **4. Backup Translations to safely update.** If you want to add your own po/mo files or your custom translation then it is strongly advised that you put **set the location as GLOBAL.** **PO and MO Global translation files Location** For Themes : “wp-content\languages\themes\” For plugins : “wp-content\languages\plugins\” **It is advised so because after each update we replace the po/mo files located in the local folders. So if you have added any translation of your own it will get replaced.** Also the priority of translation files is : 1\. Global 2. Local So always choose Global for your own custom translations. That way your custom translation will be retained even after the update. ![](https://i0.wp.com/image.prntscr.com/image/681b3ccf35d24d7fb9f3b76914fbdf2c.png?resize=470%2C208) > **GUIDE TO SAFELY BACKUP TRANSLATION FILES BEFORE UPDATING** **1.** Make a backup of all the po/mo files located in the local folders of your plugins and theme. **PO and MO local translation files Location** > For Themes : “wp-content\themes\wplms\languages” > > For plugins : “wp-content\plugins\pluginname\languages” **PO and MO Global translation files Location** > For Themes : “wp-content\languages\themes” > > For plugins : “wp-content\languages\plugins” * **The Global translation files are not changed when you update any plugin or theme.** * **Only Local Translation files are changed.** **2.** You can Also Download the po and mo files of one by one. Go to wp-admin->loco translator->choose the theme or plugin->choose the language. Now You can download the po/mo files of that plugin/theme ### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ## **5. Synchronising your POT, PO and MO files after Update to add the new strings that are added to the source code into the translation files.** > **AFTER UPDATING PLUGIN/THEME** **Some strings maybe added, removed or changed after the update.** 1\. Go to wp-admin [![loco\_translate\_1](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?resize=300%2C215\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/loco_translate_1-1.png?ssl=1) 2.. Click on Loco Translate. 3\. Choose the plugin/theme which provides the text that you want to translate. [![screenshot\_2](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?resize=300%2C147\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_2.png?ssl=1) [![screenshot\_4](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?resize=300%2C140\&ssl=1)](https://i2.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_4.png?ssl=1) [![screenshot\_3](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?resize=300%2C142\&ssl=1)](https://i0.wp.com/wplms.io/support/wp-content/uploads/2016/10/Screenshot_3.png?ssl=1) 4\. Click on that plugin/theme. Some settings will appear. 5.. Now click on edit template ![](https://i1.wp.com/image.prntscr.com/image/b26eaeaca85b41d68cd1004cfc31272a.png?resize=320%2C191) 6\. After clicking on EDIT TEMPLATE , Now a page will open. Click on sync and save to syncronise the pot file. ![](https://i2.wp.com/image.prntscr.com/image/9d439ee7598c4d54a0e38582fa978adb.png?resize=450%2C342) 7\. Now go back to the wp-admin-> loco translator->the plugin or theme you want to translate. 8\. Now Select the language translation file 9\. Click on the Sync button. ![](https://i1.wp.com/image.prntscr.com/image/e07b5e25da714ec7abfd0ff70931c98b.png?w=920) 10\. Click on save. > **YOUR POT FILE, PO FILE AND THE MO FILES ARE SYNCHRONISED WITH THE SOURCE CODE.** ### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ## **6. IMPORTANT NOTES AND FIXES** **1.** WordPress changed the way how it manages the translation files in 4.6 Update. Prior to 4.6 version of wordpress style of naming the translation files was “xx\_XX.po/mo” but now they have changed it to “text\_domain-xx\_XX.po/mo”. So, we also had to change the way how we do it in our theme update “WPLMS 2.3″to make it compatible with wordpress 4.6 and up. **Please note the Code Styling won’t work for wordpress 4.6 and above.** You can Download This plugin from here: **2.** If you are translating any string with Variables like %s, %d, Then You need to follow this guide. **3.** Location Priority of translation files in our themes. **I. Global Folder** : Our theme loads the Translation files located in the global folder. System : wp-content/languages/plugins/’textdomain’-xx\_XX.po System : wp-content/languages/themes/’textdomain’-xx\_XX.po **II. Local Folder** : Our theme loads the Translation files located in the local foder. Author : wp-content/themes/themename/languages/’textdomain’-xx\_XX.po mo Author : wp-content/plugins/pluginname/languages/’textdomain’-xx\_XX.po mo ![](https://i0.wp.com/image.prntscr.com/image/911dfa3da7274526b09e84204b7c15ef.png?resize=630%2C202) 4\. **If translation Still Doesn’t work Then try doing this :** **VIA FTP** > **Theme translation file location** Move the **vibe-xx\_XX.po/mo** located in the “**../wp-content/themes/wplms/languages/**” folder to “**../wp-content/languages/themes**” folder. > **Plugin translation file location** Move the **‘abcd’-xx\_XX.po/mo** located in the “**../wp-content/plugins/’pluginname’/languages/**” folder to “**../wp-content/languages/plugins**” folder. ### *Related* # Admin Guide FAQs All the frequently asked question related to administrator controls listed here ## General ### Finding your item purchase code ![](/files/-MK5VNTDL57YRwucgnJl) ### Rate us on Themeforest ![](/files/-MKGqQoPV4MW53fhUAFs) ## Purchase Process ### User purchasing the Course but not enrolled **User purchased the course but does not get enrolled in the course** This happens because of following reasons : 1. **Order InComplete** Whenever a user purchases a course, a corresponding order is created in WooCommerce / Pmpro / EDD or any other plugin and unless that order is marked as complete by the respective plugin the WPLMS will not assign the user to the course. ![](/files/-MJGA4nyTneMxnQFVXEW) ![](/files/-MJGADyv562P2idmmEyZ) **2. Course not connected** The user purchased a product which does not have the course connected. The products which have course connected appear like : ![](/files/-MJG9v-POTasMVhVs5PW) And the order created appears like ### Waiting For Admin Approval Order was not marked complete by WooCommerce. Verify the order at WP admin - WooCommerce - orders . As a quick fix, just mark this order complete. ![](/files/-MJGArEINzugbwyI7cmp) **This is a very common issue in WooCommerce.** However, installing [this plugin](https://wordpress.org/plugins/autocomplete-woocommerce-orders/) resolves this issue. ### Account not Created on WooCommerce checkout Ensure that you have enabled the below setting in WooCommerce. ![](/files/-MN9i5--LriBAyM9l4gn) ## Layout FAQs ### Right align last menu items ![](/files/-MOFudKPjPoMnBZfkK7Y) ### Vibebp Layouts Not Imported In case, after setting up everything, you are not able to find Default Elementor Templates for Member Profile, Member Card, Course Layouts, Course Cards, Group Layouts, Group Cards. No need to worry. Simply Follow the steps below * Open link in your site : Site.com/wp-admin/options.php * Locate vibebp\_setup\_complete \[ ] * Set the input field value from 1 to 0 * Save options list. * You have VibeBP Setup wizard back again in your screen. ### Remove 3 lines besides logo. Enable below switch ![](/files/-MJgbwh6VtSwjU412yO9) ### I got Google warning for Brand Icon use. Enable this switch. ![](/files/-MJgc84xq27JDZfBn-GO) ### Profile Layout Messed Up Simply Edit the page, and remove this garbage SVG Element from Elementor ![](/files/-MJGBIc_dP6Vy2ghWlAS) ### Course Price is not saved **Course price does not get set during course creation.** The Course product captures values from the course to create the product in the WooCommerce. This means it needs course title and Course full description to create a product. Always make sure that you have course title and course full description set for a course to be able to create its pricing. ### Dashboard loads empty despite widgets being saved in Widgets Area 2 possible reasons, blank member type has been created. 1. Please go to WP admin - VibeBp - Settings - BuddyPress - Members 2. Remove the member types, it seems you have a "Blank" member type registered which is causing this issue. **optionally** 3. Edit the member and remove member type : ### PWA shows in Boxed Layout The Page you connected in Vibebp - Settings - App Builder - Here Set an Offline Page For PWA When you will set a page here, and then after setting up everything check this page. It appears as a Boxed Layout Not in Full Width So Edit your Page in Backend and set the Page Template as "barebone" page template and update ## Update FAQs ### Will I Loose My Data? While Upgrading No, your data will not be lost while upgrading from version 3.x.x to 4.x because we are not updating the WordPress or database. The courses, units and other data on your site is saved in database and this update will not affect anything But still, if you are afraid, you can keep a backup of your site and then proceed ### How to Upgrade Theme Version If you are on version 3.x.x and upgrading your site to version 4.x then the automatic theme update method will work here. The process is simple, just follow the automatic update method: :[**Automatic Update**](https://wplms.io/support/knowledge-base/auto-updating-wplms/) ### **Not Receiving Plugin Updates** **In version 4, you have to add your theme purchase code in this area:** ![](/files/-MJGCIhmWX4yob1ZR9gZ) ### **Menu Not Visible** After activating the plugin which is compatible with version 4. The very first step is to setup menu so you have to add a Buddypress menu item in the profile menu from wp-admin > Appearance > Menus ![](/files/-MJGCdrm0haG9moW35_e) The Menu items saved here will be reflected in the Profile Menu Section. **In any case, if menu is still not visible then once hit on the button "refresh buddypress navigation menu". For this, go to wp-admin > Vibebp > Settings > Buddypress Tab** ### Managing Profile Menu ![](/files/-MOPQimvwdyPpz9mjm9a) ## Functioning Issues ### General tips for resolving issues 1. Clear Buddypress cache : WP admin - Settings - BuddyPress - Components - Save 2. Rebuild permalinks : WP admin - Settings - Permalinks - Save 3. Disconnect and Re-Connect directory page : Wp admin - Settings - BuddyPress - Pages , disconnect page by setting to none, save settings, clear buddypress cache as in 1. and set the directory page again. ### Profile does not open or opens blank Most likely there is profile restriction in place. * Check WP admin - WPLMS - BuddyPress - Single member profile view , make sure this is view all. * Check WP admin - Settings - Vibebp - BuddyPress - Public profile view, ensure this is unchecked. * Check WP admin - Settings - BuddyPress - Pages - Members a page is connected and it does open. * Check WP admin - Vibebp - Profile Layouts , make sure there is a profile layout. * Check WP admin - Vibebp - Profile Layouts , make sure there is a profile layout which is not connected to any member type. The latest profile layout is picked, so ensure that there is some content you have built in elementor. * Note the URL, check if there is a missing backslash, save buddypress Components at WP admin - Settings - BuddyPress - Components * Try switching to a standard Profile template at Customizer - Layouts - Profile - set to any other than last one \[blank] ### Error While Creating Notes From Frontend While creating Notes From Frontend Error Shows such as "Permission Denied" ![](/files/-MOKstiAHVUnTtRxXOfx) This is the Error Related to Firebase ![](/files/-MOKt6a0k5sBZJ8-wWiw) Then Add these Rules ``` rules { : { "rules" : { ".read":true, ".write":true}} ``` ![](/files/-MOKtvTmyJH0R1SEHsF-) ### Vibebp Client Id is Missing This will be generated again. It is not a fixed value but a security parameter that we are passing in API call. You can set this value according to you as well. One thing to note down is, if you are changing this value then make sure to clear the cache, server as well as browser cache. Otherwise, it will conflict in the API call ### Quizzes not loading. Do you see multiple Quiz loaders ? like below screenshot. It means that you have outdated scripts loading. The WPLMS version 4 comes with inbuilt react Quiz, so you can disable WP admin - LMS - Settings. Or simply use the Bootstrap 4 or No Jquery mode in WP admin - WPLMS - Misc. ### Social Logins do not work Make sure you have added your domain name TLD in firebase authorisation settings. ![](/files/-ML8CbauWi6oulXc5We1) ### Course Purchase via Woocoommerce : Waiting for Admin Approval The WooCommerce did not mark the order complete. Only after the WooCommerce marks the order complete the WPLMS will resume its processing. We recommend users to install the WooCommerce auto-complete orders plugin so that woocommerce marks their orders as complete on payment completion. {% embed url="" %} ### Set User Login Threshold Limit When users close the internet browser tab, the account remains open for more than 30 minutes and they cannot access again until that time expires. So this code will set it to 15 minutes instead of 30 minutes Add this code in wp-admin > Plugins > editor > select WPLMS Customizer Plugin > wplms-customizer.php ``` add_filter('wplms_login_threshold',function($x){return 900;}); ``` Here 900 is seconds which is equivalent to 15 minutes
### Elementor & other Icons go missing when PWA enabled. This is common issue because the PWA is not programmed to capture third party icons. So if you see this issue : ![Capture the file path for the icon files](/files/-MMlEtgTs5JtqrPo4MV3) Locate the icons path. For exmaple, above icon set comes from following location. ![elementor icon set](/files/-MMlESjnaUf-N8MQ4-u6) Now we need to insert this icon set into the PWA pre-cached resources. ![](/files/-MMlRMPdIBov1DlQOn_L) After adding these paths , you will need to "Regenerate Service worker" Then you will need to update the service worker in your own browser ![](/files/-MWOwzNaBygSyMjuRANk) ### BuddyPress Activation Email Not Working Everything is correctly Setup But Users are not able to activate their account. So Make sure a valid Email Id should Be Saved in LMS > Settings > Emails Tab ![](/files/-MMy2Y25rWDinYWIkYeH) Third party plugins will have their own to email setting which you may need to configure if you are using a plugin for emails , example screenshot : ### For enable Emails to use BuddyPress HTML if other emails are working in your site but buddypress emails are not working. Try adding below code in your child theme - functions.php , ``` add_filter( 'bp_email_use_wp_mail', '__return_true' ); ``` ### Use Third party Email services {% embed url="" %} {% embed url="" %} ### Profile image option missing in profiles ![Step 1. Disable BP single page if enabled. \[Optional\]](/files/-MN2MQIMDVYLb_1A-MZ6) ![Refresh buddypress nav](/files/-MN2MZZWY2rD_tp38MPN) ### Stop Instructors from seeing other Instructors Media & content Enable WP admin - WPLMS - Course manager - Force Instructor Content Privacy ![](/files/-MN3xKts3-d-EXUvCUoG) ### Custom Icon For Units Add this code either in Blank Child Theme's funtion.php file or in wplms customizer plugin > wplms-customizer.php ``` add_filter('wplms_get_element_icon',function($icon,$component_name){ //print_r($component_name); //find out component names if($component_name == 'jitsi'){ return ''; } return $icon; },10,2); ``` ### Custom Icon For Profile Menu You can change these icons in the members area : ![](/files/-MOKnvtYCkuFZoX-EGn5) #### Step 1: * Go to WP admin – Apperance – Menus , edit the profile menu. * Enable CSS Classes from the screen options on top right * Note the CSS Class of the icon you want to change : ![](/files/-MOKoEcc3TbVUFeISwaM) #### Step 2: * Locate any good svg, is a good resource. * Download the svg icon * Edit SVG icon in text editor and copy the SVG icon #### Step 3: * Add this code in child theme – functions.php or WPLMS Customizer – wplms\_customizer.php * Keep the information CSS class and SVG with you. Replace XXXX with CSS class from step 1 and ``` add_action('vibebp_component_icon',function($icon,$id){ if($id == 'XXXXXX'){ $icon = ' '; } return $icon; },99,2); ``` ### Firebase Social login not working Check if the firebase credentials entered are correct. On saving the credentials should appear like below. ![correct firebase details](/files/-MOMBloNjz-JfnJwMun7) Ensure domain is added in firebase authenticated domain ### Login not working correctly or inconsistently Two issues which can cause login to not work correctly when you are using Firebase Configuration. * **Incorrect firebase project location** : Firebase configuration will not work if your firebase project is located in South Asia or newer regions. We recommend using US / Europe based regions. * **Incorrect firebase configuration** : Missing Realtime database in firebase configuration. If you copy firebase configuration before enabling realtime database then it will cause issues. After enabling disabling firebase features, make sure you re-copy firebase configuration and paste in vibebp settings. ### Import BuddyPress Email Templates We are using Buddypress functionality in wplms. Touchpoints are also based on that, the email templates are created and these email templates used in the situations. Buddypress added this functionality that you can even customize your existing email templates. Read More about this here: In case, users don't find all the email templates then follow these steps: Please use these steps to import Buddypress Email Templates Point 1 . Then goto wp-admin -> emails -> delete all the emails and also delete them permanently from trash . Point 2 . Then goto wp-admin -> tools -> Buddypress to re-install bp emails . #### **Then Migrate All wplms Emails to Buddypress Emails** From wplms version 2.7 we have added option to change the **wplms\_bp\_emails** option from wp-admin -> lms-> settings -> functions -> ad hoc -> Custom Field for Option .\ Now to change option you have set the wplms\_bp\_emails option like this as shown in screenshot : ![](/files/-MWTXi2rabnSUc7sTsVU) After setting this value you will get notification in admin to migrate emails .\ for wplms version below 2.7 : Please follow these steps :\ 1.Log in to your wp-admin and access the link : ** .**\ 2\. This page will have all the options from your options table .\ 3\. Now search for the option named ” **wplms\_bp\_emails** ” .\ 4\. Value in this option will be version of vibe course module plugin if you have already migrated and 0 if not .\ So put there 1 and save the changes .You will get the notification again to migrate all the wplms emails . ![](/files/-MWTXskwFKd2H9vixvCC) # Creating Courses Welcome to the Instructor's guide for WPLMS Learning management system. The purpose of this guide is to make instructor's aware of all the controls available. ## Profile Management The Profile Management is same as mentioned in [**Student's Doc**](https://docs.wplms.io/student-guide/student-guide#members_area) ## Course Content Creation Instructors can create content from backend as well as from Frontend. Access the Profile Page and there instructor will find a button to create a course. From Course Components section we can select groups, forums and batches as well and it will be connected with the course. For Groups and Forums functionality make sure the component should be enabled in Settings > Buddypress > Components And For Forums, Make sure BBpress Plugins should be activated on your site From Course Curriculum Section instructors can set the curriculum for courses and then the last step is to publish the course ![](/files/-MJGLe9GXOXFdGeH9GL1) ![](/files/-MJGLmfupBZp1Y3CKsqa) ![](/files/-MJGLv9_VDfrWv5VKCnx) ### xAPI / TinCan Courses Instructors can also embed xAPI courses built in content generator tools for LMS. {% embed url="" %} ### Scorm in WPLMS You can also embed scrom in WPLMS courses {% embed url="" %} ## Course Content Management ### A1. Editing Units while setting up course curriculum the very first thing is editing unit or creating unit. This question is frequently asked by a lot of users that how they can change the unit type. You will find a pencil icon, click on that and change the unit type ![](/files/-MJGM4Tp8citVmHUnvC0) {% embed url="" %} ### A2. Adding Video Type Unit {% embed url="" %} ### A3. Adding Scorm Packages SCORM stands for "Sharable Content Object Reference Model". A SCORM Content Package is a . zip file that contains content formatted in such a way that it can easily be imported into courses directly. So if you want to upload scorm packages then yes, it is supported in wplms v4 {% embed url="" %} ### A4. Embedding H5P Content H5P is a free and open-source content collaboration framework based on JavaScript. H5P is an abbreviation for HTML5 Package, and aims to make it easy for everyone to create, share and reuse interactive HTML5 content. {% embed url="" %} ### A5. Reordering Units in Huge Courses In case, you have a lot of units associated with a course and now you want the last section to show up at first place. Then there is no need to delete all the content and then creating the curriculum from scratch. But you can easily reorder everything according to your choice {% embed url="" %} ### A6. HLS & Dash Support HLS is short for HTTP Live Streaming. It is a protocol used to stream live video over the internet. Originally developed by Apple, the purpose of HLS was to make the iPhone capable of accessing live streams. First, you need to enable the HLS & Dash Support Checkbox from LMS > Settings {% embed url="" %} ### A7. Practice Questions in Units {% embed url="" %} ### A8. Setup VdoCipher {% hint style="info" %} **Download Link of the Addon:** [**https://wplms.io/downloads/wplms-vdocipher/**](https://wplms.io/downloads/wplms-vdocipher/) {% endhint %} To setup Vdocipher in your WPLMS.There are a few steps to follow. * Create an account here * Get your video iframe code from dashboard refer this * Use the Iframe in-unit page **How it will work.** * Course status page working ### A9. Adding PPT type in units To setup WPLMS-PPT in your WPLMS.There are a few steps to follow. * Create an account here * Make sure your one drive is active, you can test to upload a sample file/video/ppt. * You have to create a new App Registration ![](/files/-MRe4SXOLL-kI-Lttqv9) * Follow the video to create a Microsoft project and setup with WPLMS **How it will work.** * Course status page working ### A10. FV Player Support In Units 1. Enable the setting in wp-admin > Settings > FV player > Setup > Load FV Flowplayer JS everywhere ![](/files/-MXaaDAeRafktUAxDxL3) 2\. Now paste this code either in wp-admin > Plugins > editor > Select WPLMS Customizer Plugin > wplms-customizer.php OR in Blank Child's functions.php. It depends on you ``` add_action('wp_enqueue_scripts',function(){ ?> " %} ## Notifications Panel There is a new feature introduced that you will receive notifications for each and everything like this {% embed url="" %} ## Create A Custom Profile and Cards {% embed url="" %} ## Importing Bulk Questions {% embed url="" %} ## Student Management ### B1. Add Students In Course As you know, now everything is managed From this Area(Member's Area). Admin Tab which used to appear on Single Course Page is no longer functional because adding students in a course is managed from here. From Instructor Control's Section, Click On Manage Courses - Click On Admin Tab and add the students in the course from here, you can either search a user by his username or with the email id. There are sorting options available here, so you can actually sort students on the basis of their course status, on the basis of their access status. ![](/files/-MQ0wDBV1mrjbaKnhL6N) ### B2. Reset Student Course Progress In case, Instructor wants to reset the progress of the course for a specific student. He can do that from here. If a student completed a course, suppose 30% but now instructor wants him to start the course again. He can reset his course progress from here ![](/files/-MQ0xiLxvhalYSHGWNiO) ### B3. Student Statistics In Course This will show the stats which is related to the student. statistics basically show which unit completed by the user, and how much time was taken by that student to complete that unit. ![Student Statistics In that Course](/files/-MQ1--WdOXdRJGXYaAmv) ![Course Statistics](/files/-MQ0zvOVFW9w2p_Ws-to) ### B4. Student Activity Clicking on this Tab, instructors can check the student's activity and they can filter the activities as well(which they want to check basically). ![](/files/-MQ0zlpPRtuZESTWMRAJ) ### B5. Announcement And News Instructors can add Announcements here which they want to circulate among course students. This will be visible to all those students who are enrolled in that course ![](/files/-MQ12uX_nE8SbBjuEYaT) This image below is the view of how it looks from Student View ![](/files/-MQ12z0wIXFthLvl-ea3) ### B6. Course Review & Rating The course reviews can be checked under "Review" Tab. After Course Completion User can leave a course rating and that will be visible here ### B7. Answering Questions While going through the units, users(students) enrolled in that course can ask questions if they have any doubt and then continue with their course. At the end of the day, when instructor will check this tab, he will found the Questions raised by students while checking the course. From here, instructors can answer student's doubts ![](/files/-MQ1BjLW6GQSUXoVpfBp) ### B8. Assign Certificate & Badges Make sure in the course, assign certificate/badge should be enabled and certificate template or certificate badge image should be set. Only then this functionality will work. **Students can check the earned certificates or badges in "Achievements" Menu.** ![](/files/-MQ1E7EfrNWhAuwBM3Px) ### B9. Extending Subscription In case, the course access duration is set as 10 days. So, after 10 days users will not able to access the course material and it will show **Expired**. That means the course subscription for that student is expired. So what instructors can do is assign more number of days to increase the subscription limit from here. {% hint style="info" %} **For Unlimited Course Subscription, set 9999 days as course duration and then it will be available for unlimited duration** {% endhint %} ![](/files/-MQ1EFZONNXoiz98h2R9) ### B10. Change Course Status Changing Course Status option is also available for a particular user or you can do this for all users enrolled in that course. Suppose, A student sent you a message that he forgot to click on "Finished Course" and logged out from the system. Here, An instructor has the capability to change the status of the course for that student ![](/files/-MQ1ELX42QQSacIYkXoj) ### B11. Sending Bulk Message For this feature, **make sure the Buddypress "Private Messaging" Component Should be enabled from wp-admin - Settings - Buddypress - Components.** Check the "All Students" Checkbox while sending messages so it will be available for all students ![](/files/-MQ1EPiwvvU-J3kGHBW5) ### B12. Adding Students Via CSV file To export users from one website and import it to another website, you should create a export file and then import the students in bulk with this feature ![](/files/-MQ1jkWxtj9O9So4I1ud) ## Reports & Data Managing Reports is still under development so we will update this section once it will be live # Customize Dashboard This document will explain how you can customize Instructor or Student Dashboard Area From Frontend ## Adding Widgets This is a big time confusion, we encountered with users that they are not able to find out which widgets they should add in Instructor or Vibebp Sidebar {% hint style="success" %} ***Instructor and vibebp Member Sidebars are for instructors and administrator user role resp. The instructor Sidebar Widgets will be visible for instructors and Student Sidebar Widgets will be visible to Student user Role.*** ***Instructor Sidebar - Add instructor related dashboard widgets which will be visible to instructor user role*** ***Vibebp Member Sidebar - Add instructor related dashboard widgets which will be visible to Administrator User Role*** ***Student Sidebar - Add student related dashboard widgets which will be visible to student user roles*** {% endhint %} In these Sidebars you can only add "Dashboard Widgets". As you can see the description is already added in Appearance > Widgets that which widget is for which user role. So please choose according to that ![](/files/-MPDmuZB2CO_exxHGVsM) {% embed url="" %} # Assignments Assignments are like home work Assignments can be both timed and untimed. You can create a connected assignment. To lock course progress of the student, the assignment must be connected to the course in assignment settings. The general user flow of the assignments is shown in below video : {% embed url="" %} # Shortcodes List of shortcodes used in the theme & plugins ### **VibeBP** #### **\[vibebp\_login]** Displays login panel. \[vibebp*login button="1" class="button"]Login trigger\[/login] this will show a button with class button and on click of it shows the login popup. using used plain \[vibebp\_*login] the login form is embedded on page **\[vibebp\_profile]** This embeds the profile area on the page. No parameters. Requires vibebp\_login shortcode to be used before this is invoked. **\[vibebp\_carousel]** The new carousel used in various places of the theme. Used by Gutenberg and Elementor elements. This is a complex shortcode, we recommend using the Generators for using it. **\[vibebp\_registration\_form]** The registration form shortcode. Available at WP admin - Vibebp - Settings - Registration forms. **\[vibebp\_member\_type\_count]** Count type of members. Params member\_type , **\[vibebp\_member\_type*****count member\_*****type="student"] ,** count the students type of members on site. **\[vicon]** The shortcode to display icon from the vicon set. \[vicon vicon="XXX" size="24" color="red"] . Accepts parameters , vicon , size and color. Pick vicon from the list. **\[profile\_field]** Display a member profile field. When used in profile layout will display information about the current member. \[profile\_*field id="xx"] or \[profile\_field name="xx"] you can pass profile field ID or name value to display.* ***\[*****group\_field]** Group fields created in WP admin - Vibebp - Settings - BuddyPress - Groups can be displayed on Group layouts. Usage : \[group\_*field field\_*name="XX"] . ### WPLMS Plugin 1. **\[mygamification\_badges*****]** : Displays gamification badges of current user. Can be used in profile layout or \[*mygamification\_badges *user*id="XX"] user ID can be passed for custom user's badges. Requires Gamification feature to be active. 2. **\[course\_codes]** : Embed Course code and direct enrol into course feature via course code. 3. **\[user\_*****reviews]** : Displays reviews posted by a user or for an instructor. Can be embedded on Profile layout. \[user\_reviews user\_*type="instructor"] to show instructors reviews on profile. Accepts style attribute as "grid" or "carousel" *\[user\_reviews user\_*type="instructor" style="carousel"] 4. \[**course\_info info="title"]** Display course information on course layout. Used in Gutenberg and Elementor. \[ possible values for info : title , excerpt, description, average\_rating, average\_rating\_count, review\_count,student\_count, last\_update,instructor\_name,course\_duration,course-cat,curriculum\_item\_count,cumulative-time,pre-required-courses,certificate,badge ] 5. **\[course\_featured]** Show featured image of course 6. **\[course\_button]** Displays course button on page. Can be used in Course layout to detect current course. Also access ID for specific course. 7. **\[countdown\_timer]** : Show a count down timer. Pass end Date, \[countdown\_timer date="22-08-2022"] 8. **\[number\_counter min="0" max="100" increment="5"]** : Automatic number counter, triggers from min to max with increment value. 9. **\[allbadges]** Show all badges earned by user 10. **\[instructor id="X"]** Display an Instructor of id X ( get id from WP admin - users ] 11. **\[course id="x" featured\_block="x"]** display a course, enter featured block from course1 to course10 for display cards. 12. **\[sell\_*****content product\_id="x"] Content hidden \[/sell\_*****content]** : This shortcode hides the content and displays to users who have purchased the Product. 13. **\[show\_certificates]** : Shows all the certificates on student's profile as gallery ### Certificate Shortcodes These shortcodes are to be used on certificate templates. \[certificate\_student\_name] : Displays Student name on certificate \[certificate\_student\_photo] : Displays Student photo on certificate \[certificate\_student\_email] : Displays email of Student \[certificate\_course] : Displays course name \[certificate\_student\_marks] : Shows student's score/. marks on certificate \[certificate\_student\_field field="XYZ"] : Display any custom field information from the student's profile on certificate. \[certificate\_student\_date] : The date on whcih student recieved the certificate \[course\_completion\_date] : The date on which the course was completed. \[certificate\_expiry\_date days="34"] : Adds Days to completion date and shows as Certificate expires \[certificate\_code] : Displays a unique certificate code for validation \[certificate\_course\_field field="Name"] : Shows any custom course field value \[certificate\_course\_duration] : Displays Total duration of course # FAQs Instructor FAQ's ## How to manually enroll student in my courses Go to Course administration screen. Locate the button to add students to course. Click and search for the user, select the user and add to the course. The user also gets notified when he is added to the course. {% embed url="" %} ## How to Hide Menus In version 4, you no longer need to remove the menus using code. You can simply remove the Buddypress menu items from Appearance > Menus > Profile Menus or the other option is to create a different Profile Menu for a different user role ### Course not visible in correct layout even after publish as soon as pricing is connected. Consult site admin and make sure the product permalinks are set correctly. The permalink slug for the products should not be blank. WooCommerce also does not recomment this : # Members Area Welcome to the Students's guide for WPLMS Learning management system. The purpose of this guide is to make student aware of all the controls available in his profile to pursue educational material on ## Members Area Members area is the personal area where you interact with the WPLMS. Here you will find all the controls to pursue courses and other functionality enabled by your site administrator for you. To reach the members area, you will need to log into the site. To log in to the site you will need to click on the "Login" link available in the screen. Clicking on it you will be required to create an account in the site. The registration process depends on how the site adminsitrator has configured and is out of scope for this topic. Once the registraiton is compelte and you have the account details to login. You can login to the site from the login screen. The login screen is again configured by the adminsitartor, it could be placed on top header or on a page of your site. Once you are logged in you will see a screen which appears similar to below. ![](/files/-MJGExply7WnFUjog2cY) In this section of your screen. There are 2 menus appearing, the left most is the profile menu and on its right is the profile submenu. You can see the Active item in your profile menu from the highlighted screen or from the top title in the submenu. You will also notice an arrow appears where the menu item has more items. Mouse over on the arrow and you will see more items which appear below the current hovered item. Towards the bottom of your screen you will see option to enable or disable the mode of your screen. There are 2 modes available, light mode and dark mode which change the color combination of your screen. The last item is the logout, clicking on it will log you out form the members area and you will land on a different page which has been set by your administrator. You will also find a notification area. All the notification whcih appear on the pages will be displayed here. Clicking on it will show the notifications which have appeared. These notifications are available for 15 seconds before they are automatically removed from this notifications panel. ![](/files/-MJGG18qDJP6j9uoZ8na) You will find the logged in menu short controls which are set by the administrator of your site. ![](/files/-MJGGHNL4XQisIbudENm) ## ## # Dashboard The first screen that loads up when you access your profile. ## Dashboard Area The Dashboard will be different for various members of your site. It depends on what widget the administrator has set for your user type. Following is an example : ![Dashboard screen for Members](/files/-MJebjKreUIsT-EIcYRq) The dashboard will appear in a predefined layout but it is really easy to customise this above screen. ### Customising Dashboard Area You can easily remove/resize/add widgets in your dashboard area. Follow below video guide : {% embed url="" %} # Profile The profile is a publically accessible page of portraying your self. Much like that of any social media page like the [facebook](https://www.facebook.com/help/337881706729661#:~:text=A%20profile%20is%20a%20place,Page%20or%20help%20manage%20one.) profile or a [linkedin](https://www.linkedin.com/help/linkedin/answer/15493/your-linkedin-profile-overview?lang=en#:~:text=Your%20LinkedIn%20profile%20is%20a,your%20professional%20experiences%20and%20achievements.\&text=A%20complete%20LinkedIn%20profile%20can%20help%20you%20connect%20with%20opportunity.) profile. Here you are able to show what you fill out in the profile. There are different layouts possible for public profiles depending on how you are classified by the site administrator. The data in your public profile comes from the information that you fill in the members area. The profile may not need include of all the information that you fill in your members area. If you registered using a form, then you may find that the values that you entered in the form appear pre-filled in the profile. There may also be some fields which are specifically set for your profile. Keeping a profile 100% complete is always recommended. ### Edit Profile You can edit the profile in the profile section of your members area. View the changes in your public profile in the members area. ![](/files/-MJGGn9lSk0T4M3x8qSq) ![](/files/-MJGH1EUPz652JkzDMY-) ### Uploading your Photo You can change your Profile image aka. avatar / Digital Pic from the "Change profile photo" section. If you have already uploaded an avatar image, you will see option to change the image. Click on Change image button to change your image. You will see a upload file box. Click on that box and you can select the avatar which you want to upload. ![](/files/-MJGHLRJymRxZiuHMfLT) Mouse over, or Tough the uploaded image to see the option to crop it or cancel and select another image. ![](/files/-MJGHTh3HRfFRu4nIkgy) Finally click on the upload image to set the image as your profile image. Once the image is uploaded you can see the image in the site. It may not appear straight away but if you reload the page or drag to refresh then you will be see the updated image. To change the image you can click again on the change profile photo. To change the image you can click change image button and then follow the above screens. ![](/files/-MJGHf-Eeoqh5Oobosxa) # Courses The Courses section. ## Enrolled Courses The Enrolled courses appears as a sub-section to the courses section in your members area. It is the most important section of your Learning. Here you can see all the courses you are enrolled in. The courses in this section are categorised into 2 sub-sets. Courses categorised on accessibility "Active" or "Expired" and Courses categorised on your progress status "Started" , "Continue" or "pursuing", "Under evaluation" (for courses where manual evaluation by instructor is required) and "Finished courses" (completed courses). Lets see what each of these categorisations actually mean: * **Active Courses** : The courses you are currently pursuing actively and have not crossed the maximum duration deadline. * **Expired Coruses** : The courses where the maximum allocated duration to complete the course is crossed. To bring these courses back to Active courses, you will need to contact your instructor. If this is simply a Paid course you can re-purchase the course and you will get this course in the active section. There is also a search course. Where you can enter the course name so see the results. If you are copying and pasting a name try pressing space or enter to get accuracte results. The last is the "Course status" which is basically a representation of the progress you've made in the course. You will also see this status on the button labels in the Courses appearing on this screen. * **Start Course** Course not yet started. Progress % is always Zero. * **Continue Course** Course started. Progress % is always more than Zero but the course has not been submitted for evlauation. * **Under Evaluation** Course has been submitted for evlauation and the instructor is yet to complete the evaluation. * **Completed** Course has been submitted and evaluated. You have received a score or grade for the course. ![](/files/-MJGHrlrBcXqFOORyAaR) ![](/files/-MJGI1JUyat2IhIAWc40) ![](/files/-MJGIAPORFqdlpm-aXCp) **The Course Card** * Course Featured image. It may also have the course introductory video. * Course Name or Title * Course Instructor. You can also see multiple instructors here. * Remaining access time for the course. Every course has a maximum access time during which the course needs to be completed. This shows the remaining time in the course. After which your access to the course would be locked. * Course Progess bar and percentage. This is the number of items completed by you in the course curriculum. Sections are not counted. For example a course has 8 units and 2 quizzes. A student who completed 5 units or 4 units and 1 quiz stands at a 50% progress. * Course Status : As discussed previously this is an indicator of the course progress. * Course Retakes : If your instructor enabled retaking of courses more than once. You may see the re-take course option. When you click on this button your entire course progress resets. All the units, quizzes, assignments are reset and you have to start the course again afresh. ## Achievements This is the achievements section. It comprises of your Course Badges, Certificates and a list of finished courses with a full report card on every course. Depending on your administrator has configured the public profiles, these achievements can be displayed on the public profiles as well. Beliw is a typical description of what a badge and a certificate is, this description is not limited and certificates and badges can be used for various purposes. A **badge** is like a excellence medal where the student scores more than a certain percentage set in the course - settings A **certificate** is similar to a course passing certificate. The passing score is set in course settings for every course. Lets see the achievements section: ![](/files/-MJGIR-Tga11dEI-fyce) There is a Badges Section which shows all the badges you earned in the site. There is acertificates section which shows the list of certificates you cheieved on the site. Clicking on the certificate opens the certificate in a new tab. This section also contains the quiz certificates and the badges which are awarded from Custom learning paths , programs if enabled by the site instructor. Then at the last we have the list of finished courses. Each finished course block showsn the course image, course instructor, course name and the score you achieved in the course. If you also achieved a badge or a certificate in the course, it will be displayed in the course block. Clicking on the finished course will open the finished course block. This block contains a full report card for the course. ![](/files/-MJGI_NnXWbp1libBcDi) You will be able to see instructor remarks if they are sent by the insturctor. Badges, Certificates and a retake button also appears if set in the course. To close the finished course card, click on the "x" icon on the top right corner. ## Quizzes This is the quizzes section. Quizzes are basically assessments that are done by your instructors. This section shows the quizzes you have enrolled into. Which comprises of quizzes assigned to you or you started those quizzes during a course or outside. So this is like a shortcut to all the quizzes that you have attempted in the site. For ongoing quizzes you will also see a timer on the quiz block if it is a timed quiz. This is the my quizzes screen. Each quiz block shows the name of the quiz, your attempt Date & Time on for that quiz. The Quiz type it belongs to. The marks you got for the quiz and if it is a timed quiz, you will see the total time for the quiz. ![](/files/-MJGIpPRpt04NWiwKc4k) ![](/files/-MJGIy8PcZJoTfgSa7Ks) The single quiz result shows your attempt on that quiz. It shows the full question list, the scores, your attempt date. The quiz description. Total marks and your score on that quiz. Along with detailed feedback on every question attempt. Which includes the marks awarded for that question. The answer selected by you and the correct and incorrect options for that question attempt. You will see the pagination to move to next question set and view the result in detail. ## Assignments This is the assignments section. Assignments are basically assessments which have a longer duration and a specific task. The assignment can be of two types, Essay type and Dyanmic type. This section shows the assignments you have enrolled into. Which comprises of assignments you started during pursue of a course. So this is like a shortcut to all the assignments that you have attempted in the site. For ongoing assignments you will also see a timer on the assgnment block if it is a timed quiz. See below screenshot to understand the information on the assignment block. ![](/files/-MJGJ9OaP3dxBE1u3Tpa) You can search for existing assignments or sort the assignments by Alphabetically, recency and popularity. Recency here means the time when assignment was published by the insturctor. The Popularity means sorting the assignment based on the number of attempts made by students pursing the assignment. ![](/files/-MJGJKXMnoiN9Uky0bMJ) On clicking the assignment you can see the result and remarks of the assignment in detail. ## Notes & Discussions Notes and discussions module contains of all the notes and public discussions you have participated in the site. You can create notes and participate in public discussions in Courses. All the notes and discussions that you participate in reflect here. All the reviews you post in the site also appear in this section. ### Notes This acts as a shortcut and you can easily go through the notes that you post while pursuing the courses. Check the Course pursue document to learn how the course pursue works. ![](/files/-MJGJhyxVL7Zq80yTwLo) ### Discussions This is similar to notes. Notes are private and only visible to you. Public comments and discussions are visible to all. The questions that you post to the instructor also appear here with the instructor's answer. ![](/files/-MJGJqTmHG8fs_SayGgS) ### Reviews This is the reviews you have posted for the courses. ![](/files/-MJGJxeRiMLBFHi-q2jQ) ## WPLMS Student User Flow {% embed url="" %} # My Quizzes # My Assignments # Notes & Review This docs will describe where users can check their added notes and reviews ## Adding Notes Students can add their unit notes here for future reference. All the Notes And Reviews Added here will be visible under "Notes & Reviews" Menu ![](/files/-MQ1qHJ_3BhmBwG0rZ6U) This is where you can check the Notes added by you(when Logged in as student) ![](/files/-MQ1qxKKTpgSTKwbvc86) ## Adding Reviews Just like udemy, you can rate a unit as well based on the content. This will help instructors to modify their content if they found that their content is difficult to understand by users. Users Can later on Review their added ratings from "Notes & Review" menu under "Review Tab ![](/files/-MQ1r7Zdo0klstGuH7A_) ## Ask Questions/Post public Comment You can ask anything here, this will be treated as public comment and you can view the comment added by you as a student under "Discussion" Tab which is a subpart of "notes & review" menu. ![](/files/-MQ1rq_zLpCIswF4ukSA) ![](/files/-MQ1rwTg8AKFdG2iyx96) ## Search Within Units Yes, you heard it right that now you can search the course elements within the course curriculum itself. In case, student is trying to find a specific keyword or a unit name then this feature is really helpful because without going through units you can easily search the related information with just a simple search ![](/files/-MQ1sjFYtnUM_UmkFAnJ) # Enroll in Courses How to enrol in courses. There are various ways to get enrolled into a course. ## Ask Instructor You can directly # Pursuing Courses # Pursuing Quizzes Enrol in quiz and pursuing them ### Review questions or Bookmark questions In every question in your quiz you will see a book mark icon. Click on the icon would add the question to a review list. The questions added in review list have a different book mark icon to denote that they are in the bookmark list. ![Book mark icon](/files/-MKPVKd3oMYfQbQbkGF-) Besides the questions list you will see a book mark icon , click on that would only show the questions which are bookmarked by you. The pagination would only show the bookmarked of question pages. Click again on icon to come out of the list. ![bookmarked list](/files/-MKPVY5L1THz9i_Yt-Kd) Click on bookmark icon again to un-list the question from review list. At the time of submission if there are any book marked questions you will be notified about it. ![Bookmarked questions notice](/files/-MKPVrTeIMSZOdDgSPT4) The above is just a notification, you can chose to go ahead and submit the quiz, without issues. # List of All Addons This is the complete list of All addons which are compatible with v4 with their functions. You can check all the addons list from here which we have: https\://wplms.io/downloads/ ## Complete List of all Addons Compatible with v4 We are working continuously to make other addons compatible as well. So we will update this list * Vibe Earnings * Vibe Calendar * Vibe Drive * Vibe KB * Vibe Helpdesk * Vibe Zoom --------> compatible version of wplms zoom for v4 * Vibe BBB -----------> compatible version of wplms BBB for v4 * Wplms H5p * Wplms Wishlist * Wplms Batches * Wplms Attendance * Vibe Appointments -------> compatible version of wplms appointments for v4 * WPLMS Parent User * WPLMS Phone Auth * WPLMS Unit Timing * WPLMS Custom Learning Paths * WPLMS Course Custom Nav * Vibe Jitsi * WPLMS Active Campaign * WPLMS GroundHogg * WPLMS GetResponse * WPLMS PDF certificates * WPLMS Quiz Certificates * WPLMS Co-Authors * WPLMS Mailchimp * WPLMS MyCred Addon You will find all the information about Free Addons here and for paid ones check this list **To download the plugin zip directly**: **This same link is applicable for all the "FREE ADDONS"** {% content-ref url="/pages/-MJGyTsi4fZuMJZmXshp" %} [List of All Addons](/extensions-and-addons/list-of-all-addons) {% endcontent-ref %} ## Vibe Helpdesk Link : ### Why We need Vibe Helpdesk * The very first thing is to make sure the BBpress Plugin should be activated on your site: * In Bbpress Plugin there is a functionality to create forums, users can create topics and other users on that same topic can post a reply. Basically, if someone needs a forum Like a Feature to have on his site. This Addon will extend the functionality of BBpress Plugin. * After Activating the Plugin, add the "Forums" Menu in Profile Menu from wp-admin > Appearance > Menus([Profile Menu](https://docs.wplms.io/administrator-guide/step-by-step-guide-for-administrators/menus#profile-menu)) * In Vibebp - Settings - Helpdesk Tab ---> Here all the Vibe Helpdesk related settings will be visible {% embed url="" %} #### Private replies feature in Helpdesk Install the BBPress private replies addon for BBPress : ![](/files/-MP0Gce6024-ORH7-dJB) ## VibeDrive ### Why Do We Need VibeDrive? This is an alternative to Buddydrive. Read more about this plugin from here: ### How To Setup First setup the Vibedrive Menu from wpadmin - Appearance - Menus as we mentioned for all other Buddypress menus * Refresh **Buddypress Menu** navigation after saving the menu from wp-admin > Vibebp - Settings - BuddyPress Tab * ## Vibe Calendar Link: ### Why we Need Vibe Calendar * After Activating the Plugin, add the "Calendar" Menu in Profile Menu from wp-admin > Appearance > Menus([Profile Menu](https://docs.wplms.io/administrator-guide/step-by-step-guide-for-administrators/menus#profile-menu)) {% embed url="" %} {% embed url="" %} Working of Calendar {% endembed %} Language setting in Calendar. ![](/files/-MOu1RRLOmYejJunWTF5) ## Vibe Zoom Check here: ## Vibe BBB Check here: Recordings ## Vibe Jitsi Check here: ## WPLMS MyCred Addon {% embed url="" %} ## Vibe KB {% embed url="" %} ## WPLMS Wishlist {% embed url="" %} ## Addons FAQ ### How to Receive Updates Simply Add the theme Purchase Code in your Dashboard Section. And then refresh the plugins section, you will receive update notification ![](/files/-MOGf9O9DTi5BjfE39eL) ### Menu is not Visible in Profile Menus Even After Setting up the Profile Menu correctly, the Menu is not visible there then click on "Refresh BuddyPress Nav" Button from wp-admin > Vibebp - Settings - Buddypress Tab. Now it will visible ### Instamojo Link For All the Paid Addons ## # Extended Addons Addons which get activated using Theme Purchase code. Here we are sharing all the addons list which are paid and you have two option to get the Addon Using PayPal Link: Instamojo Link For All the Addons: After Purchasing it from Instamojo, you have to share our email id which you used to purchase the addon either on Support forums in Private reply or you can share the receipt on our email id with Subject "**Purchase Receipt of this(name of your addon) Addon**" and then ping us on support forum. So we will share download link and key with you # WPLMS SphereEngine Auto Evaluate coding problems in WPLMS Register an account on . You may need a non-public email ID to register and activate your account at the above site. Activation is done by verifying email. Once your account is created you are all set to setup SphereEngine. ## Download & Activate ## Configure Settings Post installing and activating the WPLMS Sphereengine plugin. Go to WP admin - LMS - Settings - SphereEngine tab. ![](/files/-MXbF3BoH3xIGfQfytAx) ### Widget Hash ID Login to your sphereengine account and locate widgets. You will need to click on "Create widget" if you have not created any widgets earlier. ![](/files/-MXbFIrXjIuDL9SkCze9) Add this widget hash ID to settings in previous screen. ### Compilers & Problem Token / API / API Address Go to your spherenegine account and locate API Tokens. Inside this you should be able to locate the compilers token API and API ADdress along with the Problems API. ![](/files/-MXlG__lTImWOc7Uvcs-) # WPLMS Parent User (Version 4.0+) ## Introduction WPLMS Parent User feature. Set users as Parents or Guardians. So Users as Parents or Guardians can track the progress of their child, check the involvement of their children. ## Purchase Link ### Paypal Link {% embed url="" %} ### Instamojo Link GST included: ## How It works {% embed url="" %} {% hint style="info" %} **For Any Query Ask here:** [**https://wplms.io/support/forums/forum/wplms-addons/wplms-parent-user/**](https://wplms.io/support/forums/forum/wplms-addons/wplms-parent-user/) {% endhint %} # WPLMS Mailchimp (Version 1.5.2) ## Introduction It is an all-in-one marketing platform that helps you to manage and talk to your clients, customers, and other interested parties. WPLMS Mailchimp plugin integrates Mailchimp with WPLMS. With this addon you can use the mailchimp features with wplms ## Purchase Link ### Paypal Link {% embed url="" %} ### Instamojo Link {% embed url="" %} ## Activating Addon Add the Key, which you will receive after purchasing the addon in LMS > Addons and you will receive the updates. ## How It Works {% embed url="" %} The video is a bit old but the steps are same {% hint style="info" %} **For Any Query Ask here:** [**https://wplms.io/support/forums/forum/wplms-addons/wplms-mailchimp/**](https://wplms.io/support/forums/forum/wplms-addons/wplms-mailchimp/) {% endhint %} # WPLMS PDF Certificates (Version 2.1 or above than that) ## Introduction Previously, we were using HTML2Canvas library for taking generated certificates screenshots ad then we were uploading that screenshot in "Media Folders". But then Users Ask For PDF certificates. Then this Addon is Developed by us for "PDF Certificates". You can also embed QR code in your certificates ## Purchase Link It is a Free Addon which you can directly purchase and add it to your cart from here: ## How It Works {% embed url="" %} {% embed url="" %} {% hint style="info" %} **For Any Queries Ask Here:** [**https://wplms.io/support/forums/forum/support-queries/other-issues/**](https://wplms.io/support/forums/forum/support-queries/other-issues/) {% endhint %} # WPLMS Get Response ## Introduction **What is WPLMS\_Getresponse?** Wplms Getresponse works like Mailchimp used to create lists of the users in Getresponse. you can create lists of the users based on the courses they are subscribed to. **Features:** 1. Sync members to your site into the various lists. 2. Enable subscription to the newsletter in BuddyPress registration. 3. Enable subscription to the newsletter in Woo-Commerce Checkout. 4. Auto Create course-specific lists for all the courses. 5. Auto-sync course members into the lists according to the course subscription. 6. Auto-add users to the course list on subscribe and remove on unsubscribe. 7. Option to disable course-specific list. ## Settings ![](/files/-MOGq9SZhgFa6jIVV1Es) * Create an account on Getresponse **link**: * login to your account. * And Generate your API Key ![](/files/-MOGqOZui-KKRwDTDKhw) ### WPLMS Settings * Install and activate the WPLMS\_Getresponse Plugin. Perform the following setting in LMS. ![](/files/-MOGqkbxiCSnwiNY-myU) ![](/files/-MOGqtRIU-98vC3eThWX) Create your own list in Getresponse **like this.** Check the WPLMS setting, and sync the users in the list as shown in the image ![](/files/-MOGrI0p0Q4WNTSB1xoh) ![](/files/-MOGrMU_k1KSsyqVctTv) * This will sync your users, in the list in the Getresponse. ![](/files/-MOGrb8WPmFa033NUiTy) * By Enabling this option in WPLMS>> LMS Setting. * It will create all the list of the courses and add the students in course they are enrolled in ![](/files/-MOGsOOw3iScIkHuUCcK) ![](/files/-MOGrwlLIUuoG66fiLhh) ## Purchase Link ### PayPal Link {% embed url="" %} {% hint style="info" %} **For Any Queries Ask Here:** [**https://wplms.io/support/forums/forum/support-queries/other-issues/**](https://wplms.io/support/forums/forum/support-queries/other-issues/) {% endhint %} # WPLMS GroundHogg (Version 1.1) ## Introduction This Addon will basically integrates the GroundHogg CRM features with wplms. So you will need this Addon for that. It enables the user to automatically create their own tags in groundhogg’s tags section. ## Purchase Link ### PayPal Link ### Instamojo Link {% embed url="" %} ## How It Works ### **Features:** 1. It enables the user to create their course-specific tags in the groundhogg. 2. Assigns the users to the course-specific tags as per their subscription in the course. 3. Automatically ADD/REMOVE users from the tags on course subscribe/unsubscribe. ### Setting Up * Install and Activate GroundHogg Plugin First From here: * Generate the API Keys(Public Key/Token/Secret Key) * Enter the Public Key of Groundhogg in Groundhogg Public Key section and Token in Groundhogg Token section in LMS - Settings - Groundhogg. * And Save the Changes as shown in images below ![](/files/-MPVZ-ZkKUfOiTe5SBHS) ![](/files/-MPVZ4UEBVaZkBc0-LRC) * **Creating Course-specific Tags:** By enabling this setting this will create course-specific tags in the Groundhogg - Tags section and after tag creation in GroundHogg ![](/files/-MPVZngWVtUZ_0QYCSXI) **Auto-Subscribe/unsubscribe user on Course subscribe/unsubscribe:** This will automatically assign users on course subscription and remove from the tag when removed from the course. {% hint style="info" %} **For Any Queries, Ask Here:** [**https://wplms.io/support/forums/forum/support-queries/other-issues/**](https://wplms.io/support/forums/forum/support-queries/other-issues/) {% endhint %} # WPLMS Active Campaign Integrate ActiveCampaign with WPLMS. ## Introduction Activecampaign is a cloud marketing software which have email marketing feature. It is ideally suited for small and medium sized businesses looking to grow through better customer relationships. Integrate ActiveCampaign with WPLMS.
## Purchase Link ### PayPal Link {% embed url="" %} ### Instamojo Link {% embed url="" %} ## How It Works Please check the article here: {% hint style="info" %} **For Any Query, please ask Here:** [**https://wplms.io/support/forums/forum/support-queries/other-issues/**](https://wplms.io/support/forums/forum/support-queries/other-issues/) {% endhint %} # WPLMS Custom Learning Paths (Version 4.0+) ## Introduction Custom Learning paths is becoming increasingly popular for eLearning communities. This is a concept where instead of courses and subjects, eLearning objectives are given more importance. There is no fixed path for eLearning, a learner can achieve objectives in multiple custom ways. Instead of units we focus more on activities and the sequence of activities instead of a fixed path. The custom learning path addon is a very exciting addon plugin for WPLMS. It aims on creating custom paths for students to learn on the website. Until now there was no concept in wplms for allowing students to learn something in a particular path and award certificates and badges for completing different steps. WPLMS CLP (custom learning paths) internally uses points/credits for each step, which opens up possibilities of achieving the objective via various combination of steps. ## Features * Create unlimited custom learning paths for students. * Sequential, non-sequential learning paths. * Include Social activities (friends, messaging) in Learning paths. * Include course activities, units, quizzes, questions, assignments in Learning paths. * Award points for each step of Learning path. * Award multiple certificates and badges for Learning paths, based on points criteria. * Anyone can enroll in and out of Learning paths. * Activity recording for all learning path steps is trackable. * Statistics for Learning paths, number of students enrolled and which students is on which step. * Integration with touch points, custom email templates, messages, notifications. ## Purchase Link ### PayPal Link {% embed url="" %} ### Instamojo Link {% embed url="" %} ## How It Works ### Features 1. User can enrol in any custom learning path available on website. 2. User can get certificate and badges for achieving particular points or completing some particular steps. 3. If the users have already finished the steps then they get the certificates and badges on enrolling. 4. Stats section for each learningpath. ### User Enrollment The user can go to learningpath page and can enrol in it by clicking on enroll now button. There are different steps in a learningpath which users need to complete for getting points and hence the certificate and badges for it. ### **User Achievements** Users can see their learningpaths in their profile Once the certificate and badges are awarded its shown in their my achivements section ### **User Stats on single learningpath page** User can see the stats of particular learninpath on the single learningpath page**.** **There are different touch points available for sending notifications, messages and emails to students** ## **How To Create CLP** You need to go to wp-admin -> LMS -> All Learning Paths, and click on add new button**. Here you will see different settings** * **Default Points awarded per step:** These points are only awarded if the step points is empty or set to 0. You can leave it as it is or set some points there, this is ideal for the case where all the steps have the same points and you don’t have to set the points for each step separately. * **Sequential steps:** Enable this setting if you want your users to complete all the steps in the given sequence. * **Add Certificates:** You can add multiple certificate templates and the points when it should be awarded for this learningpath. * **Add Badges:** You can add multiple badges and the points when it should be awarded for this learningpath. Then You can add steps in the learning path, you can choose different steps and the condition for the steps : Example for certificate and badge assign: Suppose there are 10 steps in your learningpath and each step has 10 points. Now you can set the certificate and badges for getting 50 points 75 points and 100 points. This way you can assign multiple certificates and badges to students while completing different steps in a given learningpath. {% hint style="success" %} **NOTE:** If the users are already enrolled in your learningpath and you add more steps in your learningpath then you need to sync your users with the learningpath. The button will appear in the settings section. {% endhint %} {% hint style="info" %} **For Any Query, Please Ask Here:** [**https://wplms.io/support/forums/forum/wplms-addons/custom-learning-paths/**](https://wplms.io/support/forums/forum/wplms-addons/custom-learning-paths/) {% endhint %} {% embed url="" %} # WPLMS Unit Timings Purchase Link: {% embed url="" %} # WPLMS Phone Auth Purchase Link: Tutorial Link: # Vibe Appointments This is a compatible version for v4 of wplms Appointments Addon Both wplms Appointments and Vibe Appointments are paid ones. So if you are using vibebp and wplms\_plugin which means you are on v4 so please deactivate wplms appointments Plugin and use Vibe Appointments Addon If you purchased Wplms Appointments then no need to invest money again on Vibe Appointments, you can actually get it for free by using wplms appointments License key to download the compatible version of Appointments from here: ### Video Tutorial {% embed url="" %} {% embed url="" %} ### Activate Addon The License Key you received, you need to add this license key in Vibebp - Addons - Vibe Appointments. ### How To Setup Vibe Appointments * Install And Activate the Plugin. Make Sure you are using the latest version of the addon * You will see a tab in wp-admin > Vibebp > Settings > Appointments Tab ![](/files/-MZbVetIYi-DadNLjWN3) * From Here, you can manage all the settings now * To Setup Menu, Go to wp-admin > Appearance > Menus ![](/files/-MZbWIMF6i_lwlOs4pvo) * Now, It will Appear in your Members Area like this ![](/files/-MZbWggxEqJ_YlP0Ce0S) #### Appointment Settings * **Appointments Minimum Slot -** Set the Time in Minutes here, as shown in screenshot 30 minutes set which means this is minimum required time slot for which you can create slots. When you will create slots and try to break into multiple small slots then the minimum time will be 30 minutes, which means you cannot create slot for less than this time. * **Buffer Time For Appointments -** After the Buffer Time Passed, you cannot cancel the booked slot * **Show Only Instructor Controls in Instructors -** If this checkbox will be checked then as a instructor you will not see the "My Bookings Tab" * **Translate Based On Location -** Not Available At the Moment * **Clear Expired Slots -** Check this checkbox to remove all the slots automatically when the time is passed ### Types Of Slots Creation * **Free Slots -** It can be booked by anybody who is logged in /or who has a account. No need to pay for this, Instructor will approve the slot from the Pending Bookings Section. Instructor Can also add student Manually from Manage Slots Section. * **Paid Slots -** From Settings Tab, first set the price for the Slot and then create Slots, which can be booked by users ## FAQ ### Q1. How Students Can Check the Available Slots Of Instructor Edit your member layout via Elementor and add "Bookable Slot" then login as a student and check instructor Profile you'll see this calendar where all the available slots will be visible. ### Q2. How to Forcefully Set calendar Language to French Language By Default This code you should paste in wp-admin > Plugins > editor > Select WPLMS Customizer Plugin > wplms-customizer.php where 'fr' is your language code. You can search your own language code from the url shared in the code below This same code will work for the all the addons in which calendar is used ``` add_filter('vibefullcalendar_locale_languageCode',function($lan_code){ return 'fr'; // your language code from https://www.w3schools.com/tags/ref_language_codes.asp },10,1); ``` # WPLMS Attendance Purchase Link: Tutorial Link: Recent Bug Fix: # WPLMS Woocommerce ## Purchase Link {% embed url="" %} {% hint style="success" %} **MAKE SURE YOU ARE USING VERSION 4.x of this Addon, if You are on Version 4. This is the compatible version** {% endhint %} WPLMS WooCommerce is a plugin built for WooCommerce compatibility with WPLMS. Although WPLMS natively supports WooCommerce, this add-on makes WooCommerce compatible with WPLMS. So, instead of custom metabox from WPLMS, you now get WPLMS settings right in WooCommerce metabox : ![](/files/-MXalIuP-FOyBNbX32R3) ## How To Use This Addon Using this Add-on, you can support **Variable Pricing for Courses** . So whats new with Variable Pricing ? Well, it might seem a minor change but it opens up a lot of possibilities to sell your courses. Variable pricing answers following requirements : 1. I want to sell course on monthly subscription $19 and Yearly subscription $199, the student should be able to select the subscription type at the Course itself. 2. Students who want a Course certificate should pay more than students who do not want a certificate. 3. Students who want to re-attempt Course X times should pay more than students who do not reattempt. 4. Students who want to re-attempt Quizzes in the Course should pay more than students who do not want to re-attempt quizzes. 5. Students who want a Course Badge should pay more than students who do not want a Badge You can also combine above settings to create new pricing models, for example : \ Course : Monthly : $19 Course : Monthly + Certificate : $29 Course : Monthly + Certificate + 1 Course Retake : $49 and so on … ![](/files/-MXalOyxfkGCp20KJN3M) {% embed url="" %} # WPLMS Batches WPLMS Batches is an add-on for sub grouping of students in courses. ## How It Works Purchase Link: {% embed url="" %} ### ## WPLMS BATCHES FAQ #### Q1. Selected Old Course Layout on version 4, and Batches Not Visible there, using wplms batches v4. Add this code in wp-admin > WPLMS > Plugins > Editor > WPLMS Customizer plugin > wplms-customizer.php ``` add_action('wplms_after_course_description',function(){ $id = get_the_ID(); $batches = wplms_get_course_batches($id); if(empty($batches)) return; $init=Wplms_Batches_Init::init(); $init->show_enroll_button = 1; ?>
    batch_grid_style('custom',$batch_id); } ?>
" %} In version 4, right now there is no functionality to create Events From Frontend. So you have to manage it from backend Only. Add the shortcode shared below, it will list all the Events on a page ``` [wplms_eventon_events] ``` ![](/files/-MXapqvJugZEn3tDwomC) ### Change Events Display Style You will find two options in LMS - Settings - WPLMS Course Events Settings ![](/files/-MXfZfsGmi8hK9VGP2Af) # VideoVibe Integrate popular Video platforms with WPLMS # Video Conferencing Video Conferencing solutions available for VibeBP/WPLMS Video Conferencing is basically a communication mode without being there physically. It is a mode of communication in the form of audio and video content. So for that, we introduced these integration addons {% content-ref url="/pages/-MJbXXIJ\_P4L0JklhtsM" %} [Vibe Zoom](/extensions-and-addons/extended-addons/video-conferencing/vibe-zoom) {% endcontent-ref %} # Lessonspace Read More About this Tool: https\://www\.thelessonspace.com/ To setup Lessonspace in your WPLMS.There are a few steps to follow. * Create an account here [https://www.thelessonspace.com](https://www.thelessonspace.com/) * Get your API key from here ![](/files/-MRe3XtM6Asc75I94he-) * Go to wp-admin > vibebp > settings refer this: * Add API key here and save the setting. * Setup side menu like this check this doc How it will work. * Meeting page working: * Unit page working: ## Was this article helpful? # Vibe Zoom Zoom integration addon for WPLMS & VibeBP. ### Download You can download this addon from the Setup Wizard - Features section or via direct link: ``` https://wplms.io/verify-purchase/?purchase_code=XXX&plugin=wplms.io/vibe-zoom.zip ``` replace XXX in above link by your WPLMS item purchase code. ### Installation & Setup Walkthrough {% embed url="" %} ### Calendar Integration {% embed url="" %} ### Multiple Zoom Account support As zoom restricts 1 meeting per host. We added this feature to enable multiple meetings to run simultaneously in your sites. ![Meeting creation in Zoom](/files/-MJeM83yCRMAutUgDFmD) ![WP admin Zoom settings for Vibe Zoom.](/files/-MJeMI1CI5e5AB4sp1zE) {% hint style="info" %} Vibe Zoom Meeting submit Button is not visible - There are two things you need to check 1. Make sure you selected a host user 2. And the password should be of 8 characters {% endhint %} ## Change Log ## 1.5 - 2020-10-14 ### Feature Added * Multiple Zoom Credentials for multiple meetings running simultaneously * Record API now Supported ### Fixed * Custom Tabs ordering filter # Vibe BigBlueButton BigBlueButton integration with WPLMS ### Download You can download this addon from the Setup Wizard - Features section or via direct link: ``` https://wplms.io/verify-purchase/?purchase_code=XXX&plugin=wplms.io/vibe-bbb.zip ``` replace XXX in above link by your WPLMS item purchase code. ### Installation and Setup {% embed url="" %} ### BBB Recordings in WPLMS {% embed url="" %} ### Changelog #### Vibe BBB 1.5\[18-11-2020] Provision added to hide password setting. ### Feature Added Meeting Reminders {% embed url="" %} # Vibe Jitsi Jitsi Integration with WPLMS/VibeBP ### Download You can download this addon from the Setup Wizard - Features section or via direct link: ``` https://wplms.io/verify-purchase/?purchase_code=XXX&plugin=wplms.io/vibe-jitsi.zip ``` replace XXX in above link by your WPLMS item purchase code. ### Installation and Setup {% embed url="" %} # Authentication How the WPLMS Authentication works. The Version 4 comes with a JWT login system which means the authentication happens in a browser. Which means that when a page is loaded the WordPress is not aware of which user is accessing the page. Now, this means that the server will always render the page as a static and you will be able to host your sites 100% cached, or even static HTML pages. The benefit of using JWT tokens is huge both in terms of Loading speed and scalability. The WPLMS can work as a part of your site without impacting the overall site performance. That is *"**Do not convert your entire site into an LMS instead chose only a specific part of your site to work as LMS**"*. This is only possible if we migrate away from the WordPress cookie based authentication structure to a JWT based login system. ## Generating the Token The VibeBP plugin uses the function : `vibebp_generate_token($user)` for generating the token for the user. The $user is the a user object see below ``` { 'id' => //ID of the WordPress user 'username'=> // Login username of WordPress User 'slug'=> // User nicename of WordPress User 'email'=>// User email of WordPress User 'avatar'=> // User Photo URL of WordPress User 'displayname'=> // User Display Name of WordPress User 'roles'=> // WordPress user role, Accepts Array of roles [] 'caps'=> // WordPress user capability, Accepts Array of capabilities, edit_posts (instructors),manage_options(administrators), read (students) 'profile_link'=> //the Profile link } ``` There is further possibility to process the token using the filter and modify the user object stored in the token. For example, course data can be added to the token. However as JWT tokens are sometimes sent in request header, we recommend keeping the size to a limited less than 8kb. ## Expanding the Token In almost all addon / plugins that you will create you will be required to expand the JWT token sent in the API request. You can expand the JWT token can capture the User making the request. There are 2 ways to expand the token : 1. Use the VibeBP Filter on the Token: `$user = apply_filters('vibebp_api_get_user_from_token','',$body['token']);` 2. Use the `vibebp_expand_token($token)` function Both above ways are correct. See following code snippet from our Vibe Zoom addon for expanding the token : ``` register_rest_route( VIBE_ZOOM_API_NAMESPACE, '/user/meetings/recordings', array( 'methods' => 'POST', 'callback' => array( $this, 'get_meeting_recording' ), 'permission_callback' => array( $this, 'user_permissions_check' ), ) ); function user_permissions_check($request){ //Validate token send in Post request $body = json_decode($request->get_body(),true); if(!empty($body['token'])){ global $wpdb; $this->user = apply_filters('vibebp_api_get_user_from_token','',$body['token']); if(!empty($this->user)){ return true; } } return false; } function get_meetings($request){ global $wpdb,$bp; $args = json_decode($request->get_body(),true); $return = array( 'status'=>0, 'meetings'=>[] ); $meeting_args = array( 'post_type'=>'vibe_zoom', 'posts_per_page'=>20, 'paged'=>empty($args['page'])?'':$args['page'], 's'=>empty($args['s'])?'':$args['s'], 'orderby'=>empty($args['orderby'])?'none':$args['orderby'], 'order'=>empty($args['order'])?'':$args['order'], ); //Capture the USer ID from the token. $meeting_args['author']=$this->user->id; //Process using the user_id ``` The token also have an expiry value that the administrator sets in the WP admin - VibeBP - Settings - General. This token is also used in Amazon S3 uploads in S3 plugin, Vimeo Uploads in VideoVibe Plugin. # API EndPoints Endpoints for API. API Namespace can change depending on version : 'vbp/v1' ## Generate Token `GET` `https://api.cakes.com/vbp/v1/cakes/:id` This endpoint allows you to get free cakes. #### Path Parameters | Name | Type | Description | | ---- | ------ | ------------------------------------------ | | id | string | ID of the cake to get, for free of course. | #### Query Parameters | Name | Type | Description | | ------ | ------- | --------------------------------------------------------------------- | | recipe | string | The API will do its best to find a cake matching the provided recipe. | | gluten | boolean | Whether the cake should be gluten-free or not. | #### Headers | Name | Type | Description | | -------------- | ------ | -------------------------------------------------------------- | | Authentication | string | Authentication token to track down who is emptying our stocks. | {% tabs %} {% tab title="200 Cake successfully retrieved." %} ``` { "name": "Cake's name", "recipe": "Cake's recipe name", "cake": "Binary cake"} ``` {% endtab %} {% tab title="404 Could not find a cake matching this query." %} ``` { "message": "Ain't no cake like that."} ``` {% endtab %} {% endtabs %} ## V4 API Doc Link {% embed url="" %} # Courses This is the Courses API calls. # User Actions User actions for Courses ## Enroll into the Course `POST` `https://yoursite.com/wp-json/wplms/v2/course/subscribe` #### Request Body | Name | Type | Description | | ---------- | ------ | ---------------------------------- | | token | string | The JWT token to identify the user | | Course\_id | number | Course Id to enroll the user | {% tabs %} {% tab title="200 Successfully subscribed to the course. Expiry is the PHP UTC timestamp when the user's access to the course will expire." %} ``` { "status": 1, "message": "Successfully subscribed to course!", "status": "1", "expiry": 123467 } ``` {% endtab %} {% endtabs %} # Customisation tips Customisation tips available in WPLMS. There are many tips which you can search in our support forums and knowledge base as well. {% hint style="success" %} Using Blank Child Theme? * Then add the code in Blank Child Theme's function.php file Not Using Blank Child Theme? * Paste code in wp-admin > Plugins > Editor > Select WPLMS Customizer Plugin > wplms-customizer.php {% endhint %} ### Tip 1: Change Icons of components in PWA {% embed url="" %} ### Tip 2: Adding A Youtube Preview Video In Profile {% embed url="" %} ### Tip 3: Show Link Of Quiz in Curriculum In course page, curriculum does not show links by default. This tip shows links to quizzes in the curriculum ``` add_filter('bp_course_get_full_course_curriculum',function($curriculum_items){ foreach($curriculum_items as $i=>$item){ if($item['type'] == 'quiz'){ $curriculum_items[$i]['link'] = get_permalink($item['id']); } } return $curriculum_items; }); ``` ### Tip 4: ReOrder Zoom Meeting Tabs ``` add_filter('vibe_zoom_script_args',function($tabs){ $tabs['shared_tabs']=array( 'course'=>_x('Course','vibe-zoom'), 'shared'=>_x('Shared ','vibe-zoom'), 'group'=>_x('Group','vibe-zoom'), ); return $tabs; }); ``` ### Tip 5: Add Custom Icons in Unit in wplms 4 ``` add_filter('wplms_get_element_icon',function($icon,$component_name){ if($component_name == 'jitsi'){//jitsi is your component name, change accordingly return ''; } return $icon; },10,2); ``` ####
# Custom Extension Here's a custom extension boilerplate template for building custom functionality in VibeBP. The VibeBP framework uses Bulma for its internal styling so we recommend re-using Bulma components to keep your CSS and scripts size to a minimum Here's a sample extenstion which you can use to develop your custom features in the WPLMS / VibeBP framework. {% file src="/files/-MObWLQHVMSHsWKSZZek" %} Vibe Boilterplate {% endfile %} Link to boilerplate with node modules : [Download](https://drive.google.com/file/d/1tdtox2fQ2QHzMw7a3S2UK6Yoch9PHFkD/view?usp=sharing) Now, install this plugin and activate the addon. ![Add to menu](/files/-MObWVOZmOOYexlCfYEF) 2\. Refresh BuddyPress navigation from WP admin - Vibebp - Settings - BuddyPress ![this is the boiler plate addon](/files/-MObWcvRcAGZDj0AgKNm) Now you can start building the extension. 1.. open the Vibe boilerplate plugin folder in the terminal or vscode 2\. Now move to folder assets/boilerplate , if you open package.json there are 2 commands. 3\. To initialise the react project, run ``` Initialise : npm install ``` 3\. Start development mode. ``` Development mode : npm run dev ``` understanding projkect strucutre ![project structure](/files/-MObXZAwEzm1kzu0IrWe) A sample API call looks like : ``` const APICall = () =>{ setisLoading(true); //Args is arguments from state //Your endpoint as defined in the class.api.php fetch(`${window.vibeboilerplate.api.url}/ENDPOINT`, { method: 'post', body: JSON.stringify({ ...args , token: select('vibebp').getToken() }) }).then((res) => res.json()) .then((data) => { setisLoading(false); if (data.status) { //Do struff } } }) } ``` The handler in includes/class.api.php the rest API init we define the API call ``` private function __construct(){ add_action('rest_api_init',array($this,'register_api_endpoints')); } function register_api_endpoints(){ register_rest_route( VIBE_BOILERPLATE_API_NAMESPACE, '/endpoint', array( array( 'methods' => 'POST', 'callback' => array( $this, 'get_endpoint' ), 'permission_callback' => array( $this, 'user_permissions_check' ), ), )); } ``` and its handler. ``` function get_endpoint(){ $request = json_decode($request->get_body(),true); //do all the processing here, $this->user is the user object $return = array( 'status'=>1, 'user'=>$this->user ); return new WP_REST_Response($return, 200); } ``` the permissions to validate the request is handled by VibeBP as this logged in area. It will also initialise a class object and assign the user value in the form as described below : ``` function user_permissions_check($request){ $body = json_decode($request->get_body(),true); if(!empty($body['token'])){ global $wpdb; //This filter expands the token and captures the user_id $this->user = apply_filters('vibebp_api_get_user_from_token','',$body['token']); /* $this->user = array( 'id' => $user->data->ID, 'username'=>$user->data->user_login, 'slug'=>$user->data->user_nicename, 'email'=>$user->data->user_email, 'avatar'=> (function_exists('bp_core_fetch_avatar')?bp_core_fetch_avatar(array( 'item_id' => $user->data->ID, 'object' => 'user', 'type'=>'full', 'html' => false )):get_avatar($user->data->user_email,240)), 'displayname'=>$user->data->display_name, 'roles'=> $user->roles, 'caps'=> apply_filters('vibebp_user_caps',$user->allcaps), 'profile_link'=>vibebp_get_profile_link($user->data->user_nicename) ), */ if(!empty($this->user)){ return true; } } return false; } ``` so the subsequent functions in a successful REST API call have the object $this->user as the validated user object passed from **Vibebp** to API call. ### Video {% embed url="" %} # FAQs The commonly asked questions, you will find all the answers here ## **Setup Issues** ### **Updating plugins manually** 1. **Download plugins from here :** [**https://docs.wplms.io/installation/installing-wplms-on-a-fresh-wp-install#plugins**](https://docs.wplms.io/installation/installing-wplms-on-a-fresh-wp-install#plugins) 2. **Upload plugins in WP admin - plugins - add new** ### **Sliders did not install.** Sometimes sliders do not import**.** This happens because sliders are bulky. They usually have a size from 6-8MB and most of the time the download just does not complete. This is a common issue becuase sliders are bulky, 6-7 mb it is very likely they do not download and install. So, you can simply download the sliders from below links and Install them directly. | WPLMS Demo | Slider Download Link | | ----------------- | ------------------------ | | Demo 17 About | | | Demo 17 Join | | | Demo 17 Community | | **How to import sliders ?** Locate your demo you were installing. Click on that folder link. Inside that folder, you will find the Zip files. Upload these zip files into the respective slider [\[How to import LayerSlider or How to import RevSlider\]](https://docs.wplms.io/faqs-1/faqs/importing-revolution-slider) ### Sliders Not Downloading In this tip, you have the zip of all the sliders used in our demos and you can download the zip and then import it in the plugin: ### Missing Images From Demo Sometimes this can happen if the image size is too large or the image is of format not supported in your WordPress site. Like Icons or WebP images. All images used in Demos are either Open to use or we have their extended license. You can download those images from the demos directly and upload to your site. [How to download images from a webpage.](https://www.dummies.com/computers/operating-systems/windows-xp-vista/how-to-download-a-picture-from-a-web-page/) ### Menus Incorrectly Setup Sometimes menus appear disordered as a lot of information is imported. This can be easily fixed from the customizer. [Video on how to fix menus.](https://www.youtube.com/watch?v=JJRQ7l03nmo\&list=PL8n4TGA_rwD-IdrZV4g0cEZJXgkPiX4Bu\&index=4) ## Manage Site ### Unable to edit Home Page with Elementor Some of the demos are not built using elementor. For such demos you need to import the Elementor template and edit the page.[Video walkthrough.](https://www.youtube.com/watch?v=bsBC6DZg8Xg) ### Profile Page Inaccessible Or redirects to home Most likely there is a restriction on the Profile page. Check WP admin - WPLMS - BuddyPress - Single Member profile view and WP admin - Vibebp - Settings - BuddyPress - Accessibility, public profile view. The settings should be like this: ![](/files/-MJfKuLugnXhLacojwoy) ![](/files/-MJfLIZBuSewTqbsp4xa) ### All Profile Menu links open blank Refresh BuddyPress navigation. WP admin - VibeBP - Settings - BuddyPress , locate and click the button. Refresh buddypress navigation. ### Directories Issue(Blank Page/Edit Directory) These steps will work for all directory related issues: First you need to check which page is connected as a directory page in Buddypress Pages, For that Go to wp-admin > Buddypress > Pages Tab and check here ![](/files/-MJfMGr17_o23pNC57k1) You can connect any page and these pages will start working as your directory pages. Now, If we are taking an example of how to edit the members directory page via Elementor. So what you need to do is first, set an option "none" here and then reload the members directory page, you will get an option to edit the page via Elementor . This is because, now it will start acting like a normal page. There you can edit the component and after saving connect the page here again. ***Check this:*** ### Widgets Not showing On Dashboard Please check these points and this issue will be resolved * First, Go to wp-admin > Appearance > Widgets and check the Vibebp Member Sidebar and Students Sidebar have the correct widgets or not. The Students Sidebar Should have students dashboard widget and vibebp member sidebar should have instructor dashboard widgets ![](/files/-MJfQapkBfefIkOpw30v) These are only a few widgets. It is mentioned on every widget that it is for student and this one is for instructors * If you selected member types from wp-admin > Vibebp > Settings > Buddypress > **Different Dashboard For Member Type** Then you will have different dashboards based on Member Types and widgets will be visible according to that. Enabling this setting ensures that widgets are set in Member Type Sidebars in WP Admin - Appearance - Widgets section, else your dashboard would show up blank. ![](/files/-MJfS5yMu6ifk-9atWrI) ### **In Members Directory Filter is Not working** For directory searching this needs to be enabled in profile fields. If this Autolink is enabled only then this field will be visible as a filter option in Members Directory. ![](/files/-MJhManAfefuqhCqZCYu) ### **Instructor Controls Not showing in Dashboard Area?** Please check these steps: * If the current logged in user-created any course or not * Check if Instructor Content Privacy is Enabled in wp-admin > WPLMS > Course Manager then disable the setting * Reload the Buddypress Nav By adding this ***?reload\_nav=1, then check again*** * Make sure you should have everything updated to the latest version * when Users do not click on the button **“Migrate to 4.0” which is visible in the dashoard area then the instructor controls not visible in the dashboard area.** It should be like this: ![](/files/-MJhNI2n8sa1vVmCsY1D) ## **Translation** ### **Translate Login Popup Texts** No need to translate these texts, you can easily change these texts from wp-admin > Vibebp > Settings ![](/files/-MJhL-u-SRkeYmlGpUU2) ### **Translate Profile Menu** ![](/files/-MJhLOxhB9XWnL7R6ZRS) You can change the label names from wp-admin > appearance > menus ![Translate profile Menu](/files/-MJhLfzuYi7I4tqhGSFi) ![Translate Instructor Controls](/files/-MJhLyItVXcS1ryJQKhc) To change these, you have to translate it first via Loco Translate Plugin. Once translated, it will not show the translations instantly. So what you have to do is add this: **reload\_nav=1** To reload the components with translated strings again : Click on Refresh BuddyPress Nav from WP admin – Vibebp – Settings – BuddyPress **yourprofileurl/reload\_nav=1** Like on my test setup, it will be: **** **Customizer Appears blank after running setup wizard** If the customizer is appearing blank, please go to WP admin – Appearance – Menus and set menus at proper locations. In some cases, there is a redundant menu entry which is causing the customi**z**er to not run. ![](/files/-MJhNI2n8sa1vVmCsY1D) ## Miscellaneous ### Uploads not working. Upload not working when you are uploading larger packages. Or shows up strange percentage values, like at full progress bar it shows 1.3% or 0.1% . This is a server issue. **Your server is not accepting Patch requests, consult web host to enable Patch request in server**. When you upload big files, bigger than the upload limit, VibeBP uploader breaks it down into parts to upload. The second and subsequent requests are called Patch requests as they add up to the same file. Sometimes servers are not configured for that and they show strange 406 errors. ### Social login not working Some caching plugins set the cache period of firebase keys to unlimited. To check this : Install the Transients Manager plugin from WordPress and then Simply make sure the firebase\_*public\_*keys transient is not set on "Never expire" mode. Quick fix is to disable the caching plugins like Auto-optimize and see if things start working and for permanent fix, make sure the transients are not being cached by the plugin. ## Premium Plugins Update Issue ### Wp Bakery(Visual Composer), Revolution Slider, Layer Slider You will not be able to update the Visual Composer Plugin since you need to have license key. We could not give you the license key because it is against the terms and conditions of Codecanyon. The premium plugins are included under extended license article : , which allows WPLMS to include them in the theme. The plugin authors however can sell the support for their plugins separately and ask you to purchase the license but it is not “required”, you can simply skip or dismiss their notification asking you to purchase the plugin license. How to update Visual Composer : **Method 1** 1\. Update the WPLMS Theme\ 2\. Login via FTP of your server , locate the WP content/plugins/js\_composer folder\ 3\. Delete this folder\ 4\. Login to WP Admin and you’ll see a notification that visual composer is deactivated.\ 5\. Go to WP Admin -> Appearance -> Install plugins\ 6\. You should see Visual composer, click on install and activate the plugin. #### Method 2 1. Go to WP Admin – Plugins and deactivate and delete the Visual composer plugin. 2. Download the latest version of WPLMS theme from themeforest. 3. Unzip the package 4. Locate the theme file and upzip it. 5. Locate the wplms/plugins folder and locate the js\_composer.zip 6. Go to WP Admin – plugins – add new and upload the above file. 7. Latest Visual composer is now installed. {% hint style="success" %} **NOTE: Visual composer in WPLMS can only be updated with the theme updates. It may happen that the theme has outdated version of VC if there is a VC update in between theme updates.** {% endhint %} ## Firebase issue , Chat , live modules not working While configuring firebase you might get this error : ![](/files/-MV0ylFsgxUx3c4DYS66) In such case you need to enable the realtime database and copy the config again ![](/files/-MV0z5EvwjgjuKL6a6-s) then copy the firebase config with database url and paste it to wp-admin -> vibebp -> settings : ![](/files/-MV0zt4TQViKOcGwUL9v) # Importing Revolution Slider How to import revolution slider. **Step 1** –Go to WP Admin - Revolution Slider. At the top of the interface are a row of large buttons. ‘Manual Import’ is the third one along. **Step 2 –** Click ton the button and Choose File dialog. Click ‘Click to choose’ to select the *.zip* file of the slider you wish to import. ![](/files/-MM3eAQ29fUQxhERgfYr) **Step 3** – Once you’ve chosen the *.zip* file, the import process will begin. ![](/files/-MM3eGaE7oM50wDOYrC1) **Step 4** – Once it’s finished uploading, you will now see your imported slider in the list of Slider Revolution sliders available. **Step 5** – The Sliders will automatically become visible on your home page. ### Missing Sliders Demo1 Slider {% embed url="" %} Demo2 Slider {% embed url="" %} {% embed url="" %} {% embed url="" %} Demo3 slider {% embed url="" %} Demo4 slider {% embed url="" %} {% embed url="" %} Demo5 Slider {% embed url="" %} Demo 6 slider {% embed url="" %} Demo 7 Slider {% embed url="" %} Demo 8 slider {% embed url="" %} DEMO 9 Slider {% embed url="" %} {% embed url="" %} Demo 17 Slider download links {% embed url="" %} {% embed url="" %} {% embed url="" %} # Importing LayerSlider **Step 1** – Go to WP admin - Layerslider **Step 2** – Locate Import slider on the screen **Step 3** – Import the slider ![](/files/-MM3ezrGWm11xlaneVDY) # App FAQ's FAQ's for App ### Address Bar / URL bar appears in my App This happens when you do not upload the accesslinks file in the .well-known folder. Please see step 1 in this video : ### H5P icons not appearing Add following CSS in customizer - Custom CSS ``` @font-face{ font-family:'H5PFontAwesome4'; src:url("https://langcom.online/wp-content/uploads/h5p//libraries/FontAwesome-4.5/fontawesome-webfont.woff"); } ``` Also add this link : in WP Admin - Vibebp - Settings - Service Worker - Precache resources. While saving make sure you regenerate service worker with an updated version. IF above does not work, another alternate is to edit the H5P plugin and add the font definition. This can be done via cpanel or FTP. Refer following screenshot for reference. ![](/files/-MeJP6EOCeGOAD_pJ9t-)