How to Make A WordPress Website – Step By Step Tutorial

Articles, Blog

How to Make A WordPress Website – Step By Step Tutorial

How to Make A WordPress Website – Step By Step Tutorial


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.

55 thoughts on How to Make A WordPress Website – Step By Step Tutorial

  1. THANK YOU so much Martie this has been such a pleasure to watch and learn from you. I am a COMPLETE greenhorn and you guided me right through this process much appreciated you taking the time to make this. Sending Love from Waterford ♥

  2. Hi
    Congratulations, that's a really good Videotutorial. I'm eager to see more from you.
    Best regards from
    Peter/Linz-Austria

  3. Finally I found a video that helped me! I was spoiled by Weebly. I was so overwhelmed by other videos. This was was perfect for a beginner.

  4. Many thanks.  Your video is clear concise, easy to follow.  I have installed XAMPP for host server and WP to learn on.  I'm almost ready to fly.  Next I'll need to know how to put the local version (when its done) onto the hosting site so it can go live.  Do you have a tutorial for that? HMB

  5. Thank you so much Marty,your patience and attention to detail,much blessing to you,very very helpful,thank you

  6. Sir, First of all thank you for this beautiful tutorial.
    Actually I am a PHP developer just started my career for last 10 months using Codeigniter framework. I want to know WordPress. But nobody around me does not know any CMS so i can't get any help except google search. Sir is it possible to learn WordPress from the tutorials around internet. Also want to know if it takes too much time to learn. Please, give me a suggestion. Thank You. 

  7. wordpress min kesye website benatye hin us ki mukamal tefsial 1mertba zarur dekin jo loog pehli bar website benaye ja rehye hin

  8. Wonderful and very clear vid, one thing that would really help me is to know how to remover the title of a page when we have created the menu tabs – So the words "contact me" for example, are on on the menu tab and on the actual page as too.
    Thank you Marty for all your help.

  9. Well we did build a website together, thank you Marty. Can you only have an image on the front page and none on the rest?  I'm sure it depends upon the site but can you do it on the free featured ones?  Thanks again.
    Scott
    www.veteranscause.com

  10. Marty thank you for the great presentation. It was sooooo helpful! Can you help me with something please? Can you add widgets to single pages versus the widget showing up on all the pages? Thanks

  11. Was fighting with my menu here for a week or so, i looked five minutes at your video en did my menu in 2 minutes. Thanks.

  12. Plz help it says my domain does not exist I got a email saying it was ready after the quick download and it had a link to the site it didn't work it says I doesn't easiest please help

  13. Hi im half way through your video which is very interesting do you recommend purchasing the search engine visibility from Host Gator and also can you use Host Gator if you are in the UK? sorry I am new to this and not really sure what I need
    Thanks

  14. Love this video! you helped me so much. Now I have a problem maybe you can help me with if you will please, When my website is shared it shows up as "My word press blog" I prefer it to show up with my website title. What can I do?

  15. Thank you very much  Marty, now I have my own website, God bless you! Please Marty, could you show me how to add a location map in the contact pg. Thank you 

  16. Great presentation! Clear and to the point. The trick for creating a page, inserting an image, then grabbing the reference code from there was awesome!! Thanks. 

  17. This was a wonder presentation.  As a person who knows very, very little about building a blog/web site, (and truth be told, has very little interest in becoming an expert in this area), this presentation helped my create a nice looking site in a very short period of time.  The clarity of the step by step instructions relieved a bit of my anxiety about tackling this project.   Thanks Marty ..job well done!!!

  18. I love it so far, I own a small transportation company in Orange County, CA.  I would like to add sort of a taxi/ transportation fare, how would I add something like that on WordPress?  Thank you for making the video available also thank you in advance if you can help me finding information about my question.

  19. Very informative. I like your teaching style where you systematically and consistently give the instructions for each step. Very goof presentation. Thanks, and i just subscribed to you channel.

  20. Thanks for such a lovely video. One question I want to ask you. Ok I got it for 1 penny for the first month entering your code. But what about the subsequent months? How much will hostgator charge per month after the first month ?

  21. Hi, Ive followed this step by step all though I all ready had a domain. It wouldn't let me click on fantastico De luxe so I clicked on quick install as shown on video. Everything was ok until I got to the part where you pause your video and clicked on HERE. I click on here and it brings up my existing website not wordpress? can you help me thanks

  22. Great tutorial! This is just what I needed although I know how WordPress functions, it was confusing for me to set one up! Thanks for the help!

  23. I really appreciate you putting this up for everyone. I am a married mom of four kids (13-21 years old) and I work in the IT department with my husband at a Christian school….He is the brains and I am the one who really only answers the phones, door and does some data entry. I am learning and doing things from your video that I NEVER thought I would be able to do!!! My husband is also very proud of me for this and so encouraging…I feel excited when we are discussing wordpress and I understand the concepts he is talking about now! THANK YOU SO MUCH! Keep up the great work…you never know who's life you will change today! Blessings!

  24. Hey man Im loving the video but Im lost and need some major help lol. I was following right along with you until I went to put the www. in my URL and I clicked on save, and that is where my problems began. It did not send me back to the sign in so I tried the Username.com/wp-admin and it keeps sending me to my Time Warner Cable internet provider saying that I misspelled it or it didn't recognize it. If you could help that would be wonderful.

  25. A Jon said below, fantastic tutorial. Marty you did an excellent job. Thank You, thank you so very much I now feel comfortable going forward to design my blog

  26. Am following your video.  Great Work.  My question is would I insert a banner following same instructions as inserting a video?

  27. When I try to add video page to my website everything seems right except I cannot get new page to show up in my menu.  So when I go to my site that page doesn't show and cannot find it.  What now?

  28. thanks for taking the time to post this great video!
    just wanted to know if you have other videos on building WP site using templates sold on themeforest but NOT wordpress.com
    i am unable to find a reliable tutorial except those that are mainly for templates on wordpress.com
    thank you

  29. can i use any templates from (lets say) themeforest.net using this method?
    i havent been successful finding the right tutorial video for this. thanks a bunch!

  30. This was a great learning experience. Thanks
    Only one question if you wanted to add a menu that included career opportunities, would you add it the same way you added the contact list?

  31. Outstanding video tutorial!.Thank you so much for helping me build my second website with wordpress.Friends from vetshangout dot com. SergeantC

  32. Congratulations. This is a great down-to-earth "here-is-how-to-do-it," no mess website building instruction. Excellent.

Leave a Reply

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