How to Build A Website with WordPress – Super Easy Tutorial!

How to Build A Website with WordPress – Super Easy Tutorial!


Hi my name is Marty from LetsBuildWordPress.com,
and today I’m going to show you how to build a $1000 website step by step without skipping
anything. It’s going to be built on the same platform as used by Jay-Z, Katy Perry and
Forbes, so you know this is going to be a professional website. Rather than just talking
about it I’m going to show you. This is the exact website we’re going to be building today
step by step. I’m going to show you how to add in your own logo and tagline, I’m going
to show you how to change the images and text, I’m going to show you how to add in your own
menu and these little icons that link to your various social channels. I’m going to show
you how to add these buttons which are known as call to action buttons, which whenever
a visitor clicks them it brings them to your various pages. I’m going to show you how to
add in standard pages with text and images, I’m going to show you how to add a page with
a video on it with a video embedded from YouTube, where someone is able to come and watch the
video then leave a reply underneath. I’m also going to show you how to add a contact us
page with a contact form on it, so someone is able to fill out their name, email address,
subject and message, when they click send it’s going to be sent straight to your email
inbox. I’m also going to show you how to populate the sidebar with different things such as
calendars, images and text. These images I’m going to show you how to link them to different
website which open up in a new window. Another cool thing about this website is that it’s
going to resize itself depending on what it’s viewed on, this is known as a fully responsive
website. It basically means if someone comes on and they’re viewing your website on their
mobile phone or tablet, it’s going to resize everything to look as good as it can. I’m
going to show you how to do all of this step by step now.
Okay so I’ve put together a checklist of things we’re going to do today, 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’ll need to do to get your website
up and running is set up 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 you around $8 a month.
Only I am going to show you a way that will get you your first month of hosting for only
one penny. The next thing we’ll need to do is get a domain name for our website. A domain
name is basically the title of our website with www. before it and .com after it. So
for example Google’s domain name is www.google.com. Once again a domain name is something you
do require if you’re going to run a website, and will usually cost you around $13, only
you don’t pay this once a month like your hosting you pay for this once a year. So your
hosting you’ll pay once a month and your domain name you’ll pay for once a year. The next
thing we’ll be doing is installing WordPress, lucky for us WordPress is free, so that won’t
cost anything to install. Then we’re going to be installing a theme for our website,
the theme we’ll be using today is also free. Then we’re going to add some pages to our
website and change some of the websites settings, this is to get everything looking and acting
just the way it’s supposed to. So all together to get this website up and running when you
remember that I’m going to get you your first month hosting for only one penny, is just
over $13. Which I think personally is pretty amazing, especially when we asked around and
the lowest quote we got for a website to be built for us was $500. To be able to get this
website up and running yourself for just over $13 is pretty amazing.
So the first things we need to do to get our website up and running is setup hosting for
the website, and get a domain name for the website. Lucky for us we can get both of these
at the same place, which is a website called HostGator.com. If you just want to open up
your internet browser and go to www.hostgator.com, or alternatively you can just click the link
below this video. From the home page you either just want to click in the middle where it
says view web hosting plans, or else up on the top left where it says web hosting. Either
way it’s going to bring you to this page where it shows you the different hosting plans they
have available. To be totally honest with you the business plan comes with a whole load
of added extras you probably won’t require at this moment in time, so that just really
leaves you between the hatchling plan or the baby plan. The only difference between these
two plans is that one allows you to have a single domain, and the other allows you to
have unlimited domains. What this means is that the hatchling plan will allow you to
have one single website loaded on to the hosting, or the baby plan will allow you to have as
many websites as you’d like. If you’re only going to have one website I’d recommend going
with the hatchling plan, but if you’re going to have more than one website I’d go with
the baby plan. It’s easy enough to upgrade from one to the other, so if you just go with
the hatchling plan for now and have one website, and then you do decide to have more websites
in the future you can just upgrade to the baby plan. For this tutorial I’m just going
to go with the hatchling plan and once you’ve decided on the plan you’re going with, you’ll
just want to choose how often you’d like to pay for it using this drop down. You can pay
for it every month, every six months, every year or you can even pay for it every three
years. You do save a bit more money the longer you buy at one time, so it does make more
sense to do it that way. Because I’m just purchasing this for the tutorial I’m just
going to go with monthly. Once you’ve decided on the plan you’re going to go with and how
often you’d like to pay for it, just click order now. Once you do it will bring you here
and this is where we’re going to register the new domain name for our website. So just
click here and type in the name you’d like to register as your new domain, and make sure
that it comes up and says that it’s available. It it comes up and says it’s not available
unfortunately you’re going to need to choose something else. Then on the right hand side
you can choose if you’d like it to be something other than .com, so you can have it be yourwebsite.net
or .org, but for this example I’m leaving it as .com. You can check here if you bought
a domain name from somewhere else that you’d like to register with this website, but because
I’m registering a new one with HostGator I’ll leave this one checked. Underneath that it
gives you the option to buy other domain extensions as well as the one you’ve chosen here, so
you can buy yourwebsite.com as well as .net or .org, but because I just want the .com
I’m going to leave these boxes unchecked. Underneath that you just want to make sure
that your package type and billing cycle are correct, I chose the hatchling plan and one
month billing cycles so these are correct. Underneath that it’s going to ask you to choose
a username and security pin, and then fill out your general billing information. Then
here you can choose if you’d like to pay for it by credit card or PayPal. Under that it
will give you the option to purchase further hosting add-ons such as domain privacy or
site backup, personally I don’t think any of these are necessary so I’m just going to
uncheck the boxes. Although you can have a read through them and if you do think you
want any of them, just check these boxes and add them to the cart. Underneath that you
may see a coupon code already entered here worth 20% off your first month, although as
promised I’m going to show you how to get your first month for only one penny. So if
there is a coupon code entered in here you just want to delete it, and you want to type
in WORDPRESS1HOST. Now if you click validate you’ll see that you’re getting your first
month hosting for only one penny. Then you just want to review your order to make sure
everything is correct, at this time I’d like to point out you do get access to HostGator’s
24/7 phone, live chat and email support for free. You also get a 45 day money back guarantee,
this means if you do change your mind for whatever reason and you don’t want the website,
you can contact HostGator through their 24/7 live chat and ask for a refund. I’d also just
like to point out that here you can see we’re getting our website up and running for $12.96
which is pretty amazing. Once you’re happy with everything just click here where it says
I have read and agree to the terms and conditions of use, and then click create account. I’m
going to pause the video just while I fill out my information above, and then I’ll restart
the video when I click 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 HostGator and you want to go to your email inbox and
look for your email from HostGator. This is a really important email so you want to write
down the information in it or print it out if you can. For now you just want to click
the link beside where it says your control panel, and then you’ll want to copy and paste
in the username and password that’s also in the email. So just copy and paste the username
and password from this email in to the cPanel login screen that you just opened. Once you
do that you can just click login and this will be you logging in to HostGator for the
first time. Once you’re logged in you just want to scroll down to near the bottom to
where it says software/services. Then you want to click where it says quick install,
if you bought your domain name from somewhere else other than HostGator you might want to
click Fantastico Deluxe, but because we bought ours from HostGator I’m going to click quick
install. Then you just want to click on the left where it says WordPress and then click
on continue. Just make sure that your new domain name that you’ve purchased is selected
in this drop down, and that this box is left blank. Here beside where it says enable auto
upgrade make sure the box is checked. For admin email just literally enter in the email
address you’d like to have registered with your new website, and for blog title this
is your website name. Don’t worry the blog title or website name can be changed later
if needs be. For admin user this is the username you’d like to use when logging in to your
WordPress website, just be warned what you put in here cannot be changed. It also appears
in a few places on the website, so I’m just going to put Admin, then just enter your first
name and your last name and click install now. It will normally only take a minute or
two to install if even. Once it’s done it should come up and say congratulations your
installation is ready, you can access it now by going here. It will also have your username
and your password so be sure to write these down. It says that you can access it by going
here but this isn’t always the case right away, especially when you’re just setup a
new hosting account. It can actually take anywhere up to four hours for your website
to be fully configured. So if you want to leave it a while and wait until you can click
here and your website appears, and then restart this video. I’m going to pause it now while
I’m waiting on mine and then we’ll restart the video together.
So that’s me now back and hopefully I’ve left it long enough, so when I click here it’s
going to bring me to my new website, and I have. So this is what it looks like when you
first install WordPress, this is the pre-installed theme that comes with it. It’s just a sort
of example so you can click in here and see what an example post would look like and things
like that if you were deciding to use this theme. We’re not going to, we’re going to
be changing this theme and making it look a lot better than this. The first thing we’ll
need to do is login to the back end of WordPress also known as the dashboard. This is we’re
going to be able to add pages and make any changes to our new website. So to get logged
in to the dashboard or the back end of our new website, we just need to go to our website
name .com or .co.uk or whatever you’ve used, then put /wp-admin. That’s going to bring
us to the WordPress login screen, and you just want to copy your username and password
from the quick install page and paste it in there. If for whatever reason you’ve lost
access to this page, the quick install page, you will be able to get your username and
password from an email that will have been sent to you. Once you’ve copied and pasted
your username and password in here, just click log in. This is now you logged in to the WordPress
dashboard for the first time, and as I say this is where you’ll be able to add any pages
or make any changes to your new 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’m ever going
to remember this one. So to change your password from the dashboard on the left hand side,
you just want to click where it says users and then if you hover over the username that
you’ve just setup you’ll see that it now says edit. Just click edit and then if you scroll
down to the bottom you’ll see here it asks you to enter your new password. So just enter
your new password in here and then repeat it again here and click update profile. Now
it says profile updated and your password is now changed. To get back to where we were
before this just click on the top left where it says dashboard. Now that we’ve updated
our password, the next thing we’re going to do is install a theme.
To install a theme on WordPress you just want to click on the left where it says appearance,
and then up at the top where it says add new. The theme we’re going to be searching for
today is called customizr, so if you just want to type that in to this search bar it’s
spelt customizr. Once you type that in just click search and it should be the only theme
that comes up. Underneath it you just want to click install now. WordPress is going to
install it automatically and as you can see it’s already successfully installed. Once
it’s installed you just want to click underneath where it says activate. Now if we visit the
site you’ll see the change in the theme has now changed the look of the entire website,
and it’s now already looking a whole lot better. Obviously we’re going to make it look even
better still but it’s a good start. To get back to the dashboard from your website you
just want to hover over your website name at the top and click dashboard. Now that we’ve
installed and activated our new theme, you might have noticed this new button at the
top up here that says customize it. If you just want to click there we’re now going to
upload our logo and change a few of the theme settings. If you just want to click at the
top where it says skin first, this will expand this box and allow you to change the main
theme colour. At the minute it’s set to blue but using this drop down you can change it
to any of these colours. The example site you saw at the start of this video was set
to black, so I’m going to choose black. Once you change the colour you’ll see that the
website name and tag line, and a few other bits and pieces on the site have also change
colour. Once you’ve chosen the colour you’d like if you just click where it says skin,
this will close the box again. Now we’re going to upload our logo and to do this, you just
want to click underneath where it says logo and favicon. Then if you click upload you
can search for the image you’d like to use as your logo. To make sure it looks as good
as possible, you just want to make sure that the maximum width is 250 pixels, and the maximum
height is 100 pixels. Obviously you don’t need to have a logo if you’re just happy enough
to leave it as your website name here, or maybe you don’t have a logo yet you can just
skip this step. But if you do want to upload your logo just click here where it says upload.
Then search for the image you’d like to use and click open. Now if you leave it a couple
of seconds you should see that it now has your logo instead of your website title. Now
if you just click where it says logo and favicon again, this will close that box down. Now
if you click underneath and expand this box, this will let you change your website title
if you haven’t uploaded a logo, and change your tag line which is this sentence over
here. Because I’ve uploaded a logo I’m just going to leave this box alone, but I’m going
to change the tag line. I’m just going to type in learning how to build WordPress websites,
step by step together. Once you’ve typed in your tag line and changed your site title
if you need to, just click here again to close the box. Then just click underneath where
it says front page and you want to change this bottom drop down, from demo slider to
no slider. Then just click front page again to close the box. Then click comments to expand
the box, and you’ll want to check this box besides where it says enable comments on pages,
now you can just close this one down. If you click here where it says social links this
is where you can enter in the URLs of all your different social channels, and the icons
will show up here. I’m now just going to pause the video for a minute while I fill out a
few of my social channel URLs, and then I’ll restart the video. This is just to save some
time in the tutorial. So that’s me now back and as you can see now that I’ve put in my
social channel URLs, these little icons have appeared. If any of our visitors click on
one of these it will bring them to the social channel. So this one will bring you to YouTube,
this one will be LinkedIn, Google Plus, Facebook, and there’s also things like Instagram and
Pinterest and a few other things I don’t have myself, I just filled out the ones that I
use. Once you’ve filled out your social channel URLs, if you just want to scroll back up and
click here where it says social links, this will close that box down again. Now there’s
nothing else we need to change here at the minute, so if you just want to click up at
the top where it says save and publish, this will save all the changes. Now just click
here where it says close and this will bring us back to the dashboard. Then if you click
up on the top left where it says dashboard, this will bring you right back to the home
screen. Now if you just hover over your website name at the top and click visit site, we’ll
be able to have a look at what our website looks like so far. As you can see it’s already
looking a good bit better, and a bit closer to the end result we’re going for. We have
our social media icons in here, and they also appear down here. We have our logo put in
and our tag line looking good. At this moment in time I’d just like to open up our checklist
and see what we’ve done and see what we still need to do. So we’ve setup our hosting, we’ve
got our domain name, we’ve now installed WordPress and installed our theme. We’ve changed some
of the theme settings but we will need to come back to this and change a few more, but
for now we’re going to add some pages. To add pages to our website we need to do
this from the dashboard, to get back to our dashboard from our site we just hover over
our website name at the top and click dashboard. Now to add pages to your website you just
need to click on the left hand side where it says pages, then up at the top where it
says add new. That’s going to bring us to the main page editor of WordPress, as you
can see with these options and things here it’s quite similar to something like Microsoft
Word. You just want to type the title of your page in here, and then your main content in
here and click publish. I’m going to call this page why use HostGator, you can obviously
call your page something different, and then here in the main content area I’m just going
to paste some text that I’ve already written up. Once you’ve typed in your text, say for
example you want to insert an image in here, just click up at the top here where it says
add media and then upload files. Click here where it says select files and then look for
the image you’re going to use on your computer, then click open and on the right hand side
you can choose the alignment of your image, I’m going to set mine to left. Then you can
also choose if you’d like to link it to something, I’m not going to I’m just going to set this
to none, and then the size of my image I’m going to leave as full size. Once you’re happy
with everything just click insert in to page and this will add the picture in to your new
page. Once you’re happy with all your text and your image, just click on the right hand
side here where it says publish. Now if we view the page by clicking here up at the top,
we can see that our new page is now live with our picture and there’s this option at the
bottom where people can leave a comment. I’d just like to point out that this edit button
here and the black bar along the time cannot be seen by any visitors on your website, just
yourself when you’re logged in. We’re now going to add another page to our
website and this page is going to have a video on it, which we’ll embed from YouTube. To
add another page to our website we need to go back to the dashboard, by hovering over
our website name at the top and clicking dashboard. Then same as last time on the left hand side
you just want to click pages and then up at the top click add new. Then just type whatever
you’re going to call your video page in to the top bar, I’m going to call mine build
a website. Once you’ve added a title to your page just click in the main content area,
and this is where you can type anything you want to appear before your video. So I’m just
going to type in learn how to build a website, step by step without missing anything. Once
you’ve typed in any writing you want to appear before your video, just hit return on your
keypad and then you want to open up YouTube in a new window. We’re using YouTube for this
example, but most video sharing sites do have the ability to embed their videos on to your
website. Once you’ve found the video you’re going to embed, you just want to scroll down
and underneath click where it says share. Then just copy this coding and go back to
your page. Now if you click here at the top right where it says text, this will change
your page now to HTML which is the same coding that makes up this. So if you just copy that
coding and paste it in after this here, this represents hitting return on your keyboard,
just paste it in after that coding and then click up at the top right here where it says
visual. This will change you back to the original view. Now you can see this pinky orange box
has appeared, and this represents the video on your page. Once you’re happy with the text
and the video, just click here to the right where it says publish. Now if we click here
where it says view page at the top we can see that our new page is now live, so here’s
our text and our video, and if we click play on the video it will start to play. Then underneath
there’s the ability to leave a comment. Now that our video page is looking good, the
next thing we’re going to do is add a page which has a contact form on it. Which is where
the visitor will be able to fill out their name and email address and their message,
then when they click send it will send straight to your email inbox. As WordPress doesn’t
come with the ability to add a contact form built in, we’re going to have to install what’s
known as a plugin. Plugins are basically just extra functionality that you can download
from WordPress that adds extra things to your website. Things like contact forms, or picture
sliders or things like that, but for now we’re just going to be installing a contact form.
To install a plugin we just need to go to our dashboard by hovering over our website
name at the top and then clicking dashboard. Then on the left hand side you just want to
click where it says plugins, and then up at the top click add new. Now the plugin we’re
going to be searching for today is called contact form 7, so if you just want to type
that in to the box and click search. So contact form 7 and then click search plugins. It should
be the top one, contact form 7. Once you find it just click here where it says install now,
and then it’s going to ask you are you sure, you just want to click okay. WordPress is
going to install it automatically and almost instantly, as you can see here it’s already
successfully installed. Once the plugin is successfully installed you just want to click
here where it says activate plugin. Once the plugin has been activated you’ll see here
on the left hand side, we know have the word contact appear. You just want to click here.
One cool thing I love about the contact form 7 plugin is that it comes with the premade
contact form that you can use. So all you need to do to add this contact form to a page,
is copy this text which is known as the shortcode and then paste it in to a page. Then WordPress
is going to turn this shortcode in to a contact form. The premade contact form that comes
with this plugin will ask your visitor for their name, their email address, the subject
of the message and then their message. It’s also going to have a send button. So all you
need to do to add this to a page, is copy the shortcode and then add your page. So on
the left hand side just click pages and then up at the top click add new. You can obviously
call your page whatever you want to, but I’m going to call mine contact us. Then in the
main content area you can just type any text you want to appear before your contact form.
So for this I’m just going to write, if you have any questions about websites or even
if you just want to say hello – you can fill out the form below and we will get back to
you. So once you’ve added any text you want to appear before your contact form, you can
just hit return on your keyboard and then you want to paste in the shortcode. You don’t
need to change it to text on the right hand side this time like a video, you can just
leave it on visual. So once you’ve gave your page a name, added any text you want to appear
before your form, and then you’ve pasted in your shortcode, you just want to click publish
here on the right hand side and this will publish your page. Now if we click here where
it says view page, we’ll see that our new page is live and here’s our contact form.
So your visitor just fills out their name, their email address, the subject of their
message and their message and then click send. Then you’ll be sent this message as an email
in your email inbox. But if we scroll down we’ll see that WordPress once again has added
in this leave a comment section underneath, normally this is a good thing with our pages
because we want people to leave comments and tell us how good a job we’re doing. But when
it comes to pages like contact us page and things like that, sometimes it just doesn’t
make sense to have this section underneath. So now I’m going to show you how you can remove
this from a single page. So we do this from our dashboard, we hover over our website name
at the top and click dashboard. Then you just click pages on the left hand side, and then
hover over the page name of the page you’d like to remove the comments from. So for us
it’s the contact us page, you just hover over it here and then click where it says edit.
Now in the top right hand side of the screen if you just click here where it says screen
options, then you want to check this box beside where it says discussion. Now if you scroll
down to underneath the main content area, underneath where it now says discussion you’ll
see there there’s these two boxes checked, where it says allow comments and allow trackbacks
and pingbacks on this page. Just uncheck both of these boxes and then click update. Now
when we view the page
we’ll see that the leave a comment section is now gone, so that’s how you remove comments
from an individual page. Now I’m going to show you how to add a menu
because as you know, we’ve now added three pages and there doesn’t seem to be anywhere
for our visitors to find them. Say they were on this page for example, how would they get
to our video page? So I’m now going to show you how to add a menu to your website. So
to add a menu to your website we just 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 where it says appearance, then still on the left you want to click menus. You want
to just click up at the top where it says create a new menu, and then it’s going to
ask you to give your new menu a name. For this I’m just going to call it main menu,
and then you want to click create menu. Now on the left hand side you can just check the
box beside any of the pages you want to add in to your new menu. I’m going to be adding
all of them apart from the sample page, and once I’ve checked the boxes I’m just going
to click add to menu. Now you can click and drag these boxes in to a different position,
and from top to bottom is left to right on your website. So I want my build a website
page to appear at the start, and then I want it to be why use HostGator and contact us.
Just make sure when you’re dragging these in to position none of them end up sitting
out to the side like this, where it says sub item here you don’t want that, you want them
all to be in to the left so they appear in the menu. Once you’ve got all the pages you
want added to your menu in the right order, you just want to click here to check the box
beside where it says main menu and then click save menu. Now when we visit our website
we’ll see that our new menu is along here,
and it’s in the right order. So now for example if we click here where it says contact us,
we’ll be brought to the contact us page. The same for why use HostGator page and the build
a website page. As you can see there’s no home button, there’s nowhere for us to be
able to get back to the home page, that’s because we didn’t actually add the home page
as a new page. It’s already built in to the theme we’re using.
So I’m now going to show you how to add a home button to your menu. 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 we need to click where it says appearance, and then under that menus.
Now to add your home page to this menu we just need to click here where it says links
to expand this box, and then type our website name after this. So I’m just going to type
in www. and then my website name .co.uk or .com, or whatever you’re using you just want
to put your website name in here after the http://. Then here where it says link text
I’m just going to write home and then click add to menu. Now I’m going to drag it to the
top because I want it to appear at the start of the menu, and then click save menu. Now
when we visit our site we’ll see that the home button is now in the menu, and say we
were on this page for example we can now click here where it says home, and that’s going
to bring us back to our home page. Now the next thing we’re going to be doing
for our website is populating the sidebar, which doesn’t actually appear on the home
page, but if we click in to one of our other pages we’ll see what I’m talking about. So
here this blank white bit to the left, this is the sidebar. I’m now going to show you
how to add a few different bits and pieces to this, to do this we’ll be using what are
known as widgets. So to add widgets on our side bar we just need to go back to our dashboard,
so hover over your 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 just below that still
on the left click widgets. Now there’s a few different widget areas on this theme we’re
using today, but we’re just interested in the one here that says left sidebar. So you
can actually click here where it says right sidebar and that will close this down, and
then just click left sidebar to open this one. So the way widgets work are you just
click anything from over here and drag them in to the widget area that you’re using. If
you want to remove one you can just click and drag it back out. So now for example if
I drag in this calendar widget to the left sidebar, it’s going to ask you to give it
a title so I’ll just call it calendar and then click save. Now if we visit our website
and go to a page that has the sidebar, we’ll see that it now has this calendar in the left
sidebar. Now to add more widgets I’m just going to go back to my dashboard, by hovering
over my website name at the top and clicking dashboard. Now to get back to the widget areas
you just need to click appearance, and then underneath click widgets. Now you can click
where it says right sidebar again to close it down and re-expand the left sidebar. Now
the next thing I’m going to add to my sidebar is our menu, so I’m going to click and drag
the custom menu widget in to the left sidebar. You can just click and drag these to position
them in the same way as your menu, only though I do want the custom menu to be below the
calendar. You can just give it a title, I’m going to call this our pages and then if you
had more than one menu you can select it here, but because we’ve only added one it’s the
only one available. Once you’re happy with that you can just click save, and that will
add the menu to your sidebar. You can just click this box and this will close it down.
The next thing I’m going to be adding to the sidebar is some text about our website, so
I’m just going to click and drag this text widget in to the left sidebar. Then I’m going
to give a title which is just going to be some interesting stuff, and I’ve got some
text that I’m just going to copy and paste in here. Once you’ve added your title and
your text you can just click save, and you can click here to close it down. So as you
can see here it’s calendar, custom menu and then some text about us. Now if we go to our
website and go to a page with the sidebar, we’ll see the calendar, our menu called our
pages and then some interesting stuff and our text.
So that’s how you populate the sidebar of your website using widgets, but say for example
you didn’t want this menu here and instead you wanted an image to be in your sidebar,
I’m now going to show you how to do that. So to add an image to our sidebar we’re going
to need to install a plugin because WordPress doesn’t come with that ability built in. So
to add a plugin, the same as last time when we installed the one for the contact form,
we just need to hover over our website name at the top and go to dashboard. Then on the
left hand side just click plugins, then up at the top click add new. The plugin we’re
searching for this time is called TinyMCE Widget. Once you’ve typed that in to the search
bar just click search plugins, and it should be the top one. Black Studio TinyMCE Widget.
Once you’ve found this one you just want to click here where it says install now, and
then click okay. Once again WordPress will install this automatically and all you need
to do is click activate plugin. Now if we go back to our widget area by clicking appearance
on the left and then widgets underneath, you’ll see that we now have this Black Studio TinyMCE
widget. So I’m just going to click here to close down the right sidebar and then open
up the left sidebar. To swap this menu with a picture, all we need to do is click and
drag the menu out and that will remove it from the sidebar, and then you want to click
and drag in the Black Studio TinyMCE widget. Then you can just click and drag it to the
position you want, and then click to expand it again. I’m not going to give it a title
because I’m adding in an image, but if you want to you can. So as you can see this is
pretty similar to the main content area when you’re adding a page, and it has all the exact
same functionality. So to add an image to your sidebar all you need to do is click at
the top where it says add media. Then click here where it says upload files and then select
files, then just select the image you want from your computer and click open. Then on
the right hand side you can just set alignment to centre, link to none and size full size.
Don’t worry if it’s a pretty big picture, the widget areas will actually shrink your
image to be the right size. Once you’re happy with everything you can just click here where
it says insert in to post, and then you just want to click here where it says save. Now
when we visit our website and go to a page with a sidebar, we’ll see that instead of
our menu we now have this image. So that’s how you add an image to your sidebar or any
widget area on your website. I’m now going to show you how to turn this
image in to a clickable link. This means if a visitor comes on your website and they see
the picture and click on it, it’s going to open up a different website in a new window
in their internet browser. This means your website will still be open in the background
but it’s just going to open up this new website as well. So to turn the image in to a clickable
link we’ll need to go back to the widget area, so you just hover over your website name at
the top and click dashboard. Then on the left just click appearance, and then underneath
that just click widgets. So you can just click here to close down the right sidebar, and
then you want to open up the left sidebar. Then you just find the Black Studio TinyMCE
widget and click to expand it. Then to turn the image in to a clickable link all you need
to do is click on the image with your mouse, and then click up here where it looks like
a chain link. Then you just type the web address you’d like the visitor to be brought to after
the two forward slashes, so I’m going to be linking my image to HostGator’s website. I’m
just going to type in www.hostgator.com, then here if you want to give it a title this is
if someone hovers their mouse over the image, the text will appear. So I’m just going to
write HostGator, then you want to just check this box beside where it says open link in
a new window or tab, this means your website will still stay open in the background. So
once you’ve entered in the website URL, the title and checked this box you can just click
add link and then click here where it says save. Now if you go back to your website and
we click on a page that has the sidebar, we’ll click on a different one this time. We’ll
see that we have this HostGator image here and now if we click on it, it will open up
HostGator’s website in a new window and we still have our website here. So that’s how
you add an image to your sidebar or any widget area, and then turn it in to a clickable link.
As you can see if we hover over the text comes up and says the title we entered in, here
it says HostGator. So now that we’ve turned our image in to a
clickable link, I’d just like to open up our check list and see what we still need to do.
So we’ve set up our hosting, we’ve got a domain name, we’ve installed WordPress, we’ve installed
our theme, we’ve changed most of the theme settings and we’ve added our pages. So the
last things we need to do are edit the home page, and change the last of the theme settings.
So the first thing we’re going to do is add some text and an image at the bottom of our
home page, and it’s going to appear in between these buttons, our social icons and this text.
So it’s going to appear in here, and to do this we just need to add it to a page as normal.
So we just need to add a page by hovering over our website name at the top, and going
to dashboard. Then on the left hand side just click pages, and then up at the top click
add new. Now the text I’m going to be adding to my home page, is going to be about the
website so I’m just going to call this page about us. Now you don’t need to worry, the
title of the page won’t actually appear on the home page, so it’s just really for your
reference. Once you’ve gave your page a name you can just click in the main content area,
and type any text that you want to appear below the buttons on your home page. I’ve
type some text up that I’m just going to copy and paste in to save time in the tutorial.
Once you’ve pasted in or type up your text, you can insert an image just the same way
as normal. So you can just click after the text and hit return on your keyboard, and
then up at the top click add media. Then you just want to click upload files and select
files, and then look for the image you want to use on your computer. So I’m going to use
this one and then click open. Then over on the right you can just choose the alignment,
I’m going to leave mine at centre, I’m going to change link to none and leave it as full
size. Once you’re happy with everything you can click insert in to page, then once you’re
happy with everything, your text and your image, just on the right you can click publish.
Now this page won’t appear on your home page just yet, we will need to add it to the home
page. So to do that we just need to click on the left where it says appearance, and
then underneath just click customize. Here we’re going to add our about us page to the
bottom of our home page, and we’re also going to change the last of the themes settings
we still need to change. To add our newly added text and image to the bottom of our
home page, we just need to click and expand the box that says front page. Then you want
to change the first drop down where it says front page displays, you want to change that
to a static page. Then where it says front page you just want to choose the page you
just added, so for me it’s the about us page. Once you do that you’ll see that now below
your buttons is your page, so here’s our text and our image and once you’re happy with everything
you can just click up at the top where it says save and publish.
Now what we’re going to do is, link these buttons to some of our pages and change this
text. So to do that you just need to scroll down, still in the front page section, you
want to scroll down to where it says button text, and you can change this to be whatever
you want. For example we can change instead of read more, we can have it say see more,
or you know whatever you want. I’m actually just going to change it back to read more,
but that’s how you change the text of the buttons. Now here using these drop downs,
this is how you can assign each of these buttons to one of your pages. So the first button
I’m going to have link to my build a website page. I just choose the build a website page
in this drop down. The second button I’m going to have linked to why use HostGator, so I’m
just going to choose that page in the drop down. Don’t worry if any images appear here,
that’s just because you’ve had it inserted in the post. I’m going to show you how to
change these pictures to be custom. You’ll also notice sometimes that the text here appears,
and it’s actually just brought from your page as well. But don’t worry we can change this
to be custom. Then the last one I want to link to my contact us page, so I’m just going
to select that in the third drop down. Then to change the text that appears between your
page title and the button, all you need to do is type it in to these three boxes. So
the first one is here, the second one is the middle one, and the third one is here. You
just want to type in something that’s going to convince the person to click the button,
so for the build a website one it’s actually pretty good already. It just says learn how
to build a website, step by step without missing anything. So if I actually just copy and paste
this in here, and then I can add to it and just write
by clicking the button below. Then for your
second page I would just type in something like have you ever wondered why people use
HostGator to host their websites, click the button below to find out. Then for the third
one which is my contact us page, I’m just going to type if you have any questions about
building a website, don’t hesitate to contact us by clicking the button below. Then once
you’re happy with your text and your buttons, you can just click at the top where it says
save and publish. Now you can click here where it says close and when we visit our site we
can see that our home page is looking a lot better, and our text is here and our image.
Now when we click these buttons they’ll bring us to the right page, so we click on the why
use HostGator one and it brings us to the why use HostGator page.
Now the only thing we have left to do is change the featured images on the home page, to make
sure these images look as good as possible just make sure the picture you use is 270
pixels wide and 250 pixels tall. This will make sure that they fit well inside these
circles, and they look as good as possible. So to change these images we just need to
go to each of the individual pages, and assign the image we want to use as a featured image,
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 click pages. The first one I’m
going to be changing is the build a website page, so I’m just going to hover over the
page title and click edit. Then on the right hand side if you just scroll down, you’ll
see here at the bottom it says featured image. If you just click below that where it says
set featured image, you can then click upload files and search for the image on your computer.
I’m going to use this one and then click open, now on the right hand side there won’t be
as many options as usual, and none of these will actually show up on your website so you
don’t need to worry about any of the options. So once you’ve chosen the image just click
set featured image, and then you can click up here where it says update. Now when we
visit our website
we’ll see that the featured image has now changed to the one we wanted. Now we’re just
going to do the same thing for the other two featured images and then we’re totally done.
So just go back to the dashboard and back to pages, and the second one I’m going to
be doing is the why use HostGator page. So I’m just going to hover over the page title
and click edit, then just scroll down to the bottom and on the right hand side click set
featured image. Then upload files, select files and then I’m going to use this one.
So once you find the picture just click open and then set featured image, then update and
then if we go back to pages we can change the third one which is the contact us page.
So just hover over it, click edit, then down at the bottom set featured image, select files,
choose your image and click open. Then set featured image and update, and now when we
visit our site we should find that all three of the featured images on the home page have
now been changed. Now the only thing left to do is congratulate yourself, because you’ve
just finished building your very own website and it’s only cost you around $12. Once again
my name is Marty from LetsBuildWordPress.com, and be sure to like this video and subscribe
to our channel for more tutorial videos like this one. Thanks again for watching.

100 thoughts on “How to Build A Website with WordPress – Super Easy Tutorial!

  1. ,Thanks for this video
    .Why use hostgator for register the domain? example: you can registration through wordpress

  2. This was really helpful and i learned lot. Thanks and well done. Just i have a question about how to upload my website at the end to the host server? Can you please advice or just send me a link if you have other clips showing this. Thanks again

  3. Do you have these instructions typed out any where? Just so I can keep on had so I don't have to watch the whole video again.

  4. Hey when I add my links and view my site it displays the links as it would on mobile..Any idea how to fix this? Its that little square where you click to bring up the links. Idk i followed your steps and my links display like that not under the social icons

  5. Regarding the Contact Form – What email address are these messages being sent to? Please advise on how to either send this to an existing email account, or how to check the "admin" email address provided by WordPress — THANKS!!

  6. I have viewed several tutorials for Word Press. All of them say it is so easy. Well, not unless start at the beginning and go step by step as this man has. Kudos

  7. not sure why, but my comments section is not showing up. on any of my pages… i have not clicked anything other than what you have done step by step in this video. can someone help? Thanks

  8. I want to sell t-shirts , so in my product>t-shirt page i want to show all the different t-shirts available , for each different t-shirts i have several images and specific description. CAN ANY ONE TELL ME HOW TO ADD LIVE BOX ? I mean whenever anyone click that particular t-shirts he will see different angle of that t-shirts and description.

  9. Hi. Nice explanation. I'm facing an issue, could you help me in resolving it? I am not able to view/browse the WordPress default themes. When i navigate to Appearance>>Themes it displays an error-

    "An unexpected error occurred. Something may be wrong with WordPress.org or this server’s configuration. If you continue to have problems, please try the support forums."

  10. great video. How can i view my site without dashboard and profile side bars obstruction(how can i hide them when viewing my site or reader)?

    i have a small laptop(small screen) not 14inch but everytime i open wordpress i can not view my site fully as it is always obstructed by dashboard and profile side bars on each side…they just come in and i can not hide them to view the page or reader fully. And niw i only use my phone to blog.any solution.

  11. Adding WordPress Security is a really great idea too, even if you're just starting out. There are bots that are constantly probing WordPress for weaknesses.

    Having your wp-login page setup with Google reCaptcha will stop lots of bots
    Making sure your "admin" user is removed or has their username changed
    Not exposing your Super Administrators name as an "author"

    There's developers that can do a full audit for you to make sure your site is safe. This one on PPH is fairly well received:

    http://www.peopleperhour.com/hourlie/secure-your-wordpress-site/257995

  12. Great video, thank you very much.
    I need one suggestion, I am looking at deleting the footer: Powered by WordPress. I have tried to go to Editor, but unsuccessfully. Do you have any suggestions?

    Thank you
    F

  13. Hi
    Actually I have the domain, but we don't have the hosting.
    I want first to make the design for the website, shall i do that without getting hosting.
    I have the account in WordPress, when i login i cannot find the appearance,theme,users, anything in the side bar.
    can you please help how to get over it?

  14. you really make greate tutorials that are easy to follow. just finished your tutorial with installing wordpress on bluehost and did it without any trouble.
    Im now deciding what theme to use. if i were to use the 'Meisha Lite' theme, would the steps in this video be the same?

  15. Your tutorial on wordpress was excellent…easy to follow and straightforward. Your instructional video's rock. I believe i can tackle a yelp like website in wordpress…thank you!

  16. Superb Tutorial! I've got a few websites to build so I'll be checking your other tutorials for other ideas!! 😀 Super Job

  17. this is quite good, i like how you did a round up of what you`d done and what needed to be done, saw another tutorial 3 hrs 😐 prefer this one lol

  18. Well i have input everything but when i click view websites it says i have unsaved changes. How do i save?

  19. Really excellent tutorial. Very step by step – methodical and well thought out. The narration matches the action perfectly. I learned so much and would recommend this to any friend or family who is learning to use WP. Thank you Marty!

  20. this helped me build a wordpress customizr website..but no i want more…can u please do a Cusstomizr Pro tutorial just like this..short and straight.?

  21. Reall nice video.This was my first wordpress tutorial and i have really understood whatever concepts u have shown.Good Job!!!

  22. This is BY FAR one of the best Teaching class I ever saw. Please let me know if you have more. Thank you and you are a GREAT INSTRUCTER. Best Mark

  23. At 12:03 you were downloading wordpress, this is the step I got to and it's been 50 hours and my domain name is still not coming up. Help please!

  24. Marty, You are good and you are a pro. You just saved me a lot of money. I've been thinking about learning how to build a website for a log time. When you let someone else do it I always end up with 20 revisions and it takes a month to build it. And you have to pay for those revisions. That is the bottom line. That is why so many people would like to have a website but when they contract it out it takes forever to build it the way the want.
    Thank you Sir

  25. How much time should it take for HostGator to configure the whole page after I've installed WordPress on it? I've done it like 8 hours ago and I still can't edit. Awesome video, thanks a lot!!

  26. Thanks a lot.. very helping video. I am from India.. I done my work with your guidance .Thanks sir, Keep it up…Subscribed your channel 👍👍👍👍👍

  27. Awsome Tutorial,Thaks a lot. Excellent Teacher and tells each action step by step Really nice to know some more vedios on e-commerce.

  28. This was awesome! I always thought that building a website was beyond my capabilities! After watching this video, I feel it's so easy with only a little practice. Thank you so much!

  29. Hello Mike here i like your video. i have a web site with go daddy. Go Daddy has rebuilt my site with word press. I have pages ,post, and pics. I have made changes by watching video . But still having trouble with getting right. The name of site is autokentucky.com can you help Thanks Mike

  30. Thank you very much for explaining how to build a web site using word press step by step, so clearly , I am from South Sudan.

Leave a Reply

Your email address will not be published. Required fields are marked *