LearnPress Tutorial (Free Version) Build Your Own Online Course

You’ll learn how to set up an online course using WordPress in this tutorial. Online education is an industry that is growing fast. We wanted to find a way of building course using WordPress that would allow you to offer free and paid courses.

Another goal was to be able to build the course using only free plugins, and minimizing setup time.

The first way we found of achieving this was by using a plugin called LearnPress. LearnPress, developed by ThimPress offers several tiers of pricing, including a free tier.

To our surpise, the free version even offered a payment gateway, using PayPal.

Based on that, LearnPress was definetly worth testing. Our first attempt went pretty well. You can watch the video where we set up a simple test course using WordPress in our video here:

This Learnpress tutorial video consists of adding LearnPress to an existing website. We were using an Astra template based site using Elementor as the page buider here.

This tutorial recieved a lot of good feedback and raised a few ideas a new tutorial. We wanted to cover more details like:

How to best add video content to the course.
How to improve the registration experience. How to make the checkout page a little better looking.
How to add a custom login page rather than using the default LearPress profile page.

The result was a new tutotrial below. It’s a lot longer than the first one but we have used the timeline to divide the tutorial into relevant sections.

Some of our favourite parts of using this plugin were there following.

Use ANY Theme with LearnPress

LearnPress advises that the free version works with Any Theme. In our example we tried this with the popular Astra theme and the free Elementor page builder. This seemed to integrate without any major issues.

Setting Up PayPal with LearnPress

Free version includes a PayPal payment gateway. We enjoyed using this a lot for a few reasons. Let’s discuss these now.

LearnPress avoids needing to setup WooCommerce. While we do love using WooCommerce, we have to admit that it is overkill in a lot of situations. For example, is your intended use simply to sell one or two courses? Then a simple PayPal gateway might be all that you need.

We found that it was very easy to enter our PayPal business email details. Everything was working straight away. Even testing the page with the PayPal Sandbox feature was a straightforward experience.

If you don’t feel like putting in the effort to set up a Paypal sandbox? Setting up a test course for 4c or 5c might be another quick method. This allows checking how the customer experience feels with LearnPress.

Customizing the course page

The default course page had a few things we wanted to clean up. The plugin didn’t include many options for changing the features on course page.

We also wanted to make our tutorial as beginner friendly as possible. So, we wanted to avoid trying to edit theme files with custom php.

The things we wanted to change on the learnpress course page were:

Hide the course breadcrumbs.
Turn off the student count.
Hide the instructor tab

The easiest way of solving this was to find the element names and hide them using some CSS. This is the CSS we used for our example course website. Feel free to copy the parts you like onto your own custom CSS section in your theme customizer:

 /* Custom CSS used in the LearnPress tutorial */

/* hide course breadcrumbs */
.learn-press-breadcrumb {
    display: none;
}

/* hide student count */
.course-students {
    display: none;
}

/* hide instructor tab */
.course-nav-tab-instructor {
    display: none;
}

Customizing the Course Grid Title – Edit the ‘Courses Archive’ Name

One small issue we had with our page was the title was named ‘Courses Archive’ and there was no way to change this easily in LearnPress or Astra. We used a little CSS to overwrite the name here:

/* Changing the title of the course grid page */

.archive .entry-title{
  visibility: hidden! important;
}

.archive .entry-title:after {
  content:'Courses'; 
  visibility: visible;
  display: block;
}

Customizing The LearnPress Checkout – Better Looking Links

One of the minor customer UX issues we found was in the checkout flow. We didn’t like the login and registration options in the default setup. The default design doesn’t look great and we aren’t sure how well this would convert traffic. If you are trying to sell high ticket courses than this could make an impact in your sales.

The good news is that we were able to improve this a bit with a little CSS. In our example video, we wanted to achieve two things. One, make the registration link bigger. Two, place some ‘button’ type styling around the link. This made a big improvement to the checkout experience.

We chose to make the registration button extra large. The idea being to make things more intuitive to new visitors. Feel free to edit this how you like, but this is the CSS we used:

/* Apply style to LearnPress registration and login links to create button effect */

.checkout-form-register-toggle {
		font-size: x-large;
    color: white !important;
    background-color: teal;
    padding: 0.5em 1em;
}

.checkout-form-login-toggle {
		font-size: large;
    color: white !important;
    background-color: teal;
    padding: 0.5em 1em;
}

LearnPress integration with other plugins

There have been a few reports of LearnPress being incompatible with other plugins. Also, some have found general difficulties when integrating it into an established webiste.

Having said that, dealing with plugin conflitcs is a fact of life when working with WordPress. It is a matter of testing and problem solving for your own case.

To reduce headaches in this area, we’d recommend the following tips.

Keep LearnPress on its own separate WordPress installation. You should use a fresh install of WordPress when starting a LearnPress site. For example, lets consider using ‘yourdomain.com’ for your course. Then, you could look at setting up you course on a subdomain at ‘course.yourdomain.com’.

Trying to add LearnPress to an established site can get tricky. If you need to install it onto an existing site, then clone your exiting site into a testing or staging area. Then you can test LearnPress and see how it will work with your exisitng site. This will let you find and diagnose any potential issues. Then you can fix them without affecting or breaking your real website.

Adding Video Content to LearnPress

There are a couple easy ways to add a video to your courese. You can do this through the ‘add media’ button on your course editor. Then you can link it a video with the ‘insert from URL’ action.

For free courses, using a free YouTube or Vimeo account can work pretty well. If you want to have some increased privacy and security options on the video? Then the paid version of Vimeo will be a better option.

There are lots of other video hosting options too. An excellent way of hosting other videos on your page is with the ARVE plugin. We tested a video hosted on Dropbox using ARVE and result was great! The video played smoothly and with no logos or advertising.

Be careful if you try using a dropbox free account to do this. Free dropbox accounts have a 20GB of transfer per day. So, if you try to host long course videos on a free public course it could get used up quick. For small videos behind a paid course it might work ok. We’d recommedn something like Vimeo Plus at a least in this situation. If your courses are generating revenue, it is worth it!

Self Hosting Course Videos

Finally, if you have powerful enough web hosting, like a dedicated server or a VPS with plenty of data allowance – you could try self hosting your videos. If trying this, you will want to use some protection to stop people directly linking to your files. We tested some .htaccess config settings below to set this up. Be aware that this isn’t for beginners. For most users, we’d recommend something like Vimeo to host your videos.

Course Videos – Hotlink Protection

If you have the ability to edit your server config in .htaccess then your can protect your mp4 files from direct hot linking.
You can copy and edit the following code to suit your own server:

#This works to stop hotlinking mp4 files from your server
#replace YOURSITE and .com with your own details
RewriteEngine on 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?YOURSITE\.com/ [NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?YOURSITE\.com.*$ [NC] 
RewriteRule \.(mp4)$ - [F]

Note this will depend on whether your server config will allow this. It won’t always work on some servers, particularly on shared hosting.

Conclusions – Creating Online Courses with LearnPress

In conclusion, creating an online course with WordPress was a good experience. Despite hitting a few minor obstacles along the way, it is possible to achieve quite a decent result. Even with our goal of using only free plugins, the result still looked and worked pretty well. Of course, the premium themes for LearnPress offer some great looking options too! Where time is critical and you have the budget, you should check those out too.

Here are the css styles we used in our LearnPress configuration. This cleans up some unneeded features from the page we built during the tutorial. Feel free to copy the code to your additional CSS area in the Astra theme customizer. You only need to copy the parts you are interested in using. Good luck!