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.
For more infomation >> Serbien: Putin in Belgrad als Held begrüßt - Duration: 3:03. 
For more infomation >> Adele Musica Romantica (20 Grandes canciones 2019) - Duration: 52:18. 
For more infomation >> Phim Liên Quân Hay Nhất Tập 5 |Tel Annas Tái Xuất | Tài trợ bởi NoxBrowser | OD Hông - Duration: 15:12. 
Không có nhận xét nào:
Đăng nhận xét