Hi my name is Marty and I'm here with LetsBuildWordPress.com,
and I've put together this step by step tutorial
video to show you the easiest way I know to
build a website.
It's going to be built on the same platform
as used by Forbes, Jay-Z and Katy Perry, and
by far the best thing you don't need to know
any HTML coding or JavaScript or anything
like that to build the website.
Rather than just talking about it I'm going
to show you the website we're going to be
building in this step by step tutorial video.
So this is the exact site I'm going to be
showing you how to build today step by step
without missing anything.
I'm going to show you how to add your own
picture in here to the top, this is known
as the header.
I'm going to show you how to add text and
pictures to pages.
I'm going to show you how to add a page with
a video on it, and the video will be embedded
from YouTube.
So your visitors will be able to come on here
and watch the video, then underneath they'll
be able to click here and leave a reply.
I'm also going to show you how to add a page
with a contact form on it so your visitors
are able to fill out their name, email address
and message.
Then when they click send it will be sent
to your email inbox.
I'm also going to show you how to populate
the sidebar with things like a search bar,
pictures and menus.
I'm going to show you how to do all of this
now.
Okay so I've put together a checklist of things
we're going to need to do to get your website
up and running and looking as good as that
website we just saw.
I'm also going to cover the cost of anything
that isn't free.
So the first thing we need to do to get your
website up and running is get hosting.
Hosting is basically a computer that's left
on 24 hours a day 7 days a week with your
website loaded on to it, this is so people
can gain access to your website even when
your computer is switched off.
Hosting is something you do require if you're
going to run a website and will usually cost
around $7 a month, although I am going to
show you a way to get your first month hosting
for only one penny.
The next thing we'll be doing for your website
is getting a domain name, and a domain name
is basically the title of your website with
www. before it and .com after it.
So for example Google's domain name is www.google.com
that's their domain name and it is something
you do require for your website.
A domain name from where we're going to be
getting it will cost you $12.95, only this
isn't a monthly cost this is a yearly cost.
So you're paying for your hosting once a month
and you'll pay for your domain name once a
year.
The next thing we'll be doing is installing
WordPress, and lucky for us WordPress is free,
so that won't cost anything to install.
We'll then be installing a theme for the website
and the website theme we'll be using is also
free.
Then I'll be showing you how to add pages
to your website and this will include a page
with a picture on it, and a page with a video
on it.
Then I'll be showing you how to change the
header which is the picture at the top, I'll
show you how to change the header image to
be yours.
Then I'll also show you how to edit the footer
text, which is the test along the bottom,
I'll show you how to change that to say whatever
you want.
There's also a few other steps I'll show you
along the way, to get your website running
smoothly.
So all together to get your website up and
running is going to cost less than $13 when
you remember that the first month hosting
is only going to cost one penny.
This is pretty amazing especially when we
asked around and the lowest quote we got to
have a website built for us was $500.
So to be able to do it yourself for $13 is
pretty amazing.
The first thing we need to do then is get
a domain name for the website and get hosting
for the website.
Lucky for us we can get both of these at the
same place which is a website called HostGator.com.
So just open up your internet browser and
go to HostGator.com.
When you get to HostGator you want to click
either in the middle of the screen where it
says view web hosting plans, or up in the
top left where it says web hosting.
Here is where you'll see the different web
hosting plans they offer, and to be honest
the business plan over here at the right probably
has a whole load of added extras you won't
need at this moment in time, so it really
leaves it between the hatchling plan and the
baby plan.
The only two differences between these two
plans is that one gives you one single domain,
and the other one gives you unlimited domains.
So what this means is the hatchling plan will
allow you to have one website, and the baby
plan will allow you to have unlimited websites.
So this could potentially be hundreds or thousands
of websites all on the same hosting plan.
If you're only going to have one website go
ahead and go for the hatchling plan, but if
you do plan to have more than one website
go for the baby plan.
Once you've decided which of these two you
want, it won't make a difference to the tutorial,
once you've chosen which one you want you'll
then want to choose whether you want to pay
for it every month, every six months, a year
or you can even pay for it every three years.
For this tutorial I'm just going to go for
the hatchling plan for the one domain, and
I'm going to go for it monthly.
Once you've chosen what plan you want and
how often you'd like to pay for it, just click
order now.
Once you click order now you'll be brought
here and asked to register the new domain
name for your website.
So just click in this box and type in what
you'd like to use for your new domain.
Make sure that it comes up and says congratulations
it's available, if it comes up and say that
it's not available you will need to choose
something else.
On the right hand side you can choose something
different than .com if you'd like, but we're
going to keep ours as .com.
If you've already registered a domain name
somewhere else you can check here, and then
type the domain name in the box.
But because we're buying ours from HostGator
we'll just leave it checked as register a
new domain.
Underneath that it will give you a few different
options if you'd like to buy a few other domains
as well.
So you can buy the .net or the .org as well
as the .com, but we just want the .com so
we'll leave these boxes unchecked.
Underneath that just make sure that the package
type and billing cycle you selected are correct,
we chose the hatchling plan and monthly so
this is correct.
Underneath that it will ask you to choose
a username and security pin for the website,
and enter your general billing information.
Here's where you can choose to pay by PayPal
or credit card.
Underneath that are a few different options
for things like site security or site backup,
but we don't think these are necessary so
we just uncheck these boxes.
You can have a read through these and if you
think they're necessary, or you think you'd
like them just check the box and add them
to the cart.
Underneath that you'll see a coupon code maybe
entered which is worth 20% off, but as promised
we're going to show you how to get your first
month hosting for only one cent.
So you want to enter the coupon code WORDPRESS1HOST
and then click validate and see the first
month hosting is only one cent.
All together for your hosting and your domain
name to get started, it's going to be $12.96.
Remember this is the only cost of the website,
these are the only things we need to pay for.
So really you're getting your website up and
running for $12.96.
To make it even better it comes with HostGator's
45 day money back guarantee, and access to
their phone, live chat and email support 24
hours a day 7 days a week.
So if there are for whatever reason any problems,
you can just get on to them and they'll get
it sorted for you.
Once you're happy with all this just check
where it says I have read and agree to the
terms and conditions of use, and then click
here where it says create account.
Once you create your account you'll be brought
to a page thanking you for your order, and
then you'll be redirected to the home page.
At this point you can just close this site,
and you'll want to go to your email inbox
and look for your new email from HostGator.
This is a really important email so you'll
want to write down the information that's
on it or print it out if you can.
But for now you just want to click the link
beside where it says your control panel, and
then you want to copy and paste the username
and password in to that cPanel login screen.
So just copy and paste the username and the
password, and then click login.
Once you're logged in you just want to scroll
down to near the bottom where it says software/services
here and then click quick install.
If you bought your domain name from somewhere
else you might want to click Fantastico Deluxe,
but because we bought ours from HostGator
we're going to click quick install.
You then want to click on the left hand side
where it says WordPress and then click on
continue.
Just be sure that your new domain name is
selected in this drop down and this box is
left blank.
Also be sure this box is checked beside where
it says enable auto upgrades.
For admin email just enter the email address
you'd like to have associated with your new
website, and for blog title this is just your
website name.
Don't worry the website name can be changed
later if you want to change it.
For admin user just put the name you'd like
to use for your username, but be warned that
this does appear on a few places on your website.
So normally I just use admin and enter your
first name and your last name, and click install
now.
Normally this only takes a few seconds to
install, once it's done you should see that
it says congratulations your installation
is ready, you can access it now by going here.
Then here is your username and your password.
Now it says it's ready right away but this
isn't always correct, especially when it's
a new hosting account you've setup.
Sometimes it can take anyway up to four hours
to be ready, so what I'm going to do is I'm
going to pause this video and then I'll restart
the video when mine is ready and we can continue
on with the tutorial.
So once you can click here on your screen
and it brings up your website, just restart
the tutorial and I'll show you where to go
from there.
That's me now back and hopefully I've left
it long enough that when I click here my website
will be ready, and I have.
So here's what your website will look like
when you just first install WordPress.
It comes with this basic theme with a few
menus and things at the side, and a sample
page so you can see what it would look like
if you were using this theme.
But we're not going to, we're going to be
using a different theme but to change the
theme we need to login to what's known as
the WordPress dashboard, also known as the
back end of your website.
To get logged in to the back end of your website
or the dashboard, you need to go to the top
bar here where it says your website name .com
or whatever you've used and then /wp-admin
and then enter.
This will bring you to the WordPress login
screen, and this is where you want to copy
and paste the username form the quick install
screen and also the password.
If you've lost access to the quick install
screen don't worry, you'll also be sent the
same information in an email.
Just copy and paste the username and password
in to here.
Once you've done that just click login, so
that's us now logged in to the WordPress dashboard
for the first time, this is where you'll make
any edits or changes to your website.
The first thing I like to do when I get logged
in to the dashboard is change my password,
because it's unlikely that I'll remember this
one.
So to change your password from the dashboard
on the left hand side, just click where it
says users.
Then hover over where it says the username
you've just setup and this button that says
edit will appear, just click there and then
scroll down to the bottom of this screen and
you'll see where it says new password.
Just enter the password you'd like to change
it to, enter it again and click update profile.
So we've now changed our password and to get
back to the screen we were on originally,
you just click up here at the top where it
says dashboard.
So now that we've installed WordPress and
successfully changed our password, I just
want to go back to the checklist and see what
we still need to do.
So get hosting we've done, get a domain name
we've done and we've also now installed WordPress.
So the next thing we need to do is install
a theme, and we do that from the WordPress
dashboard.
From the dashboard on the left hand side you
just want to click where it says appearance.
The theme we're going to be using today is
called 2013 and you'll probably find it's
already installed on your WordPress.
So if you just scroll down until you see where
it says 2013, it's this one here just underneath
it you want to click where it says activate.
This is now the theme activated, but if for
whatever reason you weren't able to find it
in this list, just click at the top where
it says add new.
Then just search using the search bar for
the twenty thirteen theme 
and below mine it stays installed, but if
it's a theme you haven't already got installed
you'll find that it says install now.
So for example I'll install this one just
to show you how it's done, so you click install
now and then click activate here.
But because I was able to activate it on the
other screen I don't need to do it here.
Once you've installed the theme and you've
activated it, you want to visit your site
to see how it looks.
To visit your site from the dashboard from
anywhere on the dashboard, you just hover
over the top where it says your website name
and then click visit site.
As you can see the entire look of your website
is now changed and it's already looking a
whole lot better.
You can click in here and have a look at the
sample page and just get a general feel for
how the theme's going to look.
Now we'll get on to editing it.
I'd just like to mention at this point that
the black bar along the top here, and at the
bottom where it says edit, these are only
visible to yourself when you're logged in
to the back end or the dashboard of your website.
These aren't visible to visitors, so no visitor's
going to be able to come on and edit any of
your pages or posts, or even go in to your
dashboard or anything like that.
They're just going to be able to visit your
pages and the menus and things that you put
on the website.
So once you've had a look around and you like
the theme that we're using today, we'll get
on to adding our first page.
To add a page to your website you'll need
to do this from the dashboard, to get to the
dashboard from your website you just need
to hover over at the top where it says your
website name, and then click where it says
dashboard.
From the dashboard on the left hand side you
just want to click where it says pages, then
at the top add new.
The first page we're going to be putting together
is a standard page with text and a picture
that we'll be using for our home page.
A home page is basically the first page a
visitor will see when they come to your site,
so you want it looking good.
So here at the top you just type in what you
want to call the page, and we're going to
call this one welcome.
Then underneath here in this box here, this
is the main content area.
This is where you put any text or pictures
that you want to appear on the page.
I've already got some text written out to
save some time in the tutorial, so I'm just
going to copy and paste that in there.
Once you've got your text in and your happy
enough with where it is you might want to
put a picture in, so basically what you do
is click where you want the picture to appear.
If it's in the middle of some text just hit
return a couple of times and then click in
the middle, then up here at the top click
add media.
Here you just want to click select files and
then you'll look for the picture on your computer.
Once you've found the picture you're going
to be using, over on the right hand side you
just want to choose the alignment, so if you
want it to be over the left or in the centre
or over to the right.
We want ours to be in the centre and we don't
want it to link to anything.
Here you can choose whether you want it to
be a different size but we're going to keep
ours full size, then when you're happy with
everything just click insert in to page.
Once you're happy with your text and your
pictures, you can just click publish.
Now here you can click where it says view
page and it will bring you to your website
to see your newly published page.
So as you can see our first page is now live
on the website and we can see our text and
our image, if we scroll down to the bottom
it actually gives you the option to leave
a reply.
Things are starting to come together now but
as you can see, we still have our sample page.
So I'm now going to show you how to delete
a page or post from WordPress.
So you need to go to the dashboard so just
hover over your website name at the top and
then click where it says dashboard.
Now on the left hand side just click where
it says pages, hover over the page that you
want to delete and click where it says trash.
Now we're going to do the same thing for the
sample post, so just click on the left hand
side where it says posts and do the same thing.
Hover over the past title and then click trash.
Now if we visit our website we'll see that
the only page there is the one we've just
added.
We don't have it set as our home page just
yet, that's why you're seeing nothing found.
But if we click here where it says welcome,
you'll see the page that we've added.
I'm now going to show you how to make this
your home page, so that none of your visitors
will see where it says nothing found that
won't exist.
So to make a specific page your home page
in WordPress, you just need to go to your
dashboard.
Hover over your website name and click dashboard.
Then on the left hand side you want to hover
over where it says appearance and then click
customize, here on the left hand side at the
bottom you just want to click where it says
static front page.
At the minute you'll see that it's set to
your latest posts, but you want to check where
it says a static page.
Now under where it says front page just select
the page you want to make your home page,
so for us it's welcome.
Now that we've selected it just click save
and publish, now when you close this and visit
your website 
you'll see that it no longer says nothing
found, and it's just straight in to your home
page.
Now that we've got our home page sorted out
and looking good, the next page that we're
going to be adding to our website is a page
with a video on it, and we're going to be
embedding the video from YouTube.
Same as before we're going to be adding a
page, by hovering over our website name at
the top and clicking dashboard.
Then on the left hand side just click where
it says pages, and then up at the top click
add new.
You just want to type in to the top bar whatever
you're going to call the page, because I'm
going to be embedding one of our other videos
teaching people how to make a website, I'm
going to call this video page make a website.
Once you've added a title to your page you
can just click in to the main content area,
and you can type any text you want to appear
on the page before your video.
So I'm just going to type something like here
is a video that will teach you how to make
a website, step by step.
Then once you've added in the text you want
to appear before your video, just hit return
on your keypad and then on the right hand
side you want to click where it says text.
Now you want to go over to YouTube and find
a video you're going to embed, it doesn't
have to be YouTube, most video sharing sites
do have the ability to embed their videos.
But because the most popular one is YouTube
we're going to use YouTube.
So this is the video we're going to embed
on the page, and you just want to click here
under the video where it says share.
Then click in the middle where it says embed
and copy this code, you want to copy this
text.
Then go back to your page and click here just
after this, this represents hitting return
on your keyboard and taking a new paragraph,
so just click after this and then you'll want
to paste in the text you copied from YouTube.
Now when you click here on the right hand
side where it says visual again, you'll see
this sort or orangey red box and this represents
your video.
Once you're happy with your text and your
video just hit publish.
Now if you click up at the top of the page
where it says view page, you'll see that our
video page is now live.
So you can click play here and the video will
start to play.
Underneath you'll also have the ability to
leave a reply, so this is where people can
watch your video and then leave a comment
underneath.
Now that we've got our video page put together
and everything's looking good, I just want
to draw your attention to the top bar on your
internet browser.
If you notice after your domain name, so after
the .co.uk or .com or whatever you have, you'll
probably notice you have this random text
that says page id equals 44 or something like
that.
I'm now going to show you how to change this
to be the name of a page, so instead of this
random text it will say your website name/make-a-website
or whatever you've called your video page.
This helps search engines like Google find
and index your website, and makes it easier
for people to find.
You only need to do this once and it will
work for all pages, so when you do it it's
not like it's just going to work for the video
page, any page you add it will say your website
name forward slash and then the page name.
To do this you just need to go back to the
dashboard, by hovering over your website name
and clicking dashboard.
Then on the left hand side near the bottom,
you just want to hover over where it says
settings and then click where it says permalinks.
You'll probably find that here under common
settings it’s set to default, but you want
to check here where it says post name.
Then scroll down and click save changes, and
now when we visit our website and go to our
video page, you'll see at the top that it
now says make a website instead of the random
coding.
You may have also noticed that up at the top
just before your domain name, there's actually
no www., you might be interested to know that
you actually don't need to type that in to
find any website.
So for example if you're going to YouTube
you don't need to type in www.youtube.com,
you can if you want but you really just need
to type in youtube.com.
That's why there's no www. in front of your
domain name, but I know some people do prefer
it so I'm now going to show you how to add
it to your domain name.
To do this once again we just want to make
our way back to the dashboard, by hovering
over our website name at the top and clicking
dashboard.
Then on the left hand side near the bottom
you want to hover over where it says settings
and then click general.
Here beside where it says WordPress address
URL, you just want to click after the two
forward slashes but before your domain name
and put in www., then same again in the box
beside where it says site address URL.
Just click in between the two forward slashes
and your domain name and type www., once you've
done that just scroll down to the bottom and
click save changes.
Once you do that WordPress will ask you to
sign back in, so just type in your password
that you setup.
Now that we've signed back in if you just
look at the top you'll notice that the www.
is now in front of your domain name.
At this time I'd also just like to remind
you that have you do get logged of your website,
to get back to that login screen you just
need to go to your domain name/wp-admin and
that will bring you back to the login screen.
Now the next thing we're going to be adding
to our website is a contact us page with a
contact form on it, so our visitors are able
to send us a message.
To add a contact form to our WordPress website
we'll need to install plugin because WordPress
does not come with the ability to have a contact
form built in.
Plugins are basically things that you can
download from within WordPress, that add extra
functionality to your website.
The plugin we're going to be downloading is
called contact form 7, and we'll be using
that to add a contact form to our website.
To add a plugin to your site from the dashboard
on the left hand side, just click plugins.
Then you want to click up at the top where
it says add new, and then search for the plugin,
the plugin we're going to be searching for
today is called contact form 7.
So just type that in to the search bar, contact
form 7 and click search plugins.
It should be the top one, as long as it says
contact form 7 click install now.
It will ask if you're sure you want to install
the plugin, click okay.
Once the plugin is successfully installed
click here where it says activate plugin.
Now that this plugin has been activated just
click here on the left hand side, where it
now says contact.
Now one of the cool things about this contact
form plugin is that it comes with a contact
form already setup for us, that will ask for
the users name, email address, the subject
heading of their message and their main message.
So if we just literally copy this, I'll now
show you how to add the contact form to a
page.
So make sure that you've copied here, you've
copied this text.
Now we're going to add the page that the contact
form is going to go on to.
Same as before we're going to click on the
left hand side where it says pages, and then
up at the top where it says add new.
I'm going to call this page contact us, but
obviously you can call yours whatever you
want to.
Once you add a title to the page just click
here in the main content area, and you can
type any text you want to appear before your
contact form.
So I'm just going to type something like if
you have any questions or need to contact
us for any reason, just fill out the form
below and we will get back to you as soon
as possible.
Once you've added any text you want to appear
before your form, just hit return on your
keyboard and then you can paste in the text
we copied from the plugin.
Once you've added your text and pasted in
the text from the contact form plugin, just
over on the right hand side click publish.
Now when we visit our page you'll see that
the plugin has created a contact form for
us, so this is where your visitor will fill
out their name, their email address, their
subject of the message and their main message.
Then when they click send it will be sent
straight to your email inbox, so the email
address you registered when setting up your
website.
Now you might notice that once again underneath
the same as every page so far, there's this
space here to leave a reply for your visitors
to comment.
Obviously this doesn't really make much sense
to be at the bottom of a contact form, so
I'm now going to show you how to remove this
option to leave a reply from a single page.
So to do this we just need to head to our
dashboard, by hovering over our website title
at the top and clicking dashboard.
Then on the left hand side click pages.
Now we're wanting to remove the ability to
leave comments from our contact us page, so
we're going to hover over the contact us page
and click edit.
Now up at the top on the right hand side where
it says screen options, just click here then
you want to check the box beside where it
says discussion.
Now if you scroll down to the bottom of this
page you'll see that these two boxes have
appeared and they're both checked.
Uncheck both of these and then you can click
update.
Now when we view the page and scroll down
to the bottom we'll notice that there's no
longer the ability to leave a reply.
I'm now going to do the same thing for my
home page because I don't want people to be
able to leave a reply there either.
I'm going to show you a different way to do
this, so if you click on to the page that
you're wanting to remove the comments from,
you can actually just click up here at the
top bar where it says edit page.
Then the same as before just click up in the
top right where it says screen options, make
sure that the box beside discussion is checked
then scroll down to the bottom and underneath
just uncheck these two boxes, and then update
the page.
Then when we view the page you'll see the
ability to leave a reply has now gone.
Now that we've removed the ability to leave
a reply from both our home page and our contact
us page, I now want to draw your attention
to this menu.
As you can see our pages are here but in no
particular order.
If you want to change the order of these so
for example you want your home page to be
at the start, and the contact us page to be
at the end, you'll need to create a custom
menu.
I'm now going to show you how to create a
custom menu for your website.
To do this we need to go back to our dashboard,
by hovering over our website name at the top
and clicking dashboard.
Then on the left hand side you want to click
where it says appearance, then below that
still on the left you want to click menus.
So for this example we're just going to be
creating a new menu, so click up at the top
here where it says create a new menu.
It's going to ask you to give your menu a
name, for this I'm just going to call mine
main menu.
Once you've gave your menu a name, click over
here to the right where it says create menu.
Once you've done that over here to the left
just check the boxes beside each of the pages
you want to add to your new menu.
We want to add all of them so just check all
of them.
Once you've done that click here where it
says add to menu, now you want to click and
drag these in to the position you want them
to appear on your menu.
From to bottom is left to right, so we want
our welcome page to be at the start, and our
contact us page to be at the end.
Just make sure when you're dragging these
in to position that they don't end up out
here and it says sub item, make sure they
they're fully in to the left and it doesn't
say anything besides the page name.
Once you're happy with the order of your menu
just make sure you check here where it says
theme locations navigation menu, once you've
done that click save menu.
Now when we visit our website we'll see that
our menu is now in the right order.
So now that we've added our own custom menu
to the website, I'm now going to show you
how to add content in to the sidebar area
here to the right, and we're going to do this
by using what are known as widgets.
At the bottom here where the menus and search
bar and things at the bottom are, these are
also widgets and I'm going to show you how
to remove these.
In the website we were looking at, at the
start of the video it didn't have anything
in here.
You can put your own things in and I'm going
to show you how to in a minute, but in this
tutorial we're going to be removing these
ones an adding some in to this side here.
To edit the widgets we just need to go back
to our dashboard by hovering over our website
name at the top and clicking dashboard.
Then on the left hand side just click where
it says appearance, then still on the left
just under that click where it says widgets.
So widgets are basically different things
like custom menus or text that you can add
to your sidebar or along the bottom of your
website.
I've opened up the website in a new window
just so I can show you what I'm talking about.
So here it says main widget area appears in
the footer section of the site, everything
that's in here is along here, this is the
bottom of the website and as you can see there's
a search bar and here it says meta.
Then in this widget area you'll see the search
bar here and meta.
So you just click these to expand them and
you can change things, or else you can click
and drag them in to a different order the
same as your menu.
To get rid of something you click and drag
it out all together, so we're going to be
getting rid of everything in the main widget
area, because we don't want anything to appear
in here.
We're just going to click and drag everything
out of here, and now when we go to our website
and refresh the page, you'll see that there's
now nothing at the bottom.
Now we're going to add a few things to our
sidebar, so if you just click here where it
says secondary widget area that will expand
this box.
Now what we're going to do is click and drag
a few different things in here so they appear
in the sidebar.
The first thing I want to add to my sidebar
is a search box, so when a visitor comes to
my site they're able to type in a keyword
and search for what they're looking for.
To do this I'm just going to click and drag
the search widget in to the second widget
area.
It then asks you to give it a title but you
don't have to, for this I'm going to call
it search our site.
Once you've gave it a title just click save
and then if we head back over to our site,
we'll see that the search bar is now on the
right hand side.
So visitors will be able to come here and
type in something in to this box and search
your website for it.
Now we're going to add a few others things
so we're going to head back over to the widget
area.
You can click this to close it down to make
it easier to drag other things in to it, the
next thing we're going to add to our widget
area our sidebar, is some text about our website.
So just click and drag the text widget over
to the second widget area, and drop it in
under the search bar.
We'll give it a title again just like before,
this I'm going to call interesting stuff about
our site.
Then just click in the main content area below
it and type any text you want to appear in
your sidebar, I'm just going to write this
is a widget text box where you can write some
interesting things about your site or just
some text.
Once you're happy with what you've written,
underneath just click where it says save.
Now if we visit our website and we refresh
the page, we'll see that the text has now
appeared under the search bar on the right
hand side.
We're now going to add a menu to our sidebar,
to do this we just go back to the widget area
and look for the widget that's called custom
menu.
So we can just click here to close this one
down, and make it easier to drag it in.
So just drag the custom menu over to the secondary
widget area and drop it in under the text
widget.
It asks you if you've like to give it a title
once again, and I'm going to call this main
menu.
If you have more than one menu created you
can select it here in the drop down, but because
we only have one created it's the only one
available.
Once you've gave it a title and selected the
menu you can just click save.
Now if we head back over to our site and refresh
the page, we'll see that underneath the text
there's our menu.
I just want to show you here that if we click
on a different page they also appear on there.
So the sidebar is visible from all pages,
not just the welcome page.
Now I'd agree with you if you said that the
sidebar looked a little bit boring, so I'm
now going to show you two different ways to
add a picture to your sidebar, or to any widget
area.
The first way of doing this involves adding
a picture to a page, and then using the page
to change the picture in to HTML, then we
add the HTML coding in to a text widget.
To do this we need to go to our dashboard
by hovering over our website name at the top
and clicking dashboard.
Then on the left hand side you just want to
click pages, and then add new.
So you don't need to worry about adding a
title to this page, we're going to be deleting
it in a minute.
Just click in the main content area and then
click here where it says add media.
Just click upload files and then select files,
find the image you want to use from your computer
and click open.
Then on the right hand side you just want
to make sure alignment is centre and link
to none, keep the size set to full size because
any widget area will automatically resize
the image so it looks good.
Once you have everything set just click insert
in to page, then on the right hand side at
the top just click text.
Now you want to copy this code and then we
can delete this page by clicking move to trash.
Now we want to go to the widget area by clicking
appearance over on the left hand side, and
then below that clicking widgets.
Now click to expand the secondary widget area
because this is our sidebar.
Now you want to find the text widget here
and drag it to wherever you want the image
to appear in your sidebar.
I want mine to appear in between the search
bar and the text about our site, so that's
where I'm going to drop it.
You can add a title in but for this example
I'm not going to.
Just click in the main content area and then
paste in the code that we copied from the
page that's now been deleted.
Once you've pasted in the HTML coding just
click save.
If we go to our website we'll see the image
is now in our sidebar, and even though the
image was a lot bigger than this it has been
shrunk down to fit in to this sidebar.
Now that we have that looking good, I'm going
to show you a second and much easier way of
adding images to your widget areas.
So for this method we're going to need to
install a plugin, so same as before just hover
over our website name and go to the dashboard.
Then on the left hand side just click where
it says plugins, then up at the top add new.
The plugin we're searching for this time is
called TinyMCE Widget, so just type that in
to the search bar, TinyMCE which is all one
word and then widget.
Once you've typed that in just click search
plugins and it should be the top one called
Black Studio TinyMCE Widget.
Once you find that just click here where it
says install now, it will come up and ask
you are you sure, just click okay.
Once it's successfully installed just click
here where it says activated plugin.
Now if we click here on the left where it
says appearance, and then underneath where
it says widgets you'll now see that this new
widget has appeared called Black Studio TinyMCE.
This is the widget we're going to be using
to add images to our widget areas, so to do
this we just need to click and expand the
widget area that we're going to be using.
For us it's the secondary widget area because
we're wanting to add the image to our sidebar.
Now just click and drag the Black Studio to
wherever you want the image to appear in your
widget area.
I want mine to appear down at the bottom,
so that's where I'm going to drop it.
Now the Black Studio widget looks very similar
to the main content area when you're adding
a page, so you can add basically anything
you can add to your page you can now add to
your widgets.
You can give it a title if you want but once
again for this example I'm not going to.
Just click in the main content area but instead
of pasting in the HTML coding, this time we
just click add media.
Then just choose the image you want to add
or search for it on your computer by clicking
upload files, then on the right hand side
just make sure alignment is centre, link to
none and size full size.
Once you've got all that sorted just click
insert in to post, and then we can click save
here at the bottom.
Now when we visit our website we'll see that
the image should now be where we put it in
the widget area, so here you can see it's
now at the bottom of the menu where I put
it in the widget area.
That's the two different ways you can use
to add images to your sidebar in WordPress.
Now I'm going to show you how to change the
website name at the top if you want, but if
you don't want to change the name you'll at
least want to change this line along the bottom,
where it says just another WordPress site.
This is known as your tagline and I'm now
going to show you how to change the title
and tagline on your website.
To do this we just need to go back to the
dashboard by hovering over our website name
at the top and clicking dashboard.
Then on the left hand side you want to click
where it says appearance, then underneath
that still on the left hand side customize.
Once you click customize it's going to bring
you here, and you just want to click where
it says site title and tagline.
That's going to expand this box and here is
your site title and your tagline.
This is your site title here and this is your
tagline.
You can literally just delete this text and
add in whatever you want, I'm just going to
type in something cool about this site.
So as you can see it has now appeared here,
and if we click save and publish that will
be it now changed.
You can also delete this and just have it
be just your website name, but we do want
the tagline so we'll bring that back and click
save and publish.
Now we can close this and when we visit our
website we'll see that the changes have been
updated and our tagline has now changed.
Now that we've changed our tagline, I'd just
like to go back to our checklist and see what
we still need to do.
So we've now installed our theme so that's
done, we've added pages so we added a page
with a picture on it, we added a page with
a video embedded from YouTube on it, and we
also added a contact us page with a contact
form on it so that's now done as well.
The last two things we need to do are change
the header which is this picture here behind
your website name and tagline, and then edit
the footer text which is this text here at
the bottom that says proudly powered by WordPress.
To change the header we need to go to our
dashboard so the same as always, just hover
over the website name at the top and click
dashboard.
Then on the left hand side just click where
it says appearance, and then under that still
on the left click header.
The only thing you really need to do to make
sure that your image is going to look good
once it's been uploaded to your website, is
ensure that it's exactly 1,600 pixels wide
and 230 pixels tall.
This will make sure that WordPress uses your
image as is and make it look as good on your
website as it does on your computer.
The first thing you'll need to decide is whether
or not you want your website name and tagline
to appear on top of the image, and if you
do what colour do you want it to be.
So to change the colour of the text you just
need to scroll down to the bottom and click
where it says select colour.
You can then just move this circle around
to choose what colour you'd like it to be,
and if you scroll up to the top you can check
how it looks.
Once you're happy with the change of colour
just scroll back down to the bottom and click
save changes.
Now when we visit our site we'll see that
the colour of the text has now changed.
For this example we don't actually want any
text to be on our header image, and we're
going to change this picture.
To do that we just need to go back to our
dashboard by hovering over our website name
at the top and clicking dashboard.
Then same as before on the left hand side
just click appearance, and then under that
click header.
To remove the text from your header image
you just need to scroll back down to the bottom,
and uncheck the box beside where it says show
header text with your image.
Now if we scroll up we'll see that the text
is completely gone and we just need to scroll
down to the bottom to save the changes.
Now to change the image from this to something
else we just need to click here where it says
choose file, then just look for the image
on your computer, once you've found it click
open.
Then on the right hand side just click the
button that says upload.
You don't need to save it once you've uploaded
the picture you can just click here where
it says visit your site to see how it looks.
So as you can see our header image has now
been updated and the whole site is now looking
a lot more custom.
Now that we've updated our header image, the
only thing that we need to do now is edit
the footer text, so we can change this now
to done, and I'm now going to show you how
to change the footer text which is at the
bottom where it says proudly powered by WordPress.
We're now going to change that and to do this,
we just need to go to our dashboard so hover
over our website name at the top and click
dashboard.
Then on the left hand side you just want to
click where it says appearance, and then under
that click editor.
Then on the right hand side you'll want to
scroll down and click where it says footer.
Now this text here is what makes up this on
our website, so here where it says proudly
powered by WordPress, you can see that it
says proudly powered by here and WordPress
here.
Now you do want to be really careful when
you're editing this text, because you do run
the risk of potentially corrupting your website.
What you want to do to edit the footer text
here, is delete between here and here.
So from where it says question mark PHP do
action you want to delete this, and you want
to delete right down until you see forward
slash a and then this.
So you want to delete all of this and then
hit return on your keyboard.
Now whatever you type in here is going to
appear in your footer text, so I'm just going
to type in Let's Build WordPress Together.
Once you've written the text just hit return
again and then you can click update file.
Now if we go back to our website and scroll
down, we'll see that the footer text has now
been changed and it now says Let's Build WordPress
Together or whatever you've typed in.
But now that we've edited our footer text,
if we go back to our check list we'll see
that we have now finished, we have no successfully
built our very own website using WordPress.
We've changed the header here, we've changed
the footer at the bottom, we've added a page
with some text and a picture on it, we've
added our video page with our video embedded
from YouTube, we've added our contact us page
with a contact form on it so our visitors
can send us a message, and we've also populated
the sidebar with different things like a search
bar and menu.
I'd now just like to say thank you for watching
our step by step website tutorial, if you
have found it helpful please like the video
and share it with your friends.
Remember to visit www.letsbuildwordpress.com
for more tutorial videos like this one.
Once again my name is Marty and thanks for
watching.
