hey how's it going Alex here from idea
spot and in today's WordPress tutorial
you're going to learn how to build and
sell an online course using WordPress
we'll be using a free theme a free page
builder and a free course plug-in so all
free tools and we're going to be doing
this completely from scratch by the end
of the tutorial you'll have a nice clean
well-designed course website people will
be able to come join your course they'll
better buy the course using PayPal you
can look at other courses a nice clean
course layout grid like this and
existing users will be able to come back
and login through this nice customized
login screen and we're going to be doing
all of this using free plugins so if
that sounds interesting keep watching
[Music]
now this tutorial does start completely
from scratch so it is a bit longer but I
have divided the video into sections
using the timeline so feel free to jump
around but the sections that interest
you basically we start with our hosting
and our domain then we set up WordPress
then we install our theme and templates
so we're going to be using the free
version of Astra and the free version of
the element or page builder then we
install our course plugin we're going to
be using the free version of a lion
press then we add our content our
quizzes and videos and do a little bit
more customization so that's basically
the overview our first step will be
setting up our WordPress hosting and
domain name now for this I recommend
SiteGround
check out that link in the description
because you do get a very big discount
when you first sign up so let's go ahead
and get started when you click that link
in the description it will take you here
where you can choose your WordPress
hosting plan at SiteGround
now by far the best value one is this
grow big plan their bestseller now that
gives you unlimited websites so I'll
probably go with this one if I wanted to
build more than one website but if you
really just need one website then the
startup plan will do fine but for this
demonstration let's go with the grow big
plan so let's click get plan the next
step is to choose your domain now this
is the name of your website for example
idea spot demo com let's try that if you
already have a domain you can use that
if you choose that option there but
let's just try registering a new day
and click proceed this bits pretty
boring we just have to put in our
details and our payment information so
let's go ahead and do that there
anything we really need to pay attention
to here here's the data center so by
default it's on the USA and now the USA
is probably the best choice if you're
looking at a general english-speaking
audience but if your business is
specifically targeting a certain
location you can choose something that's
closest to your audience but in most
cases USA will be a good choice finally
we've got the period the period needs to
be at least 12 months to get that full
discount but if you want that discount
over a longer period you can spend a bit
more upfront and get the discount over
24 or 36 months but for this demo let's
just go for 12 months now domain privacy
and sight scanner at both optional you
definitely don't need the site scanner
you can just use the free plugin like
wordfence or security check out my
earlier videos where I actually do that
and domain privacy I think it depends on
your project whether you need that
feature whether you want to keep those
details private or not but for this
demonstration I'm just gonna leave that
on ticked and finally you need to agree
to the terms and conditions you don't
need to agree to receive the newsletter
and then go ahead and click pay now
after that's all done you'll get a
success message and you can proceed to
the customer area the first time you log
in you'll get an option here to setup
your site you can also get there through
the websites either way is fine
let's click setup site now we're gonna
start our new website you can actually
migrate a website over from your
existing hosting if you're transferring
over to site ground but in this case
let's start a new website and click
select now we're going to be using
WordPress you can also use WooCommerce
and WordPress if you know you're going
to be building a online store for
example but let's go with WordPress you
can always add WooCommerce later it's
totally not a deal-breaker if you just
choose WordPress for now now what we
need to do is put an email address and a
good strong password for our WordPress
admin so let's go ahead and do that I'd
recommend using a different password
from the one that you use elsewhere and
go ahead and click continue again it's
gonna offer to try and sell you this
site scanner you don't need to add that
just go ahead and click finish it's
gonna say creating your site this will
take a couple of minutes so be patient
now we'll get a success message you're
all set we can go ahead and manage our
site down here so here we are in our
dashboard the first thing I like to do
is the security so let's look at the SSL
manager and we do get free SSL on-site
grant so we select our domain and select
our certificate I like to go for there
let's encrypt wild card you can go for
let's encrypt as well but wild card lets
you add subdomains as well in the future
if you want to use that feature so let's
click get that'll take a minute to
process and then you'll get the success
message saying let's encrypt is
installed let's go to https enforce now
and let's enforce the HTTPS you'll get a
success message and then we are good to
go let's head over to WordPress and
install and manage we can head down to
our site that we installed earlier and
we can go to our admin panel that's
giving offer us a little set up tutorial
we can just hit exit here and here we
are in our WordPress dashboard now
SiteGround has given up this little site
Greyhound style setup I like to disable
this plug-in just to have a normal
standard WordPress setup so I go to
plugins install plugins and they've got
this thing called WordPress data we can
go ahead and deactivate that one the
next thing I like to do is go to
settings and general and let's just
change our address to HTTP and HTTPS so
that makes sure that all our new files
that we add are going to be secured with
SSL as well so let's scroll down and
click Save Changes
because we just changed the address of
our sites gonna ask us to log back in so
log back in with the password and
username you chose when you set up
WordPress and click login
there we go and update that in chrome
and now we can go ahead and install our
theme so let's go to appearance and
themes and we're going to add a new
theme a theme we're going to go for here
is called Astro we're just gonna use the
free version of Astro so let's search
for Astro click on that and click
install once that's installed we
activate Astro will let us get started
with some starter templates which are
really great for when you're building
your first website so let's click
activate on that then we're gonna go for
element or as our page builder now we
can look at these starter sites and
filter by free to choose a free starter
site this is called Astro templates and
they give you a really nice
based to start from when you're building
your website now the guys at Astra
always making new starter templates for
us to use so this new one called
mountain is a really beautiful the
multi-purpose template so let's try this
one for a hard demonstration and let's
import the complete site and go ahead
and click import here then we have to
wait a few minutes to import all the
templates after a while it's gonna say
import is successful we can go ahead and
view the site now we can go ahead and
start customizing our site so the first
thing I might do is change our logo and
have a look at the naming and just the
basic site identities
let's click customize so here we are in
our theme customizer let's go with a
header and let's go to site identity now
this is where we can change our logo
let's go ahead and remove this mountain
logo so I click remove on retina and
remove on logo now we can go ahead and
select our new logo here we can just
drop in our logo so I'm just gonna go
ahead and do that okay now I'm just
gonna drop my logo in here there's my
idea spot logo let's select that one and
we don't want to crop it and there we go
and let's do the same thing for the
retina logo as well let's select that
one and same image and let's go ahead
and make that logo a bit smaller shall
we so we can change the width of the
logo here just by dragging the slider I
think now looking like around 75 looks
to be about right for this logo and
let's go to publish if you don't have a
logo it's really easy to get a free one
just head over to canva.com and there's
loads of logo templates you can
customize for your own purpose and these
look really really nice that's how I
actually made this one so very simple
and very easy to do next thing we can do
is change the name of our website so I'm
just going to call it idea spot and the
tagline can be
idea spot tech courses or maybe
easy peasy tech courses there we go
let's hit publish so that's the basics
of editing our logo our name let's go
back to this actual front page and work
on our header and this background image
so let's close out of this one we can
actually edit all this stuff using
Elementor so let's click that one and
the element or page builder is going to
load up now the first thing we might do
is change this mountain background into
something more suitable for a course
website so let's go ahead and click the
section and I'll click got it on that
one and we won't change the style of the
section and that's where we'll find our
background image so this is where we can
choose our image we can choose anything
from the media library or we can upload
things into the media library the other
cool option is free images from pixabay
so you can get free stock photos let's
say we wanted to search for something
course-related so I might type study in
here and we can find some cool looking
pictures to use for our course I might
use this a bit later but I think for
this demonstration my favorite way to
get free stock images is from pixels com
so I just searched for a study and these
are some really cool looking stock
photos related to studying so I think
this one the girl and the pencil and the
laptop might be pretty cool for our
website let's have a look at the size
nineteen twenty by twelve eighty that'll
be perfect for a background image and
you don't want to get that original size
it's a way too big for a website large
works perfectly for what we want to do
so let's go ahead and download that one
and head back to our element or tab here
and we're gonna upload that file that we
just downloaded so I'll just drag that
one in there and upload that there we go
and let's insert that one there we go
that looks pretty good now the thing
with using white text on a bit ship
background is that sometimes the white
text can be a little bit difficult to
read I always like to make these
backgrounds a little bit darker to make
the text more readable
so let's go to the background overlay
you can see that there's this gradient
that they've used this blue to greenish
aqua color and we can actually change
the opacity of that overlay so if we
drag it over there it gets dark if we
drag it over there it gets lighter so
you can see it's really hard to read now
but if we drag it over here it gets
easier so let's just move it to where
we're happy with the readability I think
around 70 let's go for 75 a nice clean
number there we go I think that looks
pretty good and that's a click update
okay now changing this to text is super
easy all you have to do is click on it
and start editing so I'm gonna call this
idea spot tech courses so let's say the
idea spot and all right tech courses
here
courses and write a little bit of a
description here let's register today
for for our easy beginner tech courses
what I might do with these buttons years
I could link that to the about page I
could link this one to the registration
page a bit later so let's click that one
and I'm gonna rename it instead of
calling it services let's call it a
register there we go let's click update
ok so our front page is starting to take
shape let's have a look and see how
we're doing on the actual page so we can
see we've got our logo menu see we
haven't done any work on the menu we can
do that a bit later and we've got our
basic buttons and background image all
set up so scrolling down you can see
there's still some more demo content
that we can edit using the exact same
techniques we used before but I think
now we're at the stage where we can
actually start adding our course plugin
so let's get into that alright so from
here let's head back to our dashboard
and we're going to go plugins and add
new now we're going to add our learning
management system plugin so I'll just
start by closing out some of those
notification boxes just you can say no
thanks to these options up there now the
LMS plug-in that we're gonna use today
is called learn press so I'm gonna plug
that in here learn press and search for
learn press
and there we go we've got a loan press
sitting right there let's install that
if you've watched any of my earlier
videos you'll know I really like learn
press I also like tutor LMS has a great
free version and if you have the budget
learn - is really cool as well but I
think learn press is probably the
quickest one to set up we don't have to
go through a full WooCommerce setup and
you get a pretty good result with learn
press so for today I think let's install
learn press and click activate so as
soon as learned presses are activated
you'll get the option here to run the
setup wizard so let's go ahead and do
that here we are in our setup wizard
let's click run by default it's in US
Dollars and you can customize this as
you like I'm going to leave it as
default I recommend doing most of your
business in US dollars if you're working
on an english website with an
international audience
let's hit continue now the static pages
it says we can generate the pages
automatically just by clicking here or
you could name them yourself and create
them but let's do it automatically and
then click continue and now with payment
we can use PayPal it gives you PayPal in
the free version of learn press as a
payment gateway so that's really cool
let's go ahead and set this up so we
want to enable PayPal we want to pop in
our paypal email address make sure
you've got a paypal email address using
a business account works best go ahead
and click sandbox mode and put a paypal
email in fear sandbox mode as well this
allows you to actually test the payment
system to make sure it's all working as
intended before you go live so once
you've done that let's go ahead and
click continue now here we're going to
enable emails because learn press sends
emails throughout the process where
people register and enroll in classes
and things you get administrator
notifications so we want to enable those
and click continue now we're almost done
with the wizard if you're just playing
around and want to see what this can
really do you can install a sample
course and that will let you look around
otherwise we can start with a blank
course by clicking and creating your
course so let's go ahead and do that and
it's giving us a notification that our
profile page and check out page haven't
been stood up yet and we can click here
to set them up automatically so go ahead
and do that
if you have the chance okay now here we
are at the add new course screen of
learn press we can close that little
notification so we don't have to worry
about getting it in newsletters and now
we're ready to start creating our new
course but I'm going to go through a few
settings of learn press and word press
before we start doing this so let's
cover a few of these details first first
thing you want to do is make sure you've
got registrations enabled so go to your
settings in WordPress and this is under
general settings so you want to be able
to make sure anyone can register to your
WordPress site because learn press your
students become members of your
WordPress site so you want to make sure
that is enabled that is often disabled
by default on WordPress and the new
default were always a subscriber so make
sure those are set up properly scroll
down and hit Save Changes the next thing
you want to check is your family
settings because learn press works
really well with post name and first
name works well with most blogs to be
honest so if you haven't set your blog
as a post name in WordPress go ahead and
do that if you have your WordPress site
set up using something else you may want
to set up a fresh site to do learn press
and I actually recommend if you're
running a online course then I think set
up a fresh WordPress website anyway
because you're going to be using student
users you're going to be having maybe
other instructors and the actual LMS is
going to interact with your WordPress
theme so it's just better to have a nice
fresh clean install to do this kind of
job anyway let's click Save Changes if
you haven't saved those already and then
let's head back to learn press
and we are going to look at the settings
so most of these settings can probably
be left as default but let's just go
through a few of these things so logout
redirect when people log out let's just
send them back to the home page let's go
ahead and click Save on that one now
let's check out courses I like all of
these as they are the only thing I might
change he is the single course permalink
I'd like to have that set as course but
apart from that I think it's all pretty
good click Save next let's look at
profile so by default the profile page
is called LP profile let's go ahead and
edit that make it a bit cleaner let's
call it maybe course profile so I'm
gonna call it course profile and the
permalink we can just call that course
profile here you know it looks a bit
neater there we go let's head back to
our - the other thing I like to change
he has enabled the login form if the
users not logged in and enabled a
register form if the user is not logged
in and that will obviously just do those
things on the profile page so let's save
those settings
now let's get payments again the default
name is LP check out I think it's just
done that because it might cause a
conflict with WooCommerce if you just
call it checkout so I might quit course
checkout
you're free to just call it whatever you
like but just make sure if you're
running WooCommerce that it doesn't
clash with your WooCommerce checkout
page so I'm going to call that course
check out and put course check out there
as well so let's hit update there we go
now after reloading this we can see that
course checkout is there now instead of
LP checkout now besides that everything
else can pretty much stay as is enable
guest checkout you can try it I didn't
really like the guest checkout because
after someone buys the course as a guest
then you have to go back in and then
create a username and password profile
for them I'd rather just enable the
registration in the checkout let them
settle that themselves and have that all
automatically done so I think that's all
pretty good by default there the other
thing we can do is make sure the payment
by PayPal thing is ticked there and
let's go ahead and save this settings
there we go let's just check PayPal here
we did that during the actual wizard but
for some reason we've lost our settings
there so I'm not sure why that happened
but we can fill those in again so just
plug your paypal email sandbox mode
paypal email save settings there we go
let's look at pages we can leave that as
is
emails all these things can be pretty
much left as is by default
you've got your admin email and your
admin username so you can customize that
if you like if someone else is going to
be doing the course administration you
can change to their profile in that
position let's have a quick look at
advanced all of these things are fine
and I think we're pretty much good to go
so let's go back to our courses there we
go so we haven't added any courses yet
and we can click add new to start adding
courses so let's do that and here we are
at the add new course screen okay so for
this example let's just say we're making
a wordpress training course and we'll
just put our title in there and the
first text area is where you just put a
little bit of an introduction about the
course so let's just put a little bit of
info in there about the course and click
publish and now let's go ahead and look
at the curriculum and some of these
course settings the curriculum is the
structure of your course so in learn
press this means you've got sections and
sections are made up of lessons and
quizzes so let's make a section we're
going to call it section 1 and press
ENTER and in this section we can make a
lesson or a quiz so if we click that we
can create a lesson if we click the
clock we can create a quiz so let's
start by creating a lesson and that's
call it lesson 1 and he enter there
we've got a lesson 1 we can edit that
with the little pencil thing there and
let's make a quiz as well and let's call
that quiz 1 so there we go let's hit
update and we should see our lesson 1
and our quiz 1 so let's go ahead and
start editing our lesson 1 so let's
click edit and we can start editing our
lesson let's start by putting in a
little bit of a lesson in content and
then we can also add media to our lesson
so with that button we can add pictures
and we can actually add videos as well
so adding media we can add media from
our media library so I might just try
adding this girl in there
and go ahead and insert that in I might
actually have a larger size let's let's
make it a bit bigger there we go maybe
that's a little bit big let's just make
it a nice size and then let's Center it
okay now let's click update now you can
also add video to these lessons as well
so if you were to add media and you can
insert from a URL so you can actually
link to say an unlisted YouTube video or
a Vimeo file on Vimeo comm and you could
host your lessons by posting videos as
well so that can be a really great way
of presenting your course so I think
we'll get to that later in the video
let's just continue on setting up learn
press and make sure everything's working
properly and then let's get to the video
content towards the later stage of this
tutorial it's going to go ahead and
click update make sure you click update
regularly just to make sure your lessons
and quizzes and things are all set up
properly in the database there are a few
things we can cover on the lesson and we
can actually make the lesson a certain
length of time or you can just set it to
zero to have an unlimited amount of time
and review lesson means that the student
can view the lesson without taking the
course so maybe you might want to make
the first lesson a preview lesson and
that might help you actually get more
students enrolled if they can preview
the first lesson but I'm going to leave
that on tick for now I'm gonna ante that
allow comments as well so otherwise
you'd have the comment box at the bottom
of the lesson that might be useful if
you've got a paid class and you want
people to be able to leave comments but
otherwise just leave that on ticked so
then I'm going to update that so let's
go back to our courses there's our
WordPress training training course let's
go back to editing editing that course
and there we go there are a few things
we didn't cover actually in the course
settings so let's just cover that
quickly now so the course has a duration
by default a student has ten weeks to
complete the course you can change that
to a whatever timeframe you'd like let's
just change it to 52 weeks giving the
student a full year to complete the
course if they want you can limit the
number of students that can be enrolled
and the number of times people can
retake the course by default that's zero
let's give the students one chance to
retake the course the rest of this we
can leave as is
back and click update now there are a
few more options we can look at here as
well assessment by default the
assessment is done via lesson so
students just have to complete the
lessons to complete the course you can
change that and say I have to pass the
quiz to pass the course or you could
choose some of these other options here
as well so I'm just going to leave that
as evaluated via lessons but you're free
to set that according to your own
preferences now pricing I think for the
first example let's do a free course and
then later on in the video let's show
you how the actual pricing works and no
requirement to enroll if you tick that
that will make your cost public so that
might be a good way of promoting your
courses by offering like a short free
course that doesn't require anyone to
enroll but let's uncheck that and at
least if it's a free course at least we
will have to sign up with their name and
email so at least get some contact
information from your prospective
clients so let's leave that on tick for
this example now review logs and author
can be left as is the last thing yes
let's turn off the allow comments there
as well so I think we're pretty good to
go let's go ahead and click update any
other thing was this looks a little bit
plain we may as well just add another
image here as well so let's go back to
our add media let's grab something from
our media library shall we let's try
grabbing some free stock images for this
example so I'm gonna type study in there
and go ahead click enter see what we get
so let's go with maybe this little
workshop it looks pretty good
and then let's go ahead and insert this
into our media library click Save and
insert that will download the image into
your media library now we can insert
that into our post I'm gonna make that a
little bit smaller and Center it no so
that looks a bit better now let's click
update now we've pretty much covered
most of these settings one other thing
that's good practice to do is set a
featured image for your course let's go
ahead and choose that girl from the
heading as our featured image let's go
ahead and click update
that's so when if we have multiple
courses and we want to display them as a
grid for example they could all have
their own featured image so that's all
set up and ready to go we can actually
preview and see how this looks so far so
here we go there's our featured image
this is the WordPress training course
we've got some breadcrumbs in the
student count I'm going to show you how
to remove those with CSS a little bit
later and those is the introduction and
this little image that we put in there
before and if we click curriculum or you
can see we've got a one lesson in one
quiz these are locked because we're not
enrolled yet and in the instructor tab
just has your profile picture and your
username there so let's go back I'm
gonna show you how you can turn that off
if you want a bit later as well and we
can customize this a little bit more I
actually think this looks better without
the featured image it look a bit more
clean if the title was actually at the
top a featured image we can still use it
on grids and things but we might turn it
off on the actual course page so let's
go back to our course and go back and
let's actually disable the featured
image there let's go ahead and click
update now when we reload our course
page let's see how that looks so that
looks a little bit cleaner like I said
I'm gonna remove those couple of things
late as the breadcrumbs in the student
account and let's just clean this up
make it a bit more minimalist but I like
how it's all progressing so far okay
let's see about removing those things
and we can also do something work on our
footer as well because we haven't
touched that yet either so let's go to
our theme customizer up there I'm gonna
open that in a new tab it's wait for
that to load up first thing I'm gonna do
is remove those breadcrumbs and that
student account so let's go to
additional CSS
I'm just gonna paste in some CSS that I
made to remove those things I'm gonna
share those in the description that'll
I'll just put a link there we can go to
my blog and you can get that bit of code
for your theme and paste that empty of
the additional CSS that'll clean up the
page a little bit more but you can
remove the breadcrumb with that section
display the students you can turn the to
student count off with that one and you
can remove the instructor tab with that
one there so let's go ahead and click
publish now looking at our footer in
most cases your theme will control the
footer through the footer witches and
footer bar but in this case it looks
like the foot has actually been designed
in Elementor so we can go ahead and edit
those element or blocks let's have a
look at that now so to do that let's go
back to our site and you can hover over
edit with Elementor and get to your
footer through there you can also get
there through your dashboard if you go
to your appearance and header and footer
blocks there in your dashboard either
way we'll get you there you've got a
site footer under element or there we
can go ahead and hit it with Elementor
so let's go and load that one up so here
we are enough footer
it's just like editing anything else in
Elementor I think for this tutorial just
as simplifier I'm just gonna delete that
whole block and just have a nice simple
full of copyright by ideas spot it
doesn't need to say powered by ideas but
I think that's all good let's just leave
it like that nice and simple
I might send her it to be honest that
might be a little bit cleaner there we
go yeah update let's head back to our
course page and see how that's turned
out I'm gonna reload this so we've got
our breadcrumbs and student counts all
gone the instructor Kent instructor tab
is gone and down the bottom of just got
a nice clean footer so I think sometimes
less is more a nice simple website he is
less distracting easy to use a better
experience in a lot of cases so I'm
quite happy with how things are going so
we've got our course page and we've got
one lesson done we started setting up a
quiz but we haven't actually added any
questions so let's keep working on our
quiz so let's get back to our course
let's go to quizzes
and let's go ahead and look at this quiz
let's edit the quiz there we go
now this is the same concept as before
we can add a little introduction to our
quiz but then we have to add questions
to our quiz so let's create a new
question so let's call this question is
WordPress awesome and then we can add a
new we can say true or false multiple
choice or single choice true or false is
obviously true or false single choice
means there'll be a list of choices and
you have to choose the correct one multi
choice means there's a list of questions
and answers and you can choose multiple
answers so let's call it this one a true
or false question and it's worse press
awesome I would say that's true one mark
for the question you can put a little
bit of information in there about the
question a bit of content let's put in a
little bit of content for the question
there we go
and some explanation for the question
and maybe even a hint for the question
as well if someone wants to click the
hint so we can fill that in with a bit
of filler content just for this demo and
so that all looks pretty good we can now
create another question let's say have
you subscribed to ideas spot yet see
what I did there
let's make this a single choice question
and with three options we can say yes
second one can be already am and the
third option will be not yet but
definitely subscribe if this has been
useful and click like as well I really
enjoyed making these tutorials and I
hope you like watching them anyway so
besides that we can fill in these areas
here with the hints and the background
and things for these questions so each
question have their own question content
explanation and hints so that looks all
good now let's go ahead and let's update
that so there we go we've got two
questions we've got a bit of a
introduction there so the quiz looks all
pretty good let's have a look at the
actual quiz options here actually while
we're here so you can show the list of
questions while you're doing them as
ordered so leave that ticked I think is
good you can review the questions after
completing the quiz I think that's worth
allowing the student to review the
questions show the correct answer I
think yeah may as well you can show it
to them then or you could go through
with them later up to you
duration if you want the quiz to be
unlimited time you can set it to zero
otherwise you could make it a limit a
time limit on the quiz let's make them
do the quiz for 120 minutes that should
be plenty of time to answer two little
questions anyway you could you could
deduct points if they get things wrong
and set the passing grade so 80% to pass
is the default you can make it a hundred
percent or whatever you like and they
can retake the test or you could set it
to zero and they can't retake the test
so let's let people retake the test one
time for example finally these ones you
can actually check the answer during the
test if you wanted to let me check the
answer while they're doing it maybe that
was just like for a practice exam
perhaps so you could set it to zero
which disables it obviously which is the
default you could make them unlimited
checks with a minus one so you could
always check the answer or maybe you
could let them check the answer maybe
four times during the quiz so you could
set it to four I think leave me in 0 it
works pretty well in most cases and the
same with hints you could have unlimited
hints with minus 1 no hints with 0 or
you have a limited
hence Berkeley so let's say that's a
five for hints for example I might just
try up and let's have a look at how the
hints function actually works in
practice so let's go ahead and click
update there we go so I think that's the
basis of setting up a course with a quiz
so this is these are all the skills you
really need to use this plugin so let's
go ahead and look at our course and
let's do a quick run-through and see how
it all works in practice so let's go
ahead and view that course and there we
go our WordPress training course we've
got our overview our curriculum it's
free to enroll at the moment let's go
ahead and enroll see what that's like
I'm already logged in so you can go
straight into the class and let's start
with lesson one so here we are in lesson
1 the student can just go ahead and read
it when they finished reading click
complete do you want to complete lesson
1 okay then we're on to the quiz I've
noticed that these headings are all
lowercase I think that's the theme
related we can have a look at that after
the quiz I think but I'd like to fix
that up I think let's go ahead and click
start so we can read about the quiz the
time starts ticking so we remember we
set two hours for our quiz is WordPress
awesome it is awesome that's true we can
add hints there like we heat it in a
setup so you can read the explanation
and the hint and there we go and we can
go to our next question have you
subscribed to idea spot yet I hope you
have and even though we can go ahead and
click yes and then we can go ahead and
click complete do you want to complete
the quiz there we go
and we've got a hundred percent so I
look pretty good if we didn't get a
hundred percent we could redo the quiz
we've got a one redo and we can set how
many readers you want in those settings
of course as we did before but there we
go now we click the finish cost you want
to finish and we're all done we have
finished the course WordPress training
cost we can actually retake the course
you can allow them a certain number of
retakes if they want and that's really
all there is to it but I really think
there's lower case headings are bugging
me so I might just fix that up right now
so let's go to our customizer load up
our theme customizer so I'm using Astra
and now this is going to be under global
typography and headings
we've got Montserrat family headings and
by default they are lowercase so let's
just say we want no text transform on
those headings so I'd like them to be
whatever I thought would be good
h1 they've set them as capitalized
headings and then the other ones just
inherit from the top one so I think
that's okay let's just head publish on
that and see if it's a little bit nicer
if I were to go back to our actual quiz
and reload what actually does that looks
a bit better so the eye is a capital hi
now this e is a capital C so I quite
like that a bit more so we've seen how a
free course works let's look at how a
paid course might work so let's go back
to our courses so back in our - let's
hit courses we could actually just
duplicate the course we already made and
let's edit that course and make it a
paid course I'm gonna click duplicate
and then we'll get our wordpress
training course copy so rather than call
it copy let's call it WordPress training
course Pro that sounds pretty good
people will definitely pay money for the
pro version so let's hit publish now all
we have to do to make this a paid course
is go down to our pricing so let's make
it pricing let's just make it for this
example this lets us charge I don't know
maybe just 10 cents and that's all we
really need to do go ahead and click
update
there we go so training course prior
let's open that in an incognito window
and see how that works at the moment now
I used incognito so I'm not logged in so
someone looking at this web page for the
first time what would it look like what
would the actual sales thing look like
so there we go we've got a 10-second
course and we can click via this course
so when we buy this course we can see
that we've got a chance to login if
you're a returning customer or register
if you are not yet a customer now I
think we can do a little bit better with
this page I'd like the login and the
register options to be a bit clearer for
the user so this flow is a little bit
more intuitive so let's work on this I'm
customizing this a little bit so to
customize that all we'd want to do is go
to our theme customizer I'm gonna do
this with custom CSS so let's open that
customizer up in a new tab and then
we're gonna go to additional CSS that's
the CSS we've put in before to customize
the course page now I want to customize
that checkout page now what I've done is
made some custom CSS to make those login
and register links pop out a little bit
more and make the interface a little bit
more intuitive so I'm gonna pop that in
there I will share that in the
description so you can go and get that
code as well but let's just hit publish
now back on our checkout page let's
reload and see what that looks like now
so that looks a lot more intuitive I
think if I was coming here for the first
time it's a lot more obvious that I need
to click register given that I've got a
nice teal colored button there so quite
like that you'll notice that in that
code I set the register button to be
extra-large and I set the login one to
be large I just thought it'd be better
to emphasize the registration for new
users but feel free to play around with
those styles however you like but that's
how I thought it looked good obviously
if you're not using this teal color on
your website I've said it to teal you
can choose any color you want in that
session as well you can use an HTML code
and pick any color Under the Sun so
totally up to you so anyway back to our
registration we can go ahead and
register a new person for the class the
new user would just type in their new
username so
maybe I could be Lisa Simpson and I'll
just put the email address in here
so just pop an email address and the
password in there and click register so
now we'll be at our course checkout
we're logged in we can pay with PayPal
we can go ahead and place our order they
will process and it will ask us to log
into PayPal so that is basically all
there is to it
all they do is log into their PayPal
account and pay for their course now
because we're you just using a PayPal
sandbox to test with we can put our
PayPal sandbox email in there and we can
test this without actually doing a
transaction if you've never done this
before if you've got a PayPal business
you can just go to developer PayPal comm
slash developer slash accounts and you
can make a sandbox accounts so I've
gotten had it and done that already but
I'm not going to show you the full
process of doing that in this tutorial
but I just want to show you how this
actually works on the learn press
website so that's just a PayPal sandbox
email are generated let's go ahead and
click Next and now we just have to put
our PayPal sandbox password in there we
go click logon and that will let us
complete our transaction we can just go
ahead and click pay now
there we go
and then we can return to the sellers
website there we go and our order has
been received so Lu and press will
automatically email the student and you
can also click the link there and access
your course or you can go through the
say the menu of your website can be set
up to access the course as well I'm
going to setup the menu a little bit
later as well so you can access the
courses through there but here we are
now that we've paid for the course we
can go ahead and start our lessons do
our quizzes whatever we want so that's
how a paid course works I think now what
we'll do here set up that header menu
now that we've mentioned it and let's
make a page for all of our courses so
people can easily get back to their
courses and maybe let's make this button
here a login button so students can come
back and login to their courses so let's
go ahead and get started on that so back
on our dashboard let's go to pages and
we can see all the pages that we've got
on our website so far and learn press
actually generates a page called courses
if we go ahead and view that we can see
that our courses are here our featured
images are the thumbnails and we've got
a little bit of detail about each course
we can see that Astra uses an archives
header for this heading so we could have
it you couldn't want to customize that
and I also want to change my username
because I never set up a proper display
name for my username when I made this
website so let's look at that right now
so back in our dashboard let's go to
users and all users and I dear Spock
class is there let's go to edit and our
nickname is going to be idea spot and I
wanted to publicly display the name as
ideas but I think that'll look a lot
better on that course page there we go
if I go back to those courses let's
reload that there we go so we've got
ideas but as the
they're that the pro cost the 10-cent
pro cost and the free course is right
there now let's go ahead and try and
customize that heading
so to customize this heading I do have
to go ahead and override the theme in
CSS I actually had to search Stack
Overflow to find this code but probably
not in there I just made it courses
looks a little bit cleaner so I'm a lot
more happy with that course page and
every time you make a new course it's
automatically gonna be added to this
page just like you'd add blog posts to a
blog all we have to do is don't forget
to hit publish and let's go back to our
main menu so now what I'd like to do is
customize this top menu and I'd like to
put the courses on that menu so let's go
to menus and a navigation menu so there
we go we've got home about services and
contact now I would like to customize
this a bit so I'm going to add items but
I want to do is remove that one services
and I do want to add courses there so
that looks a lot better
let's hit publish now that will take us
to our courses page so we can see all of
our courses now this works good if
you've got lots of courses because it's
got three columns and if you're looking
at it on a mobile it's got one column a
tablet I think it's got two and on a
desktop it's got three but if you don't
have that many courses maybe don't
bother using this course set up you
could probably just make your own course
page design in element or and just show
you that your you've only got one or two
courses for example you could design
this however you want it to look I might
actually do that on the main page a bit
later so stay tuned for that but let's
work on customizing this header a little
bit more the other thing I might do is
change that take action and make it a
login button
so after people have bought things they
know where to come back to login to that
course so let's go back here and let's
go and find that option so in Astra this
will be under header
and primary menu there we go there's
take action I'm gonna call this one
login and hit publish and I need to find
the link to send this to I think it
needs to just go to the profile page so
let's figure out where that is so that
should be under learn press settings and
pages and if we look at the pages that
it generates I think there's one called
cost profile that should be the correct
one let's view that so it cost profile
if you're logged in it'll show your cost
profile if you're not logged in it
should show your actual login page so
there we go I'm logged in as Lisa
Simpson on this one let's log it out
there we go so let's have a look there
we go so we could make the login page
take us to here where people can log in
or register if they haven't registered
already so let's use that link and let's
go back to our customizer this is the
link we want slash course profile so
let's publish that one there we go now
the other alternative instead of linking
to the course profile through that log
in thing what we could do is design a
totally custom login page in Elementor
and link to that and that might look
good as well but I'm gonna save that
later on in the video so keep watching
now this will probably look better if
they had a different featured image so
let's fix that up right now shall we
let's go back to our dashboard and let's
go to learn press courses and let's edit
the prior version and change the actual
featured image to something else let's
get these people there
there we go and as I paid that one I'm
given that it was three columns let's
just make three courses why does that
cause us there we go and let's duplicate
that one and so fully in a wordpress
course let's make this one ay-yi
ecommerce ecommerce course ecommerce
cost pro that sounds pretty cool there
we go and change the image let's grab a
free image and let's look at so maybe
commerce see if there's a good picture
there we go not that one with the stocks
rising up how about that I'll select
that save an insert and there we go
let's hit update cool now let's have a
look at how this web page is actually
shaping up now so I'm gonna go ahead and
view this site that's open a new
incognito window have a look at it as a
fresh user so there we go we could log
in there that allows us to login or
register if we haven't registered
already we can go back to our home which
is it looks like that I might actually
link that to the registration or maybe I
could link it to my blogging course
maybe and courses takes you to our
course page where we can see our three
different courses that we've got so all
looking pretty cool this one I see that
the aspect ratio is a little bit
different I might fix that up to make
them all even but if you use the similar
size image for each one you shouldn't
get that issue if you did want to fix up
the aspect ratio on that image I'll show
you how to do that right now
so let's go to - and let's open that
course so that was in our learn press
courses and I think it was WordPress
training course so let's edit that one
there's our featured image and all I
want to do is edit that image now I'm
pretty sure the other images in nine
twenty by ten eighty and this is 1280 s
so we could just change that to nine
twenty by ten eighty to do that we just
put in our new ratio so we have to hit
crop first and then put in the new size
there that'll give us our new crop
factor and we can choose which part of
the image we want to show in that ratio
let's just keep it there and then let's
hit crop and it'll save we can click
Save there and then we just set that as
our featured image there we go now when
we look at our course page and reload it
we can see all the images nicely lined
up so that looks a lot better and if
someone wanted to go ahead and purchase
a course they could go ahead and click
one and go ahead there to buy the course
and new customers can register they can
register they're set up a username and a
password let's do that now say we want
the part Simpson and an idea spot class
plus part at gmail.com
and just make up a quick password for
this one and click register there we go
and we'll take you to your checkout
where you can place your order with
PayPal and then you go through that
PayPal process I'm going to go ahead and
pay again there we go
pay for the course okay now there we go
right now we can return to the sellers
website and we can either use that link
there we can go back to our courses here
and access our course that we just
bought instead of which one did we
actually buy we bought it for and there
we are this is the one we bought so you
will be able to access that the ones
that you've bought you can access the
actual course and if you haven't bought
the course you'll only be able to access
that front page with the buyer option
so that's how that all works now let's
go back to our home page
and let's do a little bit more work on
this home page let's load back on our
main page let's view that site again as
the admin and let's edit that on
Elementor so let's just say we were
really focusing on having one course so
let's say we wanted to focus on that
ecommerce course so let's go ahead and
get the link for that ecommerce page so
that was this one here ecommerce course
pro and instead of registering let's go
and make this join and let's link it to
the e-commerce course page that we got
previously and let's call this econ econ
courses there we go let's update that
and so say you only have one course
rather than having a full course grid
with those three columns let's just
focus on the main splash page and then
we can go ahead and they can send them
straight to the course and I think that
might be a better situation for some
people who are just really just focusing
on the one course so let's go ahead and
view that page there we go and then we
could go ahead and join the course there
it would send you to your e-commerce
course page and then you could buy the
course like that so that's another way
of doing it
a little bit cleaner a little bit more
streamlined so if you're just focusing
on one course you could do things like
that otherwise you can use that course
grid that we went through before so
totally up to you I think this website
is working pretty good you've seen how
everything works I think the last thing
we have to cover is how to add video to
your courses so let's try adding some
video to our lessons so let's head back
to our dashboard and learn bressant
courses and let's edit that ecommerce
so we want to edit one of the lessons
that we made so I'm good a lesson one
there and click Edit and load up our
lesson editor so let's try adding a
video to this lesson so there are three
ways I'm going to show you to start with
so there are self-hosted video
and YouTube
and Vimeo
so I'll show you how to do all these
three and later and I'll show you how to
do that Dropbox hosted video as well so
stay tuned for that so let's go through
these so the most straightforward method
itself hosting your video what you do is
go to add media and you can upload files
you can upload a short video to your
website now in my case I'm limited to
128 megabytes maximum upload file so if
you're on shared hosting you'll probably
have some kind of maximum upload limit
so that's really going to restrict the
amount of video you can put onto your
site but it might be ok all you need is
a one or two minute video you could get
away with that but if you're on shared
hosting I really don't recommend hosting
or trying to host long videos on your
website but that's quite straightforward
to do you can pop a video in like that
now the next method is YouTube so it's
same thing go to add media but in this
case we're going to insert it from a URL
so all you have to do is pop in a
youtube link there and it will embed
your YouTube video so you can pop that
YouTube video you'd like that so that
can work reasonably well if especially
if you're using unlisted our YouTube
videos you can pop them in your course I
think this is a good way to embed if
you're working on a free course if
you're working on a paid course and you
really want to secure video now
YouTube's not really going to be that
secure because people can still share
those links and they can still add the
links to playlists and things so it's
not the most secure way but I think for
a free course it's probably a decent
approach to adding video to your course
next up we've got Vimeo it's a really
similar process we just go to add media
and we insert the URL into our
Paige and there we go Vimeo file in
there too so give me a little bit more
clean and if people are viewing this on
a mobile device they're much less likely
to have the Vimeo app then they would
have the YouTube app if they have the
YouTube app and they're viewing on
mobile it's going to take them off your
website and put them onto their YouTube
app so you may actually end up losing
traffic to your a blog or website
through YouTube so I think if you were
trying to promote your page and get free
traffic that can be okay if you're using
YouTube but if you really are wanting to
do a professional course then I probably
wouldn't be using YouTube you'd want to
look at Vimeo you could start with the
free version and then have a look at the
pro version if you need more space and
better privacy so let's go ahead and
click update and have a look at how
these actually look in practice on the
lesson before we do that I'll show you a
plug-in that's really helpful in this
situation it's called RV advanced video
embedder it gives you lots of options
for embedding your videos in the course
so I've already installed and activated
that one you to search for RV advanced
in your search bar instill and active
and then go back to our lesson here and
particularly with YouTube videos this is
really helpful because when you play a
YouTube video what happens at the end of
the video is it's gonna play suggestions
and if you're using this RV plug-in you
can leave it a totally blank you can to
get a much cleaner experience for your
viewers if you're using that Harvey
plug-in also with the Vimeo files it
does clean up the header there makes it
look a little bit more simple it doesn't
get rid of the logo which is a shame if
you get the Vimeo Pro you can actually
get rid of that logo and you can
implement privacy controls which is
probably the best way if you're doing a
paid course you want to be really
professional I would recommend that $7
plus plan you get 250 gigabytes a year
to upload and that you can do a lot of
courses with that
you get power complete control over your
privacy of your courses as well so that
would be a good way to keep things
restricted to paying members now finally
the cool thing that you can do with avi
is actually stream Dropbox files so you
can upload a file onto Dropbox and paste
your link in there by default it's got
that little bit at the end of your link
the DL equals zero we can delete that
off delete the question mine we just
want the mp4 file and we're gonna wrap
that with a shortcode and we can type
Harvey URL equals the URL with quotes
around it and then close that bracket
off now we hit update so that should all
work pretty good in the editor you will
still see this shortcode but in the
actual course if we have a look at that
course we can go down and we can see
enough to reload this one so the Dropbox
video appears there we go a Dropbox now
this looks perfect there's no branding
there's no links to other videos it's
all completely private and it's only
available to whoever you share that link
with it's not completely unlimited on
Dropbox I think the free version you can
share the video up to twenty five
gigabytes birthday but that's still
quite a generous allowance so if you're
just getting set up this might be a good
way to get a few videos onto your
website with good performance and
without costing you anything but I think
later on if you've managed to sell a few
courses on your website probably upgrade
to that Vimeo Plus plan that gives you
full privacy control so that's probably
the best way to get big storage
allowance and basically unlimited file
transfers to your students so that's
incredibly good value so back to our
lesson I think probably the best option
was actually the Dropbox one so I might
actually delete out these other ones
delete YouTube
I do think YouTube is the best if you're
running free courses and you want free
traffic because YouTube it will generate
traffic by itself as well so YouTube is
pretty cool in that regard but if you're
using a paying course definitely you
don't want that YouTube branding and you
don't want visitors leaving the course
and finding other courses related to
your course on YouTube but just it's not
a good way to do things so
I'm just gonna leave that link to
Dropbox on our video there now let's go
ahead and click update so before we wrap
this up there was just one thing I kind
of wanted to work on because on our main
page if we could log in I wasn't
entirely happy with this being our login
actually let's look at the on the
incognito page because that is the view
that new user would get if they tried to
login so you get this page I don't think
the design of this is particularly good
you could style it yourself with CSS but
that's gonna be a lot of work if I go
back home let's actually make a nice
login and registration page using
Elementor so let's get started on that
so back on our dashboard let's go to
pages and let's add a new page and I
want to call this one course login and
we'll go ahead and publish there we go
and that's in Elementor
let's wait for Elementor to load up here
now to add a login to a page and
Elementor if you're using the pro
version you can just use the element
that's built in but if you're using the
free version I'll show you a plug-in
they can actually do it for free so
let's try that let's go to add plugins
and such a one called login with Ajax
and then you install and activate that
one and this is super easy to use it
makes a shortcode that's just called lwa
so all you do is go back to your
Elementor page and pop in a short code
with lwa on it so short code let's drop
that in there
and let's put that el-wafa on them so
that's your shortcode and it will show
you your profile so let's actually let's
do that a little bit more interestingly
so I'm just going to delete out this bit
there now what I'll do is I'll open the
main page and Elementor I'm going to
copy the same heading section and use up
for our login page so let's copy that go
back to our login page let's paste it in
there so we can copy the same style I
will delete the actual middle part out
of this section now we can go ahead and
put our shortcode in here so let's grab
a shortcode widget drag that in this one
is called LW a so let's login with Ajax
we apply and the update so our by
default doesn't look too amazing let's
actually give that a little bit more
style so let's let's change the
background color for a start let's make
a white background on there give it a
bit of transparency I kind of want to
give that some some padding around as
well so let's give it say 50 padding and
I think that'll look better I think
actually when you load the page for real
it is centered so let's have a look what
it looks like for real so this is
basically how would look for a new user
so that definitely looks way cleaner
then what learned for us gives us by
default so that didn't take us too long
to set that up
I might actually put a little bit of
information here to make it a bit more
intuitive and maybe make the background
a bit more closer to white because I
think this looks a little bit washed out
so let's go ahead and do that it's the
back in Elementor let's look at that
section and style and background type so
that was white and I want to make it
more opaque
just a little bit of background popping
throughs okay I think that's better
it's your update and then that's also
open to support maybe you're heading on
here as well making me like that there
we go so let's just call this login yeah
- to access courses update again let's
see what this would look like - eh I use
off the website and who had just found
your website so here we are that does
look pretty clean now I'm pretty happy
with this so I think rather than linking
it to other login page they look like
that I'm much more happy with this when
you use this link and let's go to our
theme customizer and change that button
ok back in our theme customizer I think
we needed to go to header and we were
looking at primary menu there we go the
button links to course profile let's
change that link change it to your
course login the one we just built and
let's go ahead and publish that now that
that's published users will get a much
nicer login screen so let's have a look
at what that actually looks like so now
back on our main page if we go to login
they'll be sent a year so it's a much
nicer setup so let's test logging in
with one of our students so I'll go in
as Lisa Simpson the one I set up earlier
and it will redirect
and here we are we're still in our
profile page so what we want to do is
actually redirect on login we want to
redirect people to the courses when they
login so I'll show you how to do that
and the other thing I don't really like
is you get the admin bar for the user so
I don't really need that for students
you only really need that for yourself
as the admin so I'm gonna show you how
to turn off that admin bar so let's work
on that but first let's do that login
redirection so when students log in we
really want them to send them to the
courses page so let's go and copy that
courses link I've got mine
- courses let's go to dashboard and
let's go to our log in with Ajax so
that's under settings and log in with
Ajax there we go
so generally you want the global login
redirected like that to go to the
courses except if you're an admin I'd
like that to go to WP admin so I'll just
copy the WEP admin link there and then
everyone will go to courses except for
the administrator so I think that's okay
same with logout I think with logout we
just want to send people just to the
home page when people log out so let's
just set that up and click Save Changes
the other thing we wanted to do was turn
off the admin bar for the students so
let's work on that so let's go to
plugins and add new now you can do it
with a very simple plug-in it's just
called a hard admin bar and the one I
checked was this one here with 30,000
active installs there's a few that would
do it all of them are basically the same
it's just a couple lines of code and I'm
just gonna go ahead and install and
activate that one hard admin bar and now
when we log in we shouldn't get the
admin bar for the students if you don't
want to use a plug-in for this you can
actually go to the learn press
documentation and they show you how to
hide the toolbar from all users except
for admin by just editing the functions
PHP file but you need to be using a
child theme to do that and then you need
to add that code to the functions PHP so
for most of you I think a simple plug-in
will be quicker but if you're one of
those people who hates adding extra
plugins then go ahead and use this
method so anyway let's check if
everything's working as intended now so
let's go to login let's log in as
student there and go ahead and login now
this should take us to our course page
and then we don't have any admin bar and
we can also probably access the course
that we've bought earlier so that all
works perfectly I think we're ready to
wrap things up let's go back to our home
page and let's just do a quick summary
of what we've done so we've made up a
nice front page people can go if you
want to focus on a specific course they
can go ahead and click join and for that
case we put the e-commerce pro course on
there you can go ahead and click buy you
go through the checkout you can register
for a new user set up a username and
password and then it takes you through
PayPal you can also set up that course
page which makes that nice little grid
layer that shows all your courses
whether they're paid or free doesn't
matter and also we made this nice login
function for people who bought of course
they come back they say that nice
obvious button they can log back in and
access their courses so all looks pretty
good I'm pretty happy hopefully it's
been useful hopefully you can set up a
nice course and maybe make a few dollars
teaching your knowledge to your students
thanks for watching hope it's been
helpful and I will see you next time