How to Make a WordPress Website (Step by Step) – 2014

How to Make a WordPress Website (Step by Step) – 2014

Don’t get cut into pieces by web designers. Let my friends at show you how to get everything for virtually nothing. Start of tutorial – How to make a website for
your business, step by step. Here is exactly what your website will look like if you follow along with this video, in about an
hour. We will be using a free platform call WordPress. You’ve probably never
heard of it but here are some well-known users who
currently rely on and trust WordPress for their websites.
You’ve got CNN, New York, Times, Forbes, UPS, Sony, Jay-Z Katy Perry, and a bunch of other well-known names who all rely on WordPress. Now we’re
going to build a website on the very same platform these guys are
using. Let’s go through some of its features. As you can see it looks clean, modern, professional, and of course we will
customize all of the information on it for your business. It will have nice drop down menus which you
can lay out in any order you like. It’s really easy, and no coding involved. You just need to drag and drop, so
I’ll show you how to do that. I’ll also show you how to put in a dynamic Google map like the one you see here. This is great if you have a shopfront. We’ll also make a contact form which your
customers can fill and the details will land directly into
your email inbox Here is another dynamic Google Map in the contact area of your website. On top of that we’ll also help you use
social media with social icons, as you see here and here’s the Facebook
Like Box where users can like your page directly
from the website itself. To top it all off we’ll show you how to implement the
image slider you see here and all of this step-by-step, from beginning
to end. Just follow along. As you can tell it’s a sleek, professional website design
that any web developer would charge at least a couple thousand dollars to
implement for you. However we’re going to show you how to get
all this for virtually nothing. It will be easier than you think so
don’t worry. Plus if you need any clarifications along the
way don’t be afraid to ask in the comments below or by email. There are probably ten other
people with the same question so don’t be afraid to ask in the
comments and we will answer. Let’s begin! Now an important question for you is how much is all this going to
cost you. Firstly your domain, and that’s basically your address on the
Internet WWW dot your business name .com that’s up to you to decide, it will be
about eleven dollars for a whole year. Secondly web hosting, at about five
dollars a month. Hosting is just another way of saying a
computer where all your website files are stored and available for access 24/7 at the
main without hosting will just be a blank page so these the two essentials that you do
need to run a website. Thirdly, web design, which usually cost
thousands of dollars but we will show you how to get that for nothing. And full website setup and configuration. Once again web designers and web agencies
will charge thousands for these two items and that’s what this tutorial is all
about, to show you how to get all of this for virtually nothing now here’s an
overview I’ll to what we’re going to take you
through in this video step-by-step firstly getting at the main
will show you how to do that then getting when posting then
installing your website and also the web design and Lhasa ball your website set up and
configuration I don’t worry if this sounds a bit
complicated everything’s gonna be explained in detail it’s actually much much simpler than you
think you then you’re probably thinking right now so don’t worry at all you don’t need to
know anything technical all have any knowledge of her reading or
any of that stuff it’s going to be very straightforward So let’s start with the first thing on
the list, getting a domain. I’ll just need you to open up your web browser and go to This is actually an excellent domain name registration
company, and to be honest, I’ve got about twenty-five
to thirty domains with them. And it’s just very easy to manage a
domain within your account here. So, that’s why choose them, and anything we recommend in this video are things that we actually use
ourselves, and have been using for a long long time. Just wanted to make that clear. First thing
you need to do is make an account. So, just click the
sign up button there. Enter in your desired username and your password, your first and last name, and your email
address. Then, if you want to stay subscribed to
the newsletter keep this checked, or you can uncheck that. Click Create Account. Now
after you’re logged in, just scroll over to domains, and we want to register a domain. So, just click
there. In this box here, just enter the dot-com that you’re after.
Have a think about what you want for your business, and remember this is going to be your
own personal address on the Internet. So, have a think
about it. For the purposes of this tutorial, we’re going to register a domain
called jimsphysio .com. Firstly, we need to check if it’s
available. So, we just enter a domain name there, and
click the search button. As you can see, jimsphysio .com is available. So, now we
can go on and register that domain. So, hit add to
cart. Select your duration of registration. For now, we’ll
just leave this at one year. That’s fine. Free whoisguard is basically domain
privacy, so nobody can see your name or email address under which
your domain is registered, and by default we’ll leave that one year. It’s free for the first year, and two dollars
and eighty-eight cents for every year thereafter. We’ll leave that for now. So, just scroll down and check out. When you get to this page just fill out the details that are
required, your first name, last name, street address, city, state, postcode, country, email address, and
phone number. Then, just click on the copy information
from registrant contact. That’s the registrant contact
and sees will copy your information into all these fields below. Then, hit save and continue. I’m going to pause this
video while I fill all that information out, and here
we are. All the information is filled out as required. I’ve just had time to the first
administrative contact fields and then just click on this copy from link there. So, it just copies the
information across. Save and continue. When you get to this page
leave the automatically renew before
expiration checked. Leave enable whoisguard checked, and leave automatically renew whoisguard checked. Leave that as default. User our free name servers, we’ll change that
later on, and don’t change any of these fields either. Then hit save and continue. Now you’ve
got the option of paying with a credit card or paying by PayPal. I’m going to pay for this domain by
credit card. Once again, I’ll just pause this video while I fill out my credit card
details. After that’s done, just hit the Save and Charge button, and
it will process your order. That’s done. Congratulations, you now own your very first .com domain name. So, that’s it for getting a domain name. We
can take that off the list. Completed. So, the next thing on the list is to get a web hosting account. Also,
keep in mind there is a web page link to the description box below this video. This is very important because in the
future if we need to make any updates or clarifications about anything in this
video, it will be provided on that page. That’s
just because we can’t edit this video once it’s uploaded to YouTube. And so, if a
text box does pop up, please read it. Have a
look at that web page for updates because it would’ve
been placed there by one of us to clarify something or advise you of
an update. So, I’ll just make a note that here. Check description for updates. For web hosting, we use a service called Host Gator. Just go to your web browser and type in Host Gator. H-O-S-T G-A-T-O-R .com. Now, we’ve been using this host
for a long time. I personally have a lot of websites hosted
with this company. Basically, they’re just one of the biggest
in the world. They’re very reliable, and very very
cost-effective. If you have a look here, they’re hosting
over nine million domains as of right now. Not just that, their
support is excellent as well. I’ve never had an issue in the seven or eight
years I’ve being running websites, but if you
do, their live chat is open 24/7 and they’ll help
you with any problem you face. To sign up for your
hosting, just scroll over to the web hosting tab. There
are three plans they offer. Hatchling, baby, and business. They’re basically all the
same, except hatchling only allows you to host
one single domain within one account. Whereas baby and
business will allow you to host unlimited number
of domains, and since this is your first website the
hatchling plan will be more than enough. Clicking on the drop down box will just
show you their rates for three years, two years, a year, 6 months, and
monthly. Normally, I subscribe for three years at
a time. It’s got the best rate, but this is a sample website that I’m building for this
particular tutorial. So, for the time being I’m going to
choose one year, and I wouldn’t recommend choosing six months or monthly because it is much more
expensive. And all in all, if you’re not happy with
Host Gator, I actually forgot to mention, I was going back here and show you. They do have
a 45-day money back guarantee, and that’s no questions asked. If
anything does not go right or if you’re not satisfied with anything
to do with this hosting company, they will refund you in full. Regardless if you subscribed for
a year, two years, three years. Within the 45-day money
back guarantee period, they will refund you. So, you can rely on them, and they are
very trustable. I’ll just go back to the order page. I’ll subscribe for one year. Click order
now. We’ve already purchase a domain, so hit the “I already own this domain” and
enter your domain name that you chose. In our case, it was These upsells over here are not
necessary, unless you really want to get the .net,
.org, etc. but they’re not necessary. Just
double check the plan and the price per month. It does say twenty percent off, but
hold on a second. I’m just gonna show you how to get an even bigger discount of 25 percent off. Just scroll down and de-select any of these add ons that are checked. We don’t need any of
those, and keep going down, and this will be your total. Right now it’s 66. Delete this coupon code, whatever is in that box there, and enter this one
instead. HOSTMOST25 Double check that spelling or else it
will not be applied. HOSTMOST25 and click Validate. You’ll see that the total due has changed. It’s lower now
because it’s now at 25 percent off discount coupon. Now go up, and complete the rest of the details that are
required. Once again, I’ll pause this video while I do
that. Once that’s done, just scroll down. Tick the “I have read and agree to the
terms and conditions” and click Create Account. So you’re aware, I
may get a small affiliate commission for the referral,
which basically goes towards helping us produce these free tutorials. If you want to sign up with another host
of your choosing, then feel free. But just so you know, all the steps from
here on in to building your website will be done
from my own HostGator account. So, if you sign up with another provider you
may or may not be able to follow along. Once that’s processed, you will receive a
confirmation message on your screen, and you will also
receive a e-mail in your e-mail address that you
specified when you signed up for that hosting account. It basically gives you an outline of the
order, your user name, the domain you registered, your password, and a few other details which
I’ll run through with you. For now, we can tick off our second step, get web hosting. Also,
just check the description under this video for updates because if
there has been a change, or we recommend anything else, then that will be
detailed in the web page below. So, that is now complete. Our next step is to install our website and the web
design. So now we’re getting to the good stuff. To do that, first we need to link up our
domain that we bought with this hosting account. Go back to
your namecheap account. Enter your login credentials and login. Click on review the number of domains in your
account. Here you’ll see your domains pop-up. We’ve obviously got two, so far. Our
original eMediacoach .com, and the one we just
purchased jimsphysio .com. So, click on your domain name. Go to
transfer DNS to web host. Scroll down and in this first box, you will just need
to copy and paste this first name server. It’s copy, paste. And the same for the second name server, and hit Save Changes. Okay, that’s updated. All we’ve done there is to point our
domain to our hosting account. Our next step is to lock into our hosting account. So, just click on
that link there. Control Panel link. Copy and paste the username and password. Click Login. That will direct you to what is known as C-panel or the
control panel. What we’ll do now is install our website.
As mentioned before, we’re going to be using WordPress. Scroll down and find Fantastico deluxe under the Software Services tab. Click on that. Click on WordPress, and we want a new installation. Your domain should appear in this field
here. In the next field, install in directory, make sure that’s
blank. And that is extremely important that there’s nothing in that field. Now
select a administrator username. I’m just going to use
admin, and select a password. For this, I’ll just use “jimspassword.” Please write these two bits of information
down because they’ll be extremely important when we are logging
in to our website. Admin nickname, you can leave blank.
Admin email address, we’ll just enter our email address. Site
name and description up to you. We’ll just enter
Jims Physio for site name. Physiotherapy for sports-related injuries. Don’t worry too much about that.
We will be able to edit later. Then, click on install WordPress. Click finish installation, and there you go we’ve installed
WordPress on our website. To login, we’ll need to go to this URL here. Your website .com slash W-P dash admin. Just write that down or keep
note of it. So, we’ll click on that. As you can see,
nothing’s come up yet. The reason is that when we changed our
name servers in our Namecheap host, sorry, in our Namecheap domain account to point to our hosting account.
These changes may take a while to update. This means
it could take five or ten minutes, or it could take about one or two hours. So if your site isn’t
loading up yet, that’s fine. Just give it a while. Try maybe every half an hour or an hour.
Soon enough it will load up. I’ll pause this video now
and come back when it’s ready. Welcome back! That didn’t take too long
for me, only about 20 minutes. The best way to
refresh the screen is to hold and control and F5 at the same time. That’s actually
a hard refresh. Just a little tip there. You’ll get to this
WordPress login screen. All you need to do now, enter your
username and password that you used on the last screen when we
set up — when we installed WordPress, and hit
login. This is what your WordPress Dashboard
will look like. It’s basically the control panel and the engine to your website. If you
want to see what your site looks like right now, you
can absolutely do that. Just open it up in another tab, and that’s what it looks like right now. Just a plane page, but it’s live and up and running. Anybody can access
that right now. The first thing I like to do when I install a fresh version of
WordPress is to do a bit of housekeeping. So, just go to the
posts tab or posts. Trash that hello world post. It’s just a default post
that comes with every installation. Hit trash and delete permanently, and do the same for the default page. Then go to settings, general. Here you can update your
site title or tagline if required, but what I need you
to do now is to just enter W-W-W dot. Just right there where I’m doing it, and scroll down. Click save changes. That will then prompt you to log in
again. Then, we’ll go down to Settings and Discussion. What we want
to do here is restrict visitors from posting comments that appear on our website. So, what you need to do is untick this box here, “Allow people to
post comments on new articles.” Go down. Tick this box here, “Automatically close comments on articles
older than…” Put one day, and finally, tick off the box that requires an administrator to approve any
comments. Then, scroll down and hit save. Next, back to Settings and permalinks. Now, I’lll just show you what a
permalink is. I’ll make a sample post quickly. Don’t worry about following on, just
doing this as an example. And I’ll just hit publish. When I view this
post on our website, even though the title of that page or post here is called, Our Services, the URL extension there is a P equals six. So, what does is
allocate a random page number, and this is not good for optimisation
purposes because search engines cannot identify what our
page is about, and therefore it’s a disadvantage to
have this permalink system. So, what we need to
do just go back to a permalink page, and
click on this one here, Post Name, and click Save Changes. Now, if I go back to our post, and just update that, you’ll see that our page here has changed its URL. And if I refresh that, it more
accurately reflects what this particular page is about. So, it’s
better for search engines, and it’s better also for users. It is now time to install that professional modern website
design that we showed you earlier in this video. To do that, please click on the link in the description below this video.
That will actually take you to a page on our website. I’ll just show it to you here. There it is. The first thing you need to do is go to the useful downloads subtitle, and click
on Vantage Theme Download. Then, save this file onto a location which you can easily
access. I’m going to save it on my desktop, and
just wait until that finishes downloading. Then, we go back to our WordPress Dashboard. Click on
Appearance, Themes. Install Themes. Upload. Browse, and just find that file that we downloaded is right there, and select Open. Then, click Install Now. What this will do is install this design onto your current
WordPress website, and then activate. We’ll just dismiss this message for now. If you just want to see what change that
made to your website, you can have a look. That’s actually your
website right now. It looks very different, and as you can
see we’re getting closer to what we promised you only in this
video. We’ll just close that for now. We can now tick off number three on our to-do list, Install website and
Design. That’s all done. The rest of this video
will be dedicated to setting up your website, and configuring its settings
just so it looks exactly the same as what we promised at the beginning of this video. Go back to the dashboard. Now, the site has been
installed, I’d like you to make a welcome page that shows up on the home page of your
website when there’s a visitor. Go down to pages and add new. Welcome. Now, it’s up to you what you
want to put on this front page depending on your
business, and I’m just going to use a bit of sample
text. I’m just kinda copy and paste it from
another screen I’ve got here. Now one more thing, just make sure this tab is on visual, not on text. The text tab is
if you need to put in any code, and I’ll show you that later. We’ll need to use
that, but for now go to the visual tab, and enter your text. I’m just going to paste mine in. As you can
see, you can bold anything you like. Italic, etcetera, etcetera. So, that’s pretty
self-explanatory there. After you’re done entering your text, hit Publish. Once that’s done, this new page will be live on your
website. So, let’s just have a look at it now, and
there it is. We’ll just close that for now, and go back to the Dashboard. If you go
back to your website and just hit the refresh button, you’ll see that the front page of the
website still looks exactly the same. It was just the
Welcome page that we just made that look different.
So, what we’re going to do now is set that Welcome page to be the front page on your site. So, go back
to your Dashboard and go to Settings, Reading. Hit that button there, a Static page, and we want the front page
to be the welcome page. Save changes. Now, if we have a look at our website. Refresh that.
You’ll see that the welcome post is showing up on the front page under
this slider image. So, we’re getting one step closer. Next,
you’ll also notice that there are some random bits of information in this sidebar here, and we
want to get rid of that and put in our own custom sidebar. So, I’ll show you how to do that. In Appearance, Widgets. Under the sidebar heading, you’ll see there are a
number of widgets, which we do not need. And they correlate to what’s on the side
right here. So, just click on the down arrow and delete each one of those. And if you go back to our site, refresh,
you’ll see that’s disappeared. There’s no sidebar, but don’t worry. We’re going
to put in a custom sidebar with a Facebook Like box, and a map, and perhaps even a
phone number. It’s really up to you. I’m just showing you
what’s possible. You can put anything you need on your
side bar, and this sidebar will actually be
consistent across all pages on your website. So, it will remain
a constant across all your pages unless you
choose otherwise. So, just keep that in mind. Now, we’ll show you how to install a custom
sidebar. Firstly, I’d like you to add a new plugin. A plugin is basically an add on to your
WordPress website, and in this case, what we are going to add is a visual
text editor to make updating the sidebar easy for you. I’ll
show you that. Just type in Black Studio, and search. This is the one we want here, Black Studio TinyMCE Widget. Install
now. Okay. Activate plugin, then head to Appearance Widgets. Under this
sidebar widget, I want you to hold down your
mouse and drag this Black Studio TinyMCE right there. And see how that’s a visual
editor where you can bold, italic, or do
anything else you want as you would in a post. If you weren’t using that, you would be
dragging this text editor and you may have to use a little bit of
code. So, it’s just a little bit more complicated. So, that’s why I love this Black
Studio TinyMCE Widget. What I’m going to do is enter a few contact details because this sidebar widget will be
constant across the whole website. It would be good for any customer to
easily find contact details no matter where they are on our site. Phone number. Address. And hit Save. Now, we just refresh our website. We have that sidebar right there. So, let’s now
continue. I’m going to add a Facebook widget, and I’m also going to add a small map in there. It’s really up to you what you
want to add. So, I’ll just show you how it can be done and then you can make that decision. I’ll
just go back to the widget section. Drag in another Black Studio TinyMCE, and every time you drag one under this
sidebar heading, it will appear in a sidebar. And
if you want to change the order of appearance, all you have to do is drag and drop.
It’s as easy as that. No coding necessary. So, here we’ll add a Google Map. For a Google Map, we’ll just need to open up maps in the browser. I’m going to just put in some
dummy data. You’ll have to put in your
actual address if you want customers to find you on the map. Let’s see. Okay. That’ll do. Now to implement that on your site. Go to this
link over here. Click on that. Click on
Customize and preview embedded map. That will allow you to set up custom width and height for your map. And since our
sidebar isn’t too wide, we’ll need that. For now,
let’s try 300 by 300, and see how that goes.
Scroll down and copy all of this HTML. Right click Copy. Go back to our
sidebar. We shouldn’t be pasting this under the
visual tab because that will not carry the HTML through. We need to hit
the HTML tab into this code. Click Save, and just have a look at what that’s done to our site. There you go. That map is live and its dynamic. Visitors can easily find you based on
your address. Now I’m going to install a Facebook Like Box in a sidebar. To do that, open up a new tab and just google Facebook like box, and it should be that one there. For the purposes of this example, I’m going to use a Facebook page called, The Sports PT. Obviously, you would put your own Facebook
page in this section. I’ll select a width of 300 and a height of 300, and
leave everything else as default. This is a preview of what the box will
look like in your sidebar. Select get code. Copy this first box, and paste it into a new sidebar widget under the HTML tab. It’s important
that it’s pasted under the HTML tab, otherwise it will not come up. Then, go back and copy the second box, and paste that in as well. Hit save, then go to your website. Refresh, and we can see what
it looks like. And there we go, our Facebook box where your visitors can easily like your page
from your website. It’s really great to integrate social
media with your website. Now I’m just going to show you how to change
the order of anything on the sidebar. Going back to the Dashboard. all you need to do to change the order, say you
want the map on top, and the Facebook Widget underneath that. It’s as
easy as dragging and dropping. Once we refresh your page, there you go. All done. So, as you can see that
took no knowledge of any technical coding. It was just a lot of
copying and pasting and dragging and dropping. Very very
simple stuff. What I’m going to do now is make this
home page a little more aesthetic. I’ll remove these contact details, and I’ll add a bit of text and perhaps a picture over here. And of course, you’re welcome to
do anything you like. It is up to you and your business, what
you need to display. I’m doing this for demonstration
purposes, so you know what to do when it comes to it. So, I’ll just delete this contact widget, which contains our
phone number and address. Then, I will edit the page. Click on the page you want to edit. Scroll down to where you want your image
added. Click Add media. Click Upload files. Now you can basically, drag and drop any file that you want to, sorry, any image that you want to
place in your post. Once that’s uploaded, ensure this box here says full-size, and insert into page. And that will come
up in our post there. Click Update. Let’s refresh your page to see what that looks like. So, as you can
see, that contact phone number address is gone, and we
have this new picture here. If you want to change the size of that
image, just go back into this section here. Click on his tab. Edit image. That says
70%. Update. Update. Now if you refresh this page, you’ll see that
the image has shrunk, and I’m just going to go back and
change the image to its original size. To do that, click on the little tab. Edit. Go to Advanced Settings. Original size. Scroll down. Update. Update. And if I refresh that screen, as you can
see, it’s back to its original size. You can probably get a good feel for your
website now. It’s starting to take shape, and look a lot like we promised. So,
you’re on the right track. Keep going. There’s not a lot left to go. Let’s now go back to our Dashboard, and build a Contact Us page. On the Pages, add new. You can put in any details
that you need, and perhaps even an e-mail address. Now, I’m going to show you how to
implement a massive Google Map on this Contact Us page. So,
that your customers can easily find your business. This is important if you’ve got a
shopfront, so it’s easy for people to find you. To do that, go and open another tab. Go to
Google Maps. Now enter your address if you’ve got a street address.
I’m going to use some dummy data as per usual. Click on the link, “Customizing preview embedded
map.” Now, because this page is going to be quite wide, we’ll make a pretty big map.
Let’s try 700 x 350 We’ll leave it as is. That’s a preview of it, right there. Go
down. Copy this code into your widget area. Before you paste, click on the text tab because if you paste any HTML code in the visual
tab, it will not come up. Enter past the data there, and paste. Update. You can see what your updated page looks
like now. And there you go. There’s a Contact Us page with a big
Google Map, and on this page here, it looks very messy
with the sidebar because you’ve already got a map, which
comes up on every page that you create. And so, what I like to do here is to go back into the edit screen. See where it says, template? Instead of default template, which
includes the sidebar, I like to choose the full width page.
Just for the contact page, so select that. Hit update. Refresh your
screen and you’ll see that the side bar disappears, and all you’ve
got is the contact details. And now you can make
the map even bigger if you like. Let’s try a width of 1000 by 400. And delete that and paste the updated code. Update. Refresh our page, and there we go. There’s a massive dynamic Google Map. This is excellent
because it creates a really good user experience with your customers. It’s easy for them to find you
and just by implementing this map, it makes your
website look up to date. Modern and professional, and that’s a big
reason I like implementing one of these on the contact page. Another cool feature I’d like to show you is a contact form, wherein a customer
can fill in a quick form, which will
instantly be delivered to your e-mail address. To do that, head back in the
dashboard. Go to plugins. Add new. We want a plugin called Contact Form 7. That’s the one there. Install and activate. Go down into the settings. Add new form, and let’s just title it, Contact Us form, and save. Once you’ve done that, scroll down and double check this e-mail
address here. This should be your email address. One that you have access to
because any request that is filled out by a customer through
this form will be sent directly to this email address. If that’s fine, scroll up. Copy this code in brackets. Go back to your contact page, and in the text tab place the form where
you’d want it to appear on your website. So, this
will be just above the map. Update, and let’s have a look at that. There you go. That’s your contact form. So, it depends on what you want on your
contact page. That’s just another option. Let’s test it
out. This is from a customer’s point-of-view. As soon as the customer sends that through, when we refresh our email, there is right there. The customer will have entered their actual
email address, so you can directly reply to that query. And there you are, a simple yet effective
contact form for your website. Welcome back everyone. Let’s just have a quick look at
what we’ve achieved so far. Here’s our website. As you can see, we still
have the default logo, and the default headings. As well as the default slider images,
however, we have completed our home page, our welcome page, implemented a Google Map, implemented the
Facebook Like Box, and we also have our Contact Us page. The next thing we’re going to work on is the actual content on our website.
Obviously, right now we’ve got a physio website, but we haven’t actually got
any information about physiotherapy, or the
products and services we offer. So, that’s the next thing we’re going to
work on. What I’d like you to do is go back into your WordPress admin account. So, that’s basically your
domain name .com forward slash W-P dash admin. Ours are already logged in, so it went
straight in. If you weren’t already logged in, it
would ask you for your password. I want to create a bit of information about our
services. So, let’s go down to Pages. Add new. We will create a page called, Our Services. I’m just going to enter some
quick dummy text in here. And click publish. The next thing I’m
going to do is create a new page for each one of these
services that we offer. So again, add new page. And I’ll put in some dummy text, and perhaps even add a picture to go with it, and publish. I’ll do exactly the same
thing for the other three services that are listed. And I’ll also create a new page for Frequently Asked Questions, which a lot of businesses have on their
website. So, maybe they can be in dot point with the answers below. You get the point. Now that we’ve created those pages, if we go to our website, you’ll notice that
they’re all listed in the top menu bar and it looks very messy. What we’re going to
do now is organise this menu bar. To do that, go back into your dashboard.
Under Appearance, go to menus. Enter a new menu name. In this instance, we’ll call it the Header.
Create menu. The primary menu we’re going to use is the Header, so select that. Save. Now
scroll down. You’ll notice the pages we created are listed
here. The ones that you want in your menu, just
tick them off. So, we’ll choose all of these. Add to menu. On top of that, I will create a menu for the Homepage. So, I’ll just highlight the Home page URL. Enter it there in Custom Links. Label it as Home, and add that to menu. Press save menu. Now, if you refresh the site, you’ll notice nothing’s really changed. But now here’s the interesting part. All
you need to do is drag and drop these items according to where you want them in your
menu. So, Home first. Frequently Asked Questions we’ll put second last. We’ll put Services
after Home, and all of these items here, 1 2 3 4, are all part of Our Services. What
we could do with this is form a drop down menu. Basically, drag it so that there’s a slight indent after the Our Services section. Same
for the other ones. This is basically a sub menu under the main menu. So, if we click, if we click Save menu now, and then
reload our website, now this looks awesome. We’ve got a professional looking
website with a professional menu, and if we
scroll our mouse over our services, the other drop down
menus appear. And each one of these link to the specific
page which we just created. It’s quite easy and
quite straightforward. Once again, if you want to change the order, it’s as simple as dragging and dropping.
Just keeping in mind that if you indent something, it will become a submenu of the item above it. So, we’ll keep
that as it is. Physio, Chiropractic, Remedial, and Sports rehabilitation. Save menu. Go back to your home page, and there it is. Our Services, Physio, Chiropractic,
Remedial Massage, Sports Rehabilitation, and it’s absolutely as easy as that. It is
so simple, yet so effective. That concludes the section about setting
up your own content and also the menus. So, feel free to
think about and add whatever is needed for your
business, and obviously use what we’ve given you just then as a guide to
setting up your pages and your menus. Now let’s go
to the next section. The next thing on our to do list, at the bottom of the page I want to
create four boxes. One, which has a Social widget, then
another Contact box, then perhaps a About Us box, and
finally a Disclaimer. It just adds a bit of depth
to the site. So, I like doing that. It’s up to you
whether you want to or not, but here’s how to do that. Go back up
into your Dashboard. Down to Appearance, Widgets, and we’ll use this Footer over here. So, drag the
Black Studio over there. The first one
we’ll call, Connect with Us. Save. The second one we’ll call, Contact Us. About Us, and finally a Disclaimer. Just so you
know what that will look like, I’ll refresh the page. And there it is there, the four boxes. Now we can put whatever
information we need in each of those boxes. And you’re free to
decide whether you want to use this or you don’t. It’s totally up to you. Actually, one edit I’m going to make is I’m going to
delete this Connect with Us box, and use this instead, Vantage Social Media.
And drag that up there. Title that, Connect with Us, and here you can enter your Facebook page URL. I’ll just enter Facebook .com for
now. You’ll obviously enter your own URL, and you can enter your Twitter feed URL forward slash hashtag, and your Google+ URL. Tick the open in new window box. I’ll show you what that looks like. There you go. At the bottom of the page
we’ve got a Facebook icon, a Twitter icon, and a Google+ icon.
So, you can connect each one of these with your own social media account,
and when a user clicks, it will take them to a new page. It won’t
open in the same window. So, they can come back to your site and
keep reading. Okay, let’s fill in the details for the other boxes. Contact us for more information. Please call or e-mail. Save. About Us. Save. And, there you go. If we refresh the page now, you can see
that our website looks more complete with these little footer boxes, and it just gives the user a little more
information, and also adds to the overall professional look and feel of
your website. So, feel free to use them however you
like. Once again, the order can be changed just by dragging and dropping like so. There you go. It’s as easy as that. So, the next thing we’re going to work on
is to change these images to put our own images up there.
Now a couple of ideas to get your own images
would be to take a couple of photos of your shop or your products or services.
Whatever you think will be fine. The first step is to just click on the
link below this video. It will take you to a page on our website. We’ll need to download the MetaSlider
plugin. Once again, this is not something I’ve
developed. I’ve just made it available to download off my website. So, click on that. Save file. I’ll save to
my desktop. Go back to your dashboard. Click on plugins. Add new. Upload. Browse, and we want to upload that MetaSlider plugin. Open, and activate. After that’s done, this MetaSlider tab will become
available. So, click on that. Create your first slide show. In the settings on
the right hand side, change theme to Vantage. Change width to 1080. Leave the height as 300, and click Save. If you scroll down, you’ll see there are a
number of settings, which i’m not going to go through. But one common one that you may want to alter is the slide delay. That’s the
amount of time that each slide is displayed before the next one. So, go back up the top and add slide. Upload, and here you can drag and drop your images from your computer. So, I’m just
going to select them, which are on my other screen and drop
it in there. Wait until they’re all up there, and click Add to slider. Once again, click Save. Then we need to go into Appearance, Theme settings, Home. In the drop down menu, you’ll see the new
slider come up. It’s the one we’ve just created, so select
that. If you enter a different name for your new slider, that would come up. And click Save Settings. Now, let’s have a
look at our website. There you go. Easy. That looks absolutely perfect. If you want to change the order of the
slides, simply go back into your dashboard. Click the
MetaSlider tab, and drag-and-drop these wherever you want, and then hit Save. Similarly, if you want to change the height, you can do that. For example, we’ll change this
400. Save. Refresh our website. As you can see, the slider height has
increased, and the slides’ order has changed as required. There you go, and that’s the website so far. The next thing we’ll do is add our business
logo. I’ve got three logos that I will make
available on our website after this video. I’ll just quickly show them
to you right now. There’s the first one, second, and third. I’ll make these three
available for you to use after uploading this video. However, feel
free to get your own logo made. Just keep in mind
that it must be a transparent PNG. That means it must
have a transparent background and not a white background. Otherwise, the
color on our website, and the background of your logo might be
slightly different. And you’ll see a box around it. That’s why it needs to be transparent. I’ll
show you what I mean in just a second. I’m going to use a service called, PIXLR. So, just go to Google and type in P-I-X-L-R .com, PIXLR editor. Open image from computer, and I’m just going
to use the first sample that I showed you.
All I need to do now is add our business name. So, Jim’s Physiotherapy. I’ll select a different font. That will do, and decrease size. I might just italic that as well. Also, you can change the colour. Let’s
go with dark green. That will do. Press OK. Okay, and you can now crop this excess of here. So, go over to the crop tool. Select your
area you want to keep, and hit enter. Now, you see how the background has squares. That means that it’s a transparent
background, as opposed to a white background. A white background will look a bit
odd on the website when you upload because the colours won’t be exactly identical
therefore you’ll see a box around the logo. That’s why a transparent
background is essential. So regardless of if you want to use one
of these templates, or if you going it your own logo made, just ensure that it’s a
transparent background. Otherwise, known as a transparent PNG. So,
I’ll just save this logo now as a PNG transparent, and, I’ll save it on my desktop. And that’s done for creating the logo.
Now, just go back to the Dashboard. Appearance. Theme settings. Logo. Choose image. Upload files, and you can drag and drop the logo we just created from your computer
that we’ll upload, and then click Set Logo and Save Settings. Now if we have a look at our website, that should be updated, and there it is. As you can see, it blends in perfectly
with the background colour of this part of the — of this section of our
website, and that’s it for creating your logo. Now, our website is pretty much finished! I’ll
quickly show you a couple design options that you have. If you go to Appearance, Theme settings. Under Logo, the Header text here appears on your website over here. So, you can change that however
you like, or you can delete that completely. Under layout,
if responsive layout is enabled, it will basically scale the layout for
smaller screens. So, to show you what I mean here, I’ll just drag this screen. See how everything adjusts to cater for a smaller screen size
including the menu and also images? That’s particularly
helpful if people are viewing your website from a mobile device. Layout bound, currently it’s set to
full width. If I was to set it to boxed, this is what it would look like. There’s obviously a border around the
website, so it’s up to you whether you want the wide layout or the boxed layout. And, of course if any widgets do break the boundaries, you can always go
back and reduce its dimensions as I showed you earlier in this video. For now, I’ll leave this as a
full-width layout just due to personal preference. Now, skip to navigation. If Sticking Menu
is enabled, that will hold the menu regardless of where
you scroll on the website. See how we scroll down there, this menu remains on top. I
personally really like that feature, it looks really nice and it’s really good as far as user experience goes. So,
I’ll leave that selected, and if you were to deselect that,
obviously when you scroll down, it would not move along with your screen. The Search in Menu option, if that is enabled, this little search
icon will become active and the user can search for any
information on your website. Otherwise, you can disable that and that
will just disappear. The Display Scroll to top option, what that does is put a little icon on the bottom right
hand side of the screen, so that no matter where you are on
the screen, you can click that to go straight to the top
of the website. And, that’s it all the other options are irrelevant to
our website. So, we will not discuss that in this
tutorial. Before we wrap up this video, I’m just
going to make a couple small tweaks. I’m gonna add a social widget up the
top as well, and I’ll also change this image around just out of personal preference. Under Themes, Widgets. And obviously you would put in your own
social media pages once you set them up. And there we go, that looks a lot better now.
the next thing I want to do is change the image on our welcome page. All done! That’s all there is to it! We’ve just helped you build a website from scratch, from beginning to end,
step by step. And it’s the kind of web site that
you can easily pay thousands of dollars for via web agency. So well done on getting through to the
end. Don’t forget to subscribe to our channel! and finally we’d love your feedback on a
couple things firstly do you have any suggestions
for us and what videos would you like us to
make in the future also did you find this particular video
easy to follow along? And is your website up and running right
now? Please tell us in the comments below. If
you have any other questions don’t be afraid to contact us through
our website, or ask your questions in the comments below, because the chances are there a number
of other people who have the exact same question. We’re currently in the process of
putting out a bunch of tutorials to help your business So therefore don’t forget to subscribe
to our YouTube channel by clicking on the subscribe button, and
watch our other videos. Thanks very much for watching.

100 thoughts on “How to Make a WordPress Website (Step by Step) – 2014

  1. This is a great resource! I have built a website and really appreciate your work to allow me to do it .I know next to nothing about IT and this guide is excellent. I followed the step by step instructions and it is easy to follow. I did have a few problems , however I contacted the guys at emediacoach ant they replied to my email and assisted me through the problem. sorted now MANY THANKS!!

  2. I am have a difficult time with the Contact Form Page. I sent an email as a test run, but it is not showing up in my email. What am I doing wrong. Yes, I checked to make sure it was the correct email address 🙂 

  3. I have a degree in CS and WP is a PAIN to work with without a decent guide. This was the best tutorial I have seen yet, you guys ROCK! Please keep up the good work, I have bookmarked your web site and will definetly be making use of more…Thanks!

  4. Hi, Great Tutorial, Please advise how to remove " Call me! Maybe? " on the Vantage Page. It is on their current Install

  5. Keep up the good work eMediaCoach. Just an update. I could not find the Black Studio Tiny MCE widget even after installing the plugin. After further investigation, I found that it is now available as 'Visual Editor' in the widgets section. 

  6. Great video job well done will be making my website by following your steps
    For my business that you so much .
    I was beginning to get stressed out with coming out my pocket with thousands
    Of dollar to have someone to build my website they make it seems so hard
    And if like its a lot of work to be done .
    Thank you so much you have been a blessing to me

  7. Hi, eMedia Coach.I want to tell you than your video is excellent, only for suggestion, if you accept mine is to show us how you prepare your work to build your website.Example: you drag photos from your PC without showing us how you get them.
    For that, I guess there are some preparation before starting building your website. Thank you.

  8. Amazing web site tutorial!!! Thank you so much eMediaCoach! Using this tutorial I created my own website and it's running: Again, thanks a mil!!!

  9. I have installed and activated the Black Studio TinyMCE plugin but in the installed widgets is not listed and I can not drag it to sidebar menu ,any help please? 

  10. I would like to ad video's to my future website, do you have a tutorial on that widget/plugin?  Thanks again: I have interviewed several know it all's that claim to be the best web designers, recruited by all the biggest companies, they charge a lot and probably provide less than what you have just shown us.  Thanks

  11. how do you add an instagram widget like the Facebook widget in your video, how do you add an paypal buy now widget, how do you add ann shopping bag function, how do you make a function where customers can make a account on your webpage, and in the FAQs page you have added some things where i can fill in my name etc. how do you do that. The video was great and it was simple to follow and i hope you will make a new video with all new things and what ive asked. Or if you want to reply, that is also good 

  12. That was a lovely video on making WordPress site,I got immensely benefited from watching and learning this video.

  13. I need to put a business logo in header or above the header. WordPress allows to place text but not a graphic. I am using the default responsive template in wordpress. Can you or do you have a tutorial on that?  Thank you

  14. quick question is there a way to change the color behind the space of the logo.


     I wish to change the Header color. I am trying to put just blue violet in background nothing fancy

  15. Fantastic video! Really enjoyed watching it all!

    I'm new to WordPress and was struggling with menus and pages for about a day. Your video has really boosted my confidence to complete my own business website.

    Thank you!!

  16. Hi,I just installed the black studio plugin but its missing on the widget do i find and installed it as text editor.its not listed on the widgets bar.

  17. You just taught me how to create a web site in WordPress in one hour. I couldn't be happier. Thank you so much. If only I'd seen this before buying my domain on GoDaddy I could have saved a few bucks as well and protected my identity from the spammers 😉

    In terms of the theme, rather than import the zip file, you can add it through the Add Themes feature of WordPress. Similarly, the slider is available through WordPress.

    One question. I am still using the GoDaddy DNS servers and simply set up a domain forwarding with masking. Is there a problem doing it this way?

  18. Thanks to you guys, i built my first website ( for under 50 USD just following your tutorial. Infact you demystified the whole stuff, i am playing around with so many other plugins now. You are truly awesome…

  19. The best tutorial I ever seen. Thank you guys and as soon I get my page I will let you know so you can give me some feedback

  20. Excellent & very easy to understand……A request, if you can have one video on SEO setting…it would be a great help. Thanks a lot.

  21. I can't get my logo to show up whenever I am signed out of wordpress. It shows it on my website if I am signed into wordpress, but not if you try to just visit the page. Any fix to this or is my logo too big?

  22. I got my domain from goDaddy and they won't release it for 60 days.   Anybody have any ideas on how to remedy this?

  23. Hello, and thanks for your tutorials, they are very useful !

    Maybe you can help me, I wonder if it is possible to make a slider which operates with a ip identification system ?

    I need that people who visit the site, see in the slider the nearest items referenced in my site (products classified by geolocalization) ?

    Do you know if there is an existing plugin who allows to do that ? If not, is it expensive to ask a programmer to create this kind of plugin ?

    Thanks, [email protected]

  24. Hi, Coach,
    Thank you for beign there when ever your help is needed.

    Vantage theme does not support text editor again.i have installed about 4 plugins of text editor which does not show up on my post or page.

    Both the text and visual icon does not show on the bar, only the page builder icon is visible.What should i do?

  25. You have made it so easy to design and develop a Professional Website, compared to many large companies within my sector your simple easy to follow guide had resulted in an amazing website.
    My IT capacity in this area does not go beyond Word and Excel to achieve this with your tutorial is a mammoth achievement.
    This would have cost me about $3000 in Australia from quotes I got and samples of what was being quoted for looked nothing like what you assisted me to achieve.
    Thank you for just makin it all happen, I could never have done this without the simplicity and ease of you tutorials
    Check it out
    Thank you

  26. Hi

    Is there a live chat with you in your
    I really got some problem of website site up matter
    Hopefully, this will help people like beginner like any one of them watching your youtube video to appreciate your hard work.  Will there be a PDF file that we can upload from your step by step in this video. 

    Hope my request is not make you more busy. 

  27. Great Video!! Best one yet!  My site is coming along fabulously!  I really annoying problem though… I am unable to change the tagline!  I've modified the field from the General Settings, but the "call me maybe" tag remains.  Has anyone else experienced this?  I will check the posts…  Other than that exceptional video, thank you for publishing it!

  28. Great site! Very helpful. I'm on my way to creating a successfull website.  I have one small problem.  I've created a parent/child setup, where the parent is (ie) Products and the child, Men's shirts.  If you hover over Products, Men"s shirts appear in the drop down, and then clicking on that , you see the product. Problem is, if you click on Product, it opens to  a page.  How do you stop that from happening.  I just want the word Product to be a step that leads to the subproduct, not to open to it's own page?

  29. Hello, Im having a small issue. When I DL vantage my mac automatically unzips the file. How do I stop it from down that?

  30. hi there, I AM DOING THIS ON MAC,
    when i download vantage, it saves as a folder therefore i can't upload it to the 'add theme' part on wordpress. the folder contains 5 things. how do i install it? 
    great tutorial, many thanks

  31. Thank u soo much sir for the video…i want to make t
    My business website….and i want to make website where i can do transaction with my customers…can u help me

  32. I had taken domain from google and web host from hostgator . How can I add that 1st name server and 2nd name server to my domains . Please help me . @eMediaCoach

  33. Hey that's an awesome tutorial loved it,
    Thanks for this.
    Can you tell me how to add payment gateway system on the site and Google search bar, music download
    Is there any plugin available??? For these three thing?
    Plz help me with this!!! And also tell me where I can get more themes?

  34. perfect tuterial,
     but just i have a 2 questions
    1-when i make the google map in the website and the box of the facebook, i have problem in the distance enter two, and when i wrote the text of the welcome and i but the photo below the text i have this problem too, and i don't know how to solve it?
    2- when i but the photo in the slider i wrote in the photos but the problem is the pictures had been cut when i uploaded to the website and alot of words had been cut too, how i can solve it. 
    thank you

  35. @eMediaCoach hi 
    i sent to you massage via you website before i wrote to you here(maybe 5 days ago)
    to this: 
    i m sorry for bother you but i want help to complete the website and i don't know how to solve these problems 🙁
    thank you so much

  36. I am at the spot to start building the site but i do not see the fantastico button as a option under software and services. Any help is appreciated. Thanks

  37. Work beautifully Done, It's really great that you shared this video with us !
    Like to have video tutorial of making real estate website with vantage theme.
    Well done Sir

  38. All things went smooth But while uploading the slides i faced the problem i am bot able to save the changes after i select mine slides. after clicking "save setting" it's select default slide i.e Demo slider.

  39. Praise God! I'm a believer in your tutorials, but I can't get the meta slider to stop switching back to demo. I installed the plugin properly and followed you step by step, please advise. Also, how do I change the background color for the Vantage Theme? Be well and thanks in advance!

  40. I have already started my website with another video, but yours seems simpler, is it possible to switch without altering what I already have on my website?

  41. Brilliant tutorial! Many thanks! I've paid for WP tutorials that aren't a patch on yours. (also you made a new customer for your recommended domain and hosting websites).

  42. Not only thanks for the excellent free tutorial but thanks for the recommendation on your domain registration and web hosting vendors. The DN company is cheaper than any I've seen (even FREE whois privacy) and the web hosting company is streaks ahead of the one I'm currently using, smooth as silk and FAST! Many, many thanks!

  43. Hi, Thank you so much for this tutorial. It has been very helpful in a simple form. What I want to know though is How can I make an e-commerce website with this WordPress? I want to sell products online, how can I have customers to order from my website and how would they pay ? Thanks again.

  44. Hi,
    Your all tutorials are great! I am watching your all tutorials one by one. I have also seen this tutorial. I have faced a problem. When I tried to setup a logo from theme setting, then all structure of homepage has broken down. And theme settings are not changing. It is being default.


  45. Im having issues at the end with theme settings changes for logo and slider updates everytime I update then click save settings it goes back to default any solution to this issue ?

  46. theme settings is not allowing my changes… pls help
    Paid for the full version and it worked. This might be an update to the theme now.

  47. Thank you. You are the best . And i want to ask you to make another video for how to make a website for affiliate business to convert the target users from your landing page to the offers after they but email address. I hop you do it because i'm very comfortable with
    the way which explains them by video

  48. Im stuck with vantage theme settings…i change demoslider to slider but nothing happens….. that is after i click on save changes nothing changes! the slider goes back to demo slider…..someone please help me +emediacoach

  49. sir can a website like foodpanda can be made using wordpress. please upload a tutorial dedicated to food ordering portal like foodpanda. i need your help.

  50. Watched all the video for two hours and when I downloaded and try to change, “Header Text” to put my phone number, I cannot do it, I think I should buy, “Premium Version”  Don’t waste time.

  51. This was the best WordPress tutorial I have yet to watch. I spent hours using the GoDaddy WordPress tutorial which left me floundering and confused. I built my web page while following the tutorial and I am impressed with the results. Many thanks indeed.

  52. I have followed along with this tutorial wonderfully with no problems, until I tried to change the slider at the top of the homepage. I read through the comments on this video and saw that others had the same problem. So I tried to upgrade to the premium version of Vantage theme with no luck as it was giving me an error message when I tried to click to pay. So I decided I should upgrade my meta slider to the pro version. This did not solve my problem. HELP please!

  53. Great
    If possible to have a video showing how to insert input forms, Reports and to deploy access or Sql Database without using Caspio or similar softwares.

Leave a Reply

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