During the period 2015-2016 while I was studying the e-learning certificate at U of T, I had the urge to try to develop an online aka e-learning course using WordPress. I believed it could be done using some plugins that were either free or very inexpensive. At the time I also considered and did build an online course using the plugin LearnDash, but I persisted with my efforts until I had hacked together 80% of the core online course functionality without any expensive tools.
Normally when considering an LMS that uses WordPress you’d buy a plugin like LearnDash which starts around $100+ per year. If you add this to the cost of web hosting and time for development it can get expensive. Though I could have also used Moodle or any other LMS which can be installed in cPanel web hosting (which is the common shared hosting many people, like myself use), I decided to see what tools existed for a cheap DIY WordPress-hosted online course.
This blog post will walk you through a few of my goals, challenges, and solutions as I tried to create a WordPress-based e-learning website that had the characteristics of an LMS. The main process was:
- designing an e-learning website in WordPress (using the Divi theme)
- trying to make WP behave like an LMS to maximize technical potential
- investigating the various plugins that can convert WP to an LMS (the best are paid)
- implementing my own solutions to enable LMS-style functionality
Collage of image from the Scots to Canada E-Learning / Online Course Project
Designing an e-learning website with WordPress and the Divi theme
I’ve been using WordPress seriously for about ten years. About two years ago I discovered the Divi theme, which permits great leaps forward in custom page design. Elegant Themes, the makers of Divi, have also created a plugin called the Divi Builder, which can be used with any theme. Essentially each page becomes a playground for a modular approach to web page design. Here’s an image of a rendered page and the Divi Builder structure in the background.
Divi and the Builder are a great theme and plugin combo but they’re just the tip of the iceberg. There is a revolution going on in terms of the ease with which a designer can make their vision come alive with WordPress themes. Want a full width image followed by a 3-column section? No problem. How about easy ways to embed media players? Parallax scrolling? Check, check, check. It’s all there. And a vertical scrolling website is a very intuitive and natural way to view web-based text, images and media. (More on the benefits of vertical scrolling in a future blog post).
View a version of the Scots to Canada project at AncestryProject.ca
Trying to Make WP Behave Like a Regular Learning Management System (LMS)
Now I’ve been doing my research. A lot. And I have a certain amount of intuition about this, but it strikes me that though in a visual sense there is no doubt WordPress can be a great solution for an educational website, there still may be gaps in terms of functionality.
Though conventional LMS systems like Moodle have their limitations, they have some built-in functionality which is considered a must have with an LMS. The question is can you create an online course in WordPress, and include those must have elements? We require: a clear course structure in the navigation, the inclusion of content authored in tools like Storyline or Captivate, and the ability to record quiz results and track student progress?
The challenges are there but I was able to determine that with a handful of plugins and some extra elbow grease, this was indeed possible. Also rearing its head was the option to get it done with a paid plugin such as LearnDash, a WordPress plugin that leads the field but costs more than a $100 for the entry package.
First of all, what features was I looking to add to my site? Here’s a starter list:
- Registration – the ability to register users and create categories like “Student”
- Social Profile – allowing students to create a rich user profile of the sort found in slick cloud-based LMSs like Schoology
- Clear navigation – the user’s current location and the overall course structure have to be readily at hand
- Tracking / Recording – the capability to see how a user progresses through the material, and view assessment results
- Interactive / Authored Content – the ability to embed animations or quizzes created in authoring tools like Articulate Storyline 2 or Adobe Captivate
I also had these requirements of a WordPress-based LMS:
- Sophisticated page design – though not typical of LMS tools this is a priority for my site, and why I am using WordPress
- Low-cost – the tools had to be either free or very affordable
Those to me were the basic requirements. As I started my search I found that this would not be easy. Membership plugins allow for user registration and allow for various kinds of profiles and user communication, so that was relatively simple to cover. Also, adding content authored in e-learning software wasn’t too difficult either. A plugin to add Captivate content failed me but a superb plugin from H5P allowed me to embed a quiz as a web object (essentially the same concept as embedding a YouTube video). The difficulty however lay in finding a way to implement a very clear navigation system and being able to track and record user progress.
What plugins did I use? I found a WP plugin called “Progress Tracker” which I liked, but I decided it wasn’t going to meet my requirements without a great deal of hacking. By default it uses red to signify early progress and green to signify completion. To me it wasn’t worth changing the code, and I decided it would be better to build my own solution. In the end I built some old-fashioned navigation with various buttons and animations. My innovation was that my progress bar is animated. This was accomplished in Photoshop and After Effects.