Hi guys, it’s Martie here from letsbuildwp.com,
and in this video we’re going to be covering how to build an AMAZING WordPress website
from scratch, in around 60 minutes or less! I’m going to cover the entire process, step
by step, and in a way that anyone should be able to understand. Even if you have ZERO previous experience,
and you’ve only used your computer for sending emails and watching videos, you should still
be able to follow along without any problems! And by the end of this quick tutorial, you’ll
learn how to create a professional WordPress website, just like the one on screen now. I’m going to show you how to add this large
image banner on the homepage, where we can have some call to action text and a button. Then when we click the button, it will bring
us to one of our pages. Then if we scroll down, on the home page we’ll
have our different blog posts, which can help us to get more organic traffic from Google,
and keep our visitors entertained with new content. Our blog posts will have these awesome featured
images, and when we click into our posts we can have text, images, clickable links and
anything else we might need. There’ll also be a comments section at the
bottom, so our visitors can leave us a reply, or ask follow up questions. Then if we scroll back up to the top, we’ll
see that we have our logo on the left, and our navigation menu on the right. We’re going to cover how to add different
pages, like an about page, where we can tell our visitors more about what we do and what
they an expect from our website. Then we’ll also add a contact page with
a form on it, so our visitors can get in contact with us if they need to, and when someone
fills out the form, it’s going to be sent to us as an email. I’ll also show you how to change this section
on the right side of our site, known as the sidebar, where we can have text and images,
links to our posts, and a bunch of other cool stuff. But the website you build doesn’t have to
be exactly the same as this one. You can obviously you can use different pages
and colours for yours. So I’m going to cover how to set up this
website in a few different styles as well. So rather than this website, yours might end
up looking more like this one, or this one, or one of these. Then another really cool thing about this
website, it’s that it’s going to 100% mobile friendly. So if I just make my browser window a bit
smaller here, this is what it would look like when being viewed on a tablet, and if I make
it even smaller again, this is what our website would look like when being viewed on a mobile
phone. This means that no matter what size screen
our website’s being viewed on, it’s still going to look awesome for anyone who see it! So if this all looks good to you, and you’re
ready to get started? This is how to build your very own WordPress
website, step by step, in around 60 minutes or less! Okay so there are only really 5 main steps
we need to follow, in order to build a WordPress website like the one we just saw. So, first we need to register a domain name
and web hosting for our site, and just to quickly explain what these are for anyone
who doesn’t know already. A domain name is usually the title of a website
or business, with WWW. before it and .com after it, and it’s what we type into our
internet browser to visit a specific website. So for example, www.google.com. Or sometimes domains can end with different
extensions, like .co.uk or .net. Then web hosting is basically where the different
files that make up our website will be stored online, so people can access them when they
type in our domain name. Then once we have our domain name and web
hosting registered, we can move on to the second step, which is installing WordPress
onto our new hosting account. This will only take about 60 seconds to do,
and as WordPress is open source software, it’s 100% free for us to use. Then the third step is installing and customising
our WordPress theme. Which is going to change the entire look of
our WordPress site, and make it more like the website we are trying to create, and for
this tutorial we’re going to be using an awesome free theme called Rocked. Then once we install and customise our theme,
we’re going to move onto step 4, which is adding our different pages and blog posts
which we saw at the start. So things like our about page and contact
page, and the blog posts that appear on our homepage. And then the fifth and final step is organising
our content, which we’ll do by creating a custom navigation menu, and changing the
sidebar on the right-hand side. Don’t worry if any of this sounds confusing
by the way, it’s all super easy and I’m going to show you exactly what to do every
step of the way! Then once we’ve completed these 5 main steps,
we’ll have our very own professional website, up and running online. So If you’re feeling pumped up and ready
to start building your website, leave me a comment underneath saying “Let’s do this!”,
and then let’s get started! Okay so the first thing we need to do is register
a domain name and web hosting for our website. For this I'd personally recommend using HostGator
which is a company I've been using for years now without any problems. And there are also who I currently use to
host letsbuildwp.com. They're a great low cost hosting company which
is exactly what we need. So if you're going to take my recommendation,
we just need to open up our Internet browser and go to HostGator.com. Then if we click web hosting at the top, this
is going to show us the three different hosting plans that they offer. If you're only planning to build one website,
go for the Hatchling Plan or if you're going to build multiple websites, go for the Baby
Plan. The business plan is an option but to be totally
honest with you, it comes with a whole load of added extras we probably won't need. Then once we've decided on which plan we're
going to go for- we can just click “Buy Now” underneath. Then on this page, we're going to enter whatever
we'd like to use as our domain name for our new website into this box and then choose
our domain extension on the right. So for me I'm going to type WPSmartWay and
then choose dot com as my domain extension. Once we've entered our domain name hopefully
it comes up and says added primary which means the domains available otherwise we're going
to need to choose something else. Then underneath, we have the option to purchase
other domain extensions as well but we can always come back and do this later. So I'm just going to skip it for now. Then here underneath, we'll see it says “Domain
Privacy Protection” and this is a 100% optional add on. I normally just uncheck this box myself and
haven't had any problems to date but if you want to keep the box checked, it will be added
to your bill. Then underneath it says, choose a hosting
plan and here we just want to double check that our package type is correct and choose
a billing cycle. So for me I choose the hatchling plan. So this is correct. And then under this, we can choose how often
we'd like to pay for our hosting. So we can pay for it every month, every six
months or we can even pay for it every three years if we like. Now we do see a bit more money the longer
we buy at one time. So that might be something to think about. But as I'm just doing this for the tutorial,
I'm going to choose monthly. Although if this was a real website I was
building, I'd probably go for at least six months- the benefit from the discount. Then underneath, we just need to create a
user name and security pin for use with our HostGator account and then under this, we
can enter our personal billing information. So that's things like our name, our email
address and things like that. Then on the right hand side, we can choose
how we'd like to pay for our order and we can choose either credit or debit card or
PayPal. Then under this, we'll see it says add additional
services and these are a few paid services that HostGator offer. If you're lucky they're still going to be
running this offer where we get a free SSL certificate which is pretty awesome. But for the rest of these, I normally just
uncheck these boxes myself but you can have a read through them and if you like the look
of any of them, just check the box and they'll be added to your bill. Then under this it says, enter a coupon code
and I have a coupon to share with you guys that'll get us our first month web hosting
for only one penny. So there might already be a coupon code entered
in here worth 20 or 25% off but instead of using this coupon, we're just going to delete
it and instead enter BlogHosting1. So that's the word Blog, the word Hosting
and then the number 1, BlogHosting1. Then when we click the validate button, we'll
see that we're now getting our first month web hosting for only one penny. Now this is awesome if we're only going to
be purchasing a few months hosting at a time but if we're going to be ordering more than
six months, there's an even better coupon we can use. If we use the coupon Hosting30 instead, we
can get 30% off on our entire order which can obviously work out a lot better if our
bills are a little higher. If you're unsure, you can always try both
coupons and see which one works out better for you and please leave a comment underneath
letting me know which one you used. Then once we've entered our coupon code, underneath
we just want to double check that our orders correct. Also be sure to note the 45 day money back
guarantee and the 24/7 phone, live chat and email support which can be extremely helpful
if we get stuck. Then as long as we're happy with everything
here, we just need to scroll down to the bottom- check this box to agree to the terms of service
and then click the checkout now button. So I'm just going to quickly pause this video
while I feel like my personal information above and pay for my order and then I'll restart
the video once I've done that. So if you're following along at home, if you
just want to pause this video until you've finished paying for your order and then come
back and hit play, we can continue building our website together. Okay, so that's me now back and I finished
paying for my order. It brought me to a page saying thank you and
then redirected me to the home page. At this point, we just want to open up our
e-mail inbox and a new tab and here we should find a few new e-mails from HostGator. These are pretty important e-mails so we should
keep them safe. But for now we just want to click into the
one that says, your account info. Here we're going to find a link to our control
panel which is also known as our C Panel, our user name and password for logging in
and some other pretty important information. So we just want to click the link beside where
it says, your control panel and this is going to open up our C Panel login screen in a new
tab. Then we're just going to copy and paste our
user name and password from this e-mail into the login screen. Then when we click login, this is us going
to be logging into the HostGator C Panel. Now this might seem a little overwhelming
at first but it's actually pretty easy. All we need to do is scroll down to where
it says- software and then click quick install. Then here on the left- we can click on one
click installs and then choose WordPress in the middle. That's going to bring us to this page and
here we just want to choose our domain name from this dropdown list and then click next. Then on this page, we're going to enter some
basic information for our WordPress site. So for blog title- this is going to be the
name of our website and I'm just going to type my new Web site. Although don't worry about this too much as
we can always change it later. Then admin user- this is going to be the user
name for logging into our site and it's also going to show up on a few different pages
as well. Then we just need to enter our first name,
our last name and our email address. Then once we've entered our information, we
just need to check this box underneath to agree to the terms of service and then we
can click where it says install on the right. HostGator then going to install Wordpress
for us automatically in a matter of seconds, once it's finished we'll be given a link to
our site, our user name for logging in and a randomly generated password. At this point, we're just going to right click
this log in button and click open link in new tab and this is going to open up our WordPress
login screen in a new tab. But don't be alarmed, if you're shown a blank
white screen or some kind of advert. Sometimes it can take a few minutes for everything
to be ready. If this happens to you, just take a quick
break and then try again. But once we get access to our WordPress logon
screen, we're just going to copy and paste our user name and password from this screen
into the log in screen. Then if we click login, this is us going to
be logging into what's known as the WordPress dashboard. And this is where we can add any content or
make any changes to our WordPress website which by the way is now live online. All we need to do to visit our site, is click
our site title in the top left and that's going to show us what WordPress looks like
when we first install it. Now yours might look a little different as
sometimes they change up the default theme but either way we're just going to see some
damo content and not much else. It's already looking pretty amazing but we're
going to build something much better than this. Sorry to interrupt but if you're following
along at home and you've made it this far, please give the video a Like to show me that
you're enjoying it and not only that but it also shows YouTube that you like it too. This is going to help me grow my YouTube channel
so I can help even more people like you build their own websites with WordpPress. I'd really appreciate it if you do and thank
you in advance but even if you don't, I'm still super pumped that you've made it this
far. Now let's get back to building our website. Okay, so now that we've got WordPress installed,
the first thing we're going to do is delete the demo content before we start adding our
own. To do this, we just need to click our site
title in the top left to go back to our dashboard and then if we click where it says “Pages”
on the left, this is going to show us any pages we have on our site- which at the moment
is just this damo page. So to delete this demo page, we're just going
to hover our mouse over the page title and then click trash. Then we're going to do the same thing for
a demo blog post, only instead of pages on the left, we're going to click posts. Then we can just hover our mouse over the
post title and click trash to delete it. And then finally we're just going to delete
a few plugins as well. So on the left hand side, we can click where
it says “Plugins” and that's going to show us any plugins we have installed, just
to quickly explain what they are- Plugins are basically like extensions or add-ons for
WordPress that let us add extra functionality to our site that WordPress doesn't come with
by default, so that's things like contact forms and social share buttons. We're going to come back and cover how to
use plug ins later but for now, we're just going to remove the ones that came pre-installed. To do this, we just need to check this box
at the top to select all of the plugins in the list then click where it says bulk actions
and change this to deactivate. Now if we click apply, WordPress is going
to deactivate all of the active plugins. Then once they've been deactivated, we're
just going to check the same box again, click where it says bulk actions and instead of
deactivate we're going to choose delete. Then if we click the apply button, it's going
to ask us if we're sure and when we click okay, WordPress is going to remove all of
the plugins from our site. And now that we've deleted the demo content
and removed all of the pre-installed plugins, our WordPress site is now completely empty
and ready for us to start customizing. So the next thing we're going to do is change
our theme which is going to change the entire look for our site and make it look more like
the custom website we're trying to build. To do this, we're just going to click where
it says appearance on our left dashboard menu and that's going to show us any themes we
have installed. So as we can see, I'm currently using the
2017 theme as this is the one that's active on my site, although you might have different
themes installed on your site as they do occasionally change them. If we wanted, we can activate one of these
other themes on our site but to be honest, there are much better themes we can use. So to install a new theme, we just need to
click up at the top where it says “add new”- that's going to bring us to this page where
we can search through all the different free themes on offer. For this tutorial, we're going to be using
the “Rocked” theme which I think is not only a great theme that works for a ton of
different website styles but it's also perfect for anyone who's just getting started. Plus it's the one we were looking at at the
start of this video. I'd recommend using the same theme while following
along with the tutorial but you can always come back and change it again later if you
like. That's one of the many awesome things about
WordPress themes. We can swap them at any time without the risk
of losing any of our content. It's just going to change the look and style
of our site. Then if we don't like it, we can always change
it back. So to find the Rocked theme that we're going
to be using, we can simply type the word rocked into the search bar on the top right then
we can hover our mouse over the theme and click install. WordPress will then automatically unpack and
install the theme in a matter of seconds and once it's installed, we just need to click
activate. And now when we visit our site by clicking
our site title at the top, we'll see that the entire look of our site has changed and
it's already looking much better. Now we haven't added any content to it yet
but it's still looking great. So now that we have it installed, we can start
customizing the Rocked theme to make it our own. So to customize our theme, we just need to
click customize at the top. And this is going to open up our main theme
options on the left and we'll also see a live preview of our site on the right. Now some of the options on the left might
be a little different if you decided to use a different theme but usually they'll be pretty
self-explanatory or you'll be able to figure them out with a little bit of trial and error. But for the rocked theme, this is exactly
what we need to do. So on the left hand side, if we click into
the first box labeled General, we'll see it says preload your text. And basically this is a line of text that's
going to appear when our site's loading something up. This is one of the only things I don't really
like about this theme, so I'm just going to delete the text that says loading. But if you want the preloaded text to appear,
just type something into this box or leave it as it is. Then once we're done here, we can click “publish”
up at the top and then click this back pointing arrow to go back to the list of options. Then underneath, if we click into header area,
we'll see a few other options in here as well. So we're just going to click into the first
one labeled site branding and this is where we can change our site title and tag line
and also add a logo if we have one. So if we look at the preview on the right
hand side, we'll see our site title appears here at the top and then the line of text
underneath- it says just another WordPress site, this is the tagline. To change our site title and tag line, we
just need to change the text that's in these two boxes. So I'm gonna change my site title to say “demo
site” and as we can see my site titles already updated in the preview on the right then for
my tag line- I'm going to change this to say “building WordPress with Martie
and personally I think this looks much better already. Then if we're wanting to use a logo image
instead of our site title and tagline, we can just click where it says “select image”
on the left then we can click select files in the middle and search for the image on
our computer when we find it, we just need to click on it and click open and once it's
been uploaded, we can click choose image in the bottom right. When we do this, we'll see it updates on the
right hand side and our site title and tagline have now been replaced with our logo. Then the last thing here on the left at the
bottom, is our site icon which is the little icon that appears beside our site title in
our Internet browser. As we can see here, it says site icons should
be square and at least 512 pixels by 512 pixels in size. Personally I'd recommend using a free tool
like convert.com to create your site icon and even your logo if you don't have one already. So we're just going to upload our site icon
in the same way as our logo and to do this- we're going to click select image at the bottom
then upload files at the top, select files in the middle and then we can just search
for the image file on our computer, when we find it we just click on it and click open
and once it's uploaded, we can click select in the bottom right. And now if we look up at the top beside our
site title, we'll see that our site icon is now showing up. And once we've added our site icon, we can
just click publish at the top and then click the back pointing arrow to go back to the
list of options. Now we're going to click into the next section
labeled header type and here we just want to make sure that image is selected at the
top and only menu is selected at the bottom. This is going to make sure that our main banner
here on the right only shows up on our home page and not the rest of our pages. But if you want the banner to appear on all
of your pages, on the left hand side just select image for both and if we don't want
the banner on any of our pages, we just need to select only menu for both. Then we can click Publish up at the top to
see if our changes and then click the back pointing arrow. Now if we click into the next section labeled
header text, this is where we can change the text that appears in our main banner here
on the right. So for my header title which is where it currently
says “ready to rock”, I'm going to change this to say “build a website”. Then for the text that appears underneath
which is called header text here on the left, I'm going to change this to say learn how
to build it yourself with WordPress in less than 60 Minutes and as we can see, it's updated
in real time on the right. Then finally for my button text, I'm going
to change this to say “start building now” then underneath it says- button URL and we're
going to come back and link this button to one of our pages or posts later on in the
tutorial. But for now we can just click Publish up at
the top and then click the back pointing arrow to go back to the list of options. And now we're going to click into the next
option which is menu style. And here we can choose if we'd like our menu
and header area to be sticky or static. So our header area is this white bit at the
top where we've added our logo and once we start adding some pages and create a menu,
that's going to appear here in the blank space on the right. So by default, our menu set is sticky which
means if we scrolled on the page after a little while we'll see our header area comes back
into view whereas if we set it to be static, we'll see that when we scrolled down- our
header area just acts like the rest of the page and scrolls out of view. So I'm going to keep mine as static but if
you want your header area to be sticky- just change it to sticky. Then under menu style, we can choose if we'd
like our header area to be in line or centered. So if I change this to be centered, we'll
see that my logo now goes into the middle and if we had a menu at this point, the menu
would be centered underneath the logo. Then if I change it back to inline, it's going
to go back to the way it was. I'm just going to keep mine inline myself
but really it's all just a matter of choice. Then once we're done here, we can click publish
up at the top and then click the back pointing arrow. Now we're going to click into this next section
called header image and this is where we can change the image that appears in our banner
behind our text than our button. So to do this, we just need to click add new
image then upload files at the top and select files in the middle. Now we can search on our computer for the
image and when we find it, click on it and click open. Then we just need to click select and crop
in the bottom right and we can either crop our image if it's pretty big or if we don't
want to, we can click skip cropping. Then we'll see that our image updates and
the live preview on the right then here on the left hand side under where it says- header
image height- we can change the height of our banner. So for an example if I change this from 600
to 400, we can see that the banner on the right hand side is now a lot shorter. I'm going to change this back to 600 but I
just wanted to cover what this was. Then once again once we're finished here,
we can just click publish at the top and then click the back pointing arrow and thats was-
that was the last option in this list. We're just going to click the back pointing
arrow again to go back to the mean list. Now we're going to click into blog options
which are where we can change a few different aspects of our blog. Now some of this might not make a whole lot
of sense right now seeing as we haven't got our blogs set up yet but we can always come
back and experiment with these options again later if we like. Personally I recommend just leaving everything
here as it is by default. So we want to make sure that blog layout is
set to classic and all of the other boxes here are left unchecked. If we do decide to change anything, we just
need to click publish at the top to see our changes and then we can click the back pointing
arrow to go back to the list. The next in the list we have fonts and we're
going to skip this for now but we'll come back to this once we've added some content
to our site. Then we're also going to skip footer widgets
and widgets down at the bottom for now as well as there's an easier way to edit these
which will cover later. So underneath footer widgets, we have colors
and if we click in here this is where we can change some of our websites main colors. The only color I'm really going to be changing
here myself is the primary color which is set to orange by default. But using these options, we can also change
our menu background color which is our header section at the top where our logo appears. We can change the background color of our
site, our text colors and basically anything else we might want to change. In this example I'm going to change my primary
color to a nice blue and to do this we need to click select color and then we just select
a color here or use one of the preselected options underneath. Then when we change any of our colors, we'll
see that they update in the live preview on the right hand side. So we can see that the button and my main
banner is now blue and if we scroll down a little, we'll see that any links are now blue
as well. So we can just mess around with any of the
colors here on the left hand side that we like- until we get exactly what we're looking
for. If we don't like one of the new colors that
we've chosen, we just need to click select color again and then we can click default
to bring it back to the way it was before. Then once we're happy with our site colors
like always we just need to click Publish up at the top to see of our changes and then
click the back pointing arrow to go back to the list of options. Now we're going to click into the next option
which is labeled background image. I'm not going to be adding a background image
myself but if you'd like to add one- we just need to click select image and then we can
upload the image in the same way as our site icon and our logo. If we do upload a background image we just
need to click publish at the top and then click the back pointing arrow to go back to
the list. Then next in the list we have theme info and
we're just going to skip over this as it's literally just some information about our
theme. Then we can also skip menus for now as well
but we're going to come back to this later once we've added a few pages. Then finally the last option in the list is
“Additional CSS”. This is used for much more advanced web design
and we're going to skip over this but if you understand how CSS works, it's just pasted
in there. And now that we're finished customizing our
theme and we've made sure to publish our changes, we just need to click this X in the top left
to close out of these options and when we do this we're going to see that all of our
changes are now Live on our site and everything's starting to look much better than it did before. Now that we've got our theme customized and
looking the way we want it, we can start adding some pages to our new website. But just before we do that we're going to
quickly install a free plug in on our site which is going to change the way we add pages
and make the whole process a lot easier. So to install a plug in, we just need to click
our site title at the top to go back to the dashboard. Then on the left hand side, we just need to
hover over where it says plugins and then click add new. Here we can search through a bunch of different
free plugins that we can install and use on our site but for now as we already know which
plug in we're going to be installing, we just need to type the words “Classic Editor”
in this search bar in the top right. When we do that it's going to automatically
search and then we're going to install the first result by WordPress contributors. To install a plugin, we just need to click
install now and after a few seconds we can click activate. And now that we've installed the Classic Editor
plugin, we can move on to adding our pages. So to add a new page on WordPress, we just
need to hover over where it says- pages and our left dashboard menu and then click add
new. This is going to bring us to the main editor
in WordPress which is where we can create our different pages. Now this might look a little bit confusing
at first but it really doesn't take long, getting used to it at all. For this example, the first page I'm going
to be adding is an “about” page which is where we can tell our visitors a little
bit about ourselves and our website. So the first thing we're going to do and creating
a new page is give it a title. And to do that we just need to type whatever
we're wanting to use into this box here at the top. So for me this is going to be “about us”
then if we click into the larger box underneath, this is where we can add any content to our
page. So we can just start typing whatever we want
into this box or if we've already got something typed up like I do- we just need to copy and
paste it in. Then once we've added any text to our page,
if we look at the top here we'll see a bunch of different options similar to something
like Microsoft Word. If we only have one row of options, we can
click the toolbar toggle icon on the far right to open up the second row. Then using these different settings, we can
make our text bold and italics. We can also add bullet points and a bunch
of other things we'd normally find in any good text editor. If we have any subheadings in our text like
here- we just need to highlight them and then we can use this drop down menu to change the
size of our heading text. So I'm just going to go through and change
my different sub headers to be heading size 3. Then once we've added any subheadings, we
can move on to adding some images to our page. So to add an image to our page, we first just
need to figure out where we're wanting it to go. Say for this example, we wanted our image
to appear before any of our text at the top of our page, we just need to click our mouse
at the start of the first line of text and then hit return on our keyboard to take a
new line. Then we just need to click into the new line
we created and click the ad media button at the top. Then just like with the other images we uploaded
earlier, we need to click upload files at the top- select files in the middle and then
we can search on our computer for the image were wanting to use. When we find our image, we just need to click
on it and click open and once our image is being uploaded on the right hand side if we
scrolled down, we can change the alignment of our image which I am going to change to
center and we can also change the size of our image to a few different default sizes. So I'm going to make my image full size and
centered and once we've changed these options, we can click insert into page in the bottom
right. Then when we do that we're going to see a
live preview of our image appears in the editor. Now if at any point during editing, we want
to see what our page is looking like so far, we can just click the Preview button in the
top right and that's going to open up a live preview of our site in a new tab. Once we're happy with how our page is looking
or we know what we need to change, we can just close back out the preview to get back
to the editor. Now I'm just going to quickly repeat the same
process again for a second image which I'm going to add just below this subheading that
says “a bit about us”. So to add our image, we just need to take
a new line and then click the add media button at the top. Then we're going to click upload files at
the top, select files in the middle and then we can search on our computer for the image. When we find it, we just need to click on
it and click open and once it's been uploaded, on the right hand side we can choose our alignment
and size. So I'm going to leave mine as full size and
change the alignment to left. Once we're done with these options, we just
need to click “insert into page” and we'll see that our image appears in the editor and
we'll also see that because I align this image to the left that the text wraps around the
image. Once again we can preview our page by clicking
the Preview button on the right hand side- just to make sure everything's looking good. Then once we're happy with it, we can just
close out of the preview to go back to the editor. Then the last thing I want to cover here before
we move on is to add clickable links which we can use the link to other pages on our
site or things like our Facebook page or YouTube channel. So for this example, I’ve added two lines
of text to the bottom of my “about” page which I'm going to use for these links. One says “click here to go back home”
which I'm going to link to the homepage of this site and the other says “or visit my
YouTube channel” which I'm going to link to my YouTube channel. Obviously you might be linking to different
places but the steps are going to be the same either way. So once we've added the text we’re wanting
to use for our link, we just need to open up the web page we’re wanting to link to
in a new tab, so we can get the URL. And for me, that's the homepage of this site. Then we just need to highlight, right click
and copy the pages URL and then head back to the WordPress editor. Then to add our link, once we've got our URL
copied, we just need to highlight the text we're wanting to use for our link and then
click this little icon at the top that looks like a chain link. Now we simply post our copied URL into this
box and then hit return on our keyboard to add the link At this point, we'll see the
text is now a different color which means the link has been added. Then if we click the preview button on the
right hand side to preview our page, we can click on our new link and it's going to bring
us to the page we linked to. Now this is all well and good if we're linking
to another page on our own website like I just did but if we're linking to another website
or blog there's an extra step I recommend doing. So for my next link, I'm going to be linking
to my YouTube channel and just like before, we need to visit the web page we wanting the
link to and copy the URL. Then we can come back to the editor, highlight
the text we're wanting to turn into a link and then click the link icon at the top. Now we're going to paste the URL into this
box but as we're linking to another Web site, instead of hitting return on our keyboard
to add the link, we're going to click the settings cog first. Then we can check the box labeled open link
in a new tab and click Add link. Now if we preview the page by clicking preview
on the right, if we click on our new link, it's going to open up the page we linked to
but in a new tab. This means that once our visitors are done
with the link and close out of it, they're going to be brought straight back to our site
where they left off. And obviously this is much better than losing
them completely. Then we can just close the preview again once
we've checked our links working. And that's basically all there is to show
you when it comes to creating pages on WordPress. It really is super easy. Once we're finished adding any content we
want on our page, we just need to click the publish button on the right hand side and
our new Page will be live online or if we're not quite ready to publish it just yet, we
can click save draft instead and then come back and publish it later. But once we hit publish, we can click view
page at the top to visit our new Page. We'll see that we have our text and images. We also have our different sized subheadings
and clickable links and anything else we decided to add. Just remember that we're going to be changing
the fonts and font sizes later on in the tutorial, so don't worry if the writing looks a little
small or you don't really like the look of it. And now that we know how to add pages, we
just need to repeat the process for any other pages were wanting on our website. So for my site, I've decided to add a Contact
Page and for this, I've just started an image and some text with my address and phone number. Then later on in this tutorial, we're going
to cover how to add contact forms as well and I'm going to add one to the bottom of
this page. We could also have a services page if we offer
services and for this one, I've just started an image, text and a few subheadings. We could add an FAQ page where we answer some
frequently asked questions we get or any other pages we think we might need for our new website. Then once we've added any main pages we need
for our website, we can move on to adding some blog posts. Our posts are going to appear on our homepage
underneath our banner where it currently says “nothing found”. Now on WordPress, posts are pretty similar
to pages but with a couple of important differences and they're used for different things. See pages are used for things like “our
about page”, “our contact page” and things like that, basically the main pages
that make up our site. Then posts on the other hand are more for
things like sharing news or updates with our readers or tips and tricks or tutorials - depending
on the type of site we're creating. We also have a few other options available
in the Post editor as well that we don't have when adding of pages and we're going to go
over with these are now. So to add a blog post, we simply need to click
our site title at the top to go back to our dashboard. Then we can hover over where it says “posts”
on the left and click add new. This is going to open up the Post editor which
is basically the same as when adding pages. So we can give our post the title by typing
it into this box at the top then we can just start typing any text we want on our post
into this bigger box underneath or if you've already got it typed up like I do, we just
need to paste that in. Just like with pages, we can also add any
formatting that we like to our text and we can also add larger subheadings as well. We can also add images in the same way by
clicking the add media button at the top. And to save time, I'm just going to use one
of the images I've already uploaded. We can also add clickable links in the same
way if we need to and basically do everything else we could when adding pages. But this is where it starts to get a bit different. If we look on the right hand side, we'll see
it says “categories and tags” and these are what we can use to help organize our different
posts. Categories and tags can be a little confusing
to understand at first and might take a little too long to explain fully in this tutorial. So I'm just going to cover “how to add them”
but I'll also leave a link in the description below for you to check out, that explains
the correct way to categorize and tag our different blog posts. Then once we know which categories and tags
we're wanting to use, this is how to add them. So to add our post to a new category, we simply
need to click “add new category”, type what we're wanting to use into this box and
then click the add category button. Or if we're going to use a category we created
before, we'll be able to choose it here. But as this is our first post, we're going
to need to create a new one or else it's going to be left as uncategorized. So for this example as my blog post is about
building a website with Wordpress, I'm going to create a new category called “WordPress
Tutorials” then underneath we can type any tags we want into this box and then we just
click the Add button underneath to add them. So for this post I'm going to add build a
website, wordpress, and web design. Then once we've added our categories and tags,
we'll see underneath it says “add a featured image” and this is the image that's going
to appear in our list of posts on the home page. Now the featured image is optional but I definitely
recommend adding one where possible. Then to add it, we just need to click set
featured image and then like always, we're going to click upload files at the top. Select files in the middle and then search
for the image on our computer. Then we can click on the image and click open,
once the image has been uploaded, we just need to click set featured image in the bottom
right and we'll see that the image we chose is now visible in the editor. And that's basically everything there is to
creating blog posts on Wordpress. Once we're done adding our content, just like
with pages we can save our post is a draft if we're not quite ready to publish it yet
or if it's finished, we just need to click the publish button on the right for our post
to go live. Then once it's published, we can click View
Post at the top to see our new blog post and when we do, we'll notice a few other things
that make posts different from pages. Like we have our featured image that appears
at the top above our post title and under the title, we see some different information
like the published date, author and the category we assigned the post to. If we scroll down to the bottom we'll also
see a comment section where our readers can leave a reply to our post or ask follow up
questions. Then if we visit our home page and scroll
down, we'll see that our new post appears here along with the different information
like the publish date and author name and it also shows our featured image. And now that we know how it's done, we can
just repeat the process as many times as we like for any new blog posts we want to create. Now it's unlikely that you have a bunch of
pre written blog posts ready to publish at this moment in time but I just wanted to add
a few to populate this site a little more for the tutorial. We don't even really need to have any blog
posts before launching our site either. These can always come later but I would maybe
suggest trying to publish at least one, even if it's just to welcome people to the new
site and to make sure it doesn't say “nothing found” on our home page under the banner. And once we have published any pages and posts
we're wanting to add at our website, we can move on to changing our fonts and font sizes
which is going to help us to customize our website even further. So to do this, we simply need to click where
it says customize at the top of our site to open up the theme options and then we can
click fonts on the left. Then if we look on the left hand side, we'll
see it says- body font and heading font. So our heading font is going to be things
like the mean text on the banner on our home page, our site title if we aren't using a
logo or sub headers in our pages and posts and things like that then our body font is
basically going to be everything else. I personally like the default body font they
choose in here. So in this example I'm just going to change
the heading font but you can follow the same steps to change both of them if you like. So to change our font, we first need to open
up a new tab in our Internet browser and go to google.com/fonts then here we can search
through the thousands of different free fonts that Google offer. When we find one we'd like to use, we just
need to click on it and then click “select this font” in the top right. Now we can click this black bar at the bottom,
it expand the options then we're going to click into the customize tab and make sure
that all of the boxes here are checked. Then once we do that we can click back into
the embed tab. Now we need to highlight and copy the two
codes from these two boxes and paste them into a word document or text editor on our
computer so we can edit them a little. Then for the first bit of code, we're going
to click our mouse just after where it says family= and then delete everything that comes
before that. Then we're going to click just before the
first set of quotation marks near the end and delete everything that comes after that. So we should be left with something that looks
like this. Then for our second bit of code, we just need
to delete a bit at the start that says “font-family” and the two dots. Then once we've done this, we just need to
highlight and copy what's left of our first line of code and then head back to our site. If we're changing our body fonts we're going
to pierce this code into the top box labeled ”body font name” or if we're changing
our heading font like I'm doing we're going to paste it into the box labeled “heading
font name”. Once we've pasted it in, we just need to head
back to our text editor and copy our second line of code. Then if we go back to our site we can paste
it into the box underneath where we pasted the first one. So if you're changing your body font paste
it into this box or if you're changing your header font like I am- paste it into this
box. When we do this, we'll see that our font is
going to update right away and the live preview on the right. So as we can see in this example, my site's
heading font has now changed to the new one and I personally think it's looking much better. Then once we've added our new font, we can
click “Save and Publish” at the top to see of our changes and if we wanted to change
our sites body-font, we just need to repeat the same steps- only pasting into the body
font section instead. Although one thing I will say is be sure not
to use the same font for both as this is going to make our headers blend in instead of standing
out like we want them to. Then once we have our fonts changed and were
happy with them, we also have the option to change our different font sizes underneath
as well. So our site title and site description will
only be if we're not using a logo then the H2 to H6 font sizes are the different subheading
sizes we can add in the page and post editor. And then finally the body-font size and this
is basically the main text on our pages and posts. So if we click into one of our pages in the
preview on the right, we'll be able to see this a little better as we're working on it. Personally, I think the body-font is a little
bit small so I'm going to change it on the left from 14 to 16 and when I do that, we
can see it updates right away in the live preview on the right. Then as I used H3 headers on my pages, if
I change the number in the H3 heading box to 35 instead of 30, we'll see that my subheadings
get bigger as well. So we just need to play around with the numbers
in these boxes until we get exactly what we're looking for and when we're happy with our
fonts and font sizes, we just need to click publish at the top and then the X in the top
left to close out of these options and now when we click around our different pages and
posts, we’ll see that our fonts and font sizes have all been updated and our site starting
to look much more custom. Now if we look at the top of our site, you
might have noticed that WordPress has been automatically adding all of our pages to the
menu at the top and they've been added in the order we published them. There's a good chance that we'd like them
to be in a different order and to do this, we just need to create our own custom menu. So to create a menu on WordPress, we need
to visit our Dashboard by clicking our site title at the top and then we can hover over
appearance on the left and click Menus. The first thing we need to do when creating
a menu is give it a name, so I'm just going to type “main menu” into this box and
once we've given it a name, we can click create menu on the right. And now if we look on the left hand side of
our screen, we'll see a list of different things we can add to our new menu- things
like pages, posts and categories. So to add pages to our menu, we just need
to make sure pages is selected in the bottom left, now we can change it from most recent-
to view all and then go through and check the box beside any of the pages we’re wanting
to add to our menu. I'd also recommend checking the box beside
home as this allowed a link back to our home page. Then once we've added the pages we need, we
can click the “Add to Menu” button underneath to add them to our menu. When we do this, we'll see the ones that we
check now appear in a list on the right-hand side of our screen. We can also add posts to our menu in the same
way so we just need to click where it says posts on the left and change it from most
recent to view all. Then we can check the box beside any posts
we want to add to our menu and then click the Add to menu button. Although personally I'm not going to be adding
any posts to mine in this example, I just wanted to cover how it's done. Once we've added any pages and posts we want
in our menu, we can change the order that they're going to appear in and to do this
on the right hand side, we simply click and drag our different pages and posts into the
order we want them- with the order being anything we put to the top of the list will appear
on the left side of our menu and anything at the bottom of the list will appear on the
right side of our menu. So I want the link to my home page to be at
the start of my menu, so I'm going to leave it at the top of the list. Then I want my Contact page to be at the end
so I'm going to drag it to the bottom. Then I'm going to put my Services page in
between my FAQ and my About page. If this was a real website I was creating,
I'd maybe think about the order a little better but I'm really just doing this for the example
to show you how it's done. Then once we have our menu in the order we
wanted, we can also change how our page names appear in the menu without affecting the actual
pages themselves. For this example, I'm going to change my frequently
asked questions page to say FAQ instead as I think it'll look much better. So to do this, we just need to click on the
page or post to expand it and then we can change the text under where it says navigation
label to whatever we like. And for me, I'm going to change mine to say
FAQ then once we have everything in our menu the way we wanted, we can check this box at
the bottom labeled Primary menu and that's going to assign it as our Main menu. Then we just need to click to see if menu
button on the right to publish our new menu. Once it's published, we can visit our site
by clicking our site title at the top and we'll see that our menus now been updated
and our pages and posts appear in the order we chose. So now that we've assigned our new menu, we're
going to move on to changing what's known as the sidebar which is this section on the
right-hand side of our site that appears on all of our different pages and posts. And to change what appears in our sidebar,
we just need to head back over to our dashboard by clicking our site title at the top. Then we can hover over where it says Appearance
in our left dashboard menu and click widgets. Now to make this a little bit easier to explain,
I'm going to open up my website in a new tab so we can see the sidebar we're working on
as we go. So if we look at the sidebar on the right
hand side, we can see by default it has things like a search bar, recent comments, categories
and things like that. And each of these different sections are created
using what are known as widgets. Then if we go back over to the other page,
we'll see that under where it says sidebar on the right-hand side, each of these different
blocks match up with what's in our sidebar. We can click on these different blocks to
open up their settings. So if we click on the search bar for example,
we can give it a title by typing something into this box and I'm just going to type Search
bar for this example. Then if we click the Save button underneath
and head back over to the other page, we can refresh the page and we'll see that our search
bar now has a title. Then if we go back and click on recent posts
for another example, once again we can change the title if we like and we also have an option
to change the number of posts that will appear in the list. So I'm going to change the title to say “Best
Posts” instead of “Recent Posts” and then I'm going to change the number in this
box to 3 clicks save. Then once again if we go back over to the
other page and hit refresh, we'll see that it now says “Best Post instead of “Recent
Posts” in the sidebar and there are now only three posts in the list instead of five. Then we also have the option to remove any
of the default widgets we don't want and in this example I'm going to remove this Meta
widget at the bottom as it can be a little risky from a security viewpoint- seeing as
it contains a direct link to our login page. Then I'm also going to remove the Archives
widget as well as its more for blogs rather than websites. So to remove any widgets we don't want, we
just need to go back over to this screen- click on any widgets we’re wanting to remove
and then click delete. Once we've deleted them, if we refresh the
other page- we’ll see that these widgets are now gone. Then to add new widgets to our sidebar, if
we visit our dashboard again and look on the left side, we'll see a list of all the different
widgets available for us to use. So say for example, we wanted to add an image,
we just need to click and drag the image widget from the left in the our sidebar on the right. Now I'm not going to- but we can give it a
title if we like and then to upload our image- we simply click the add image button. Then like always, we'll click upload files
at the top- select files in the middle and then search for the image on our computer. Once we find it, we can click on it and then
click open the upload the image. Then once it's uploaded, we just need to click
Add to widget in the bottom right and we'll see our image now appears in the preview and
when we see this, we can click Save. We could also add some text to our sidebar
as well if we wanted and to do this we just click and drag the plain text widget from
the left into our sidebar on the right. Then we can give it a title and for mine,
I'm going to type “what we do” and for the text, I'm going to add a little bit of
text about my website. Then we just need to type whatever text we
want in the box underneath or we can paste it in like I'm going to do. Then when we're done, we can click save. Then the last thing we need to do is make
sure that our widgets are in the correct order and to do this, we simply click and drag them
into the order we want them in on the right. So for this example, I want my image at the
top. So I'm just going to click and drag the image
widget to the top of the list. Then I want my search bar under this then
my text, my list of posts, my comments and then finally my categories at the bottom. Then once we've added any widgets we want
and got them in the order we like, we can head back over to the other page and hit refresh
to see our new finished sidebar. So we have our image and our custom text,
our list of posts and categories and anything else we decided to add. And now that we have our sidebar looking good,
we're going to add a form at our contact page, so our visitors can ask us questions or get
in touch. So I've created a simple page for this example
which we saw earlier and it just has an image and some text on it with my address and phone
number- then I'm going to be adding the contact form to the bottom. So if you haven't already created a specific
contact page, you might want to do that first or you could always add it to the bottom of
your About page if you prefer but either way, once we have a page in mind for our contact
form to go on, we can get started. So as WordPress doesn't come with the option
to have a contact form built in by default, we're going to install a free plugin that
will enable us to add one. So to do this, we just need to head back over
to our dashboard by clicking our site title at the top then we can hover over plugins
on the left hand side and click add new. Now we're going to type Contact Form 7 into
the search bar in the top right and install this plugin by clicking install. It's only going to take a few seconds for
the plug-in to install and once it's done, we can click activate. Then once the plug-in has been activated,
we just need to click where it now says contact and on our left dashboard menu and that's
going to bring us to this page where we can create or setup our new form. Now one of the awesome things about this plug-in
is that it actually comes with a form already created for us and it's a pretty universal
form that's going to work for almost any website. It asks for our visitors name, their email
address, the subject of their message and then the message itself. So to add is form to one of our pages, we
just need to highlight, right click and copy the text that's in this box label short code. Once we have our short code copied, we can
click pages on our left Dashboard menu and this is going to bring us to a list of all
of our pages. Then we can hover our mouse over the page
where we're wanting to add our contact form to and then click where it says- edit to open
up the page editor. Now we just need to paste the short code that
we copied, whatever on the page that we're wanting our form do you appear and for me
that's right at the bottom. Once we've pasted in our short code, we can
update or publish our page on the right and then when we visit it by clicking view page
at the top, we'll see that our contact form has been successfully added to our site. And now that we've added our contact form,
the very last thing we need to do is link the button on our homepage banner to one of
our pages or posts and to do this, we first just need to visit the page or post we’re
wanting our button to link to and for me this is going to be my blog post called “how
to build a WordPress website”, once we visit the page or post we’re wanting to link to,
we just need to right-click and copy the posts URL and then click customize at the top the
open up our theme options. Then on the left hand side, if we click header
area and then header text, we can paste our URL into the box labeled button URL and then
click Save and publish at the top to see of our changes. Now if we click the X in the top left to go
back to our site, we can just double check that our buttons working. So when I click this button, it should bring
me to my blog post called “how to build a WordPress website”, and it does. And now, the only thing left to do is congratulate
yourself, because you’ve just successfully built your very own, professional WordPress
website, and saved yourself about a thousand dollars in the process, and I really hope
you’re feeling good about it! So we have our homepage looking awesome with
our banner and our call to action button linking to one of our pages or posts. Then if we scroll down on the homepage we
have a list of our different blog posts, with featured images. Our sidebar is also looking great with any
images, text, and anything else we decided to add. Then if we scroll back up, we have our custom
menu, with our different pages, like our about page, where we have text, images, links, and
whatever else we added. Then we also have a contact page with our
form it so people can get in touch with us or ask questions. And without us needing to do anything else,
our website’s also 100% mobile friendly. So if we change the size of our browser window,
or visit our website on a mobile phone or tablet, it’s basically guaranteed to always
look amazing! And that’s it…. We’re now at the end of this tutorial! If you have any questions, feel free to ask
them in the comments below, and if you enjoyed the video, please give it a like here on YouTube
to show your support, and consider subscribing to the channel for more videos like this one
in future! I also post weekly WordPress tutorials that’ll
show you how to further modify your new website, so make sure you click the bell icon to receive
notifications, and if you’re still in the mood to keep learning more cool things we
can do with WordPress. There should be a playlist on screen now that
includes some of my best, and most popular WordPress tutorials. Then once again my name’s Martie from letsbuildwp.com,
and thank you very much for watching my video.
