How to Make a WordPress Website – 2015!

Hey hey ladies and gents! Today I’m going to help you put together a website with Hostgator.

I’m going to show you how to make a professional website for FREE :)

Okay, almost for free. You need to register a domain and get hosting. But you’re still saving thousands of dollars doing this on your own. All you need is like an hour. 

Have no fear – it’s really simple.


Tour of the site we’re going to build with godaddy

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

Step 1: Register a domain and get hosting service with hostgator

You need hosting in order to run your website and store all the data (content, images, video). Every website needs hosting, so make sure you get hosting otherwise we can’t build out your website.

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

Go to Hostgator -> Click Get Started Now -> Choose a Plan -> Click Sign up now (doesn’t matter which)

Type in a domain you want to register and push enter to see if it is available. If you found one that is – move onto the following steps! 🙂

Use the discount code: NYCTECH30 to save 30%

(its an affiliate link so hostgator also pays me a commission for helping you)

  1. Decide what plan is best for you (if you only will have 1 website – choose hatchling plan, if you think you’ll have more than 1 website – choose baby plan)
  2. Fill in all the info (I suggest you choose a 12 month billing cycle)
  3. Unclick all additional services (they are unnecessary and extra money)
  4. Enter “NYCTECH30” for a 30% off coupon code (our very own special coupon code!)
  5. Agree to the terms and conditions and “Check Out”

Step 2: Go to your email inbox

You will receive a hostgator email in your inbox with all your login and account details

Use that information to do Step 3

Step 3: Log into website cpanel

  1. Pull up your new account email from Hostgator
  2. Click on the link that says “Your Control Panel”
  3. Login with the username and password from your email

Now the fun starts!

Step 4: Install wordpress

Now we need to install the platform we’re going to use to make it. The platform is called WordPress – it’s a content management system and super popular with a large community of users.

  1. Now that’re you’re logged in to your cpanel
  2. Scroll down to Software/Services section of the main page
  3. Click on the icon that says “QuickInstall”
  4. Click on WordPress on the left side menu
  5. Click Continue
  6. Enter an admin email (that you get email from), blog title (you can change this later), user name and other details
  7. Click “Install now!”

Sweet! Now we have wordpress installed! You can go to your domain address and see that we have just uploaded a website to your site (we’ll fix this whole thing and make it pretty – don’t worry!)

Step 5: Log into wordpress

You might have to wait 5-15 minutes before you can click to log into your new site. Take a break if you need.

There are two ways to log onto your site

  1. You can click on the link provided on the hostgator page after the quick install and use the username and password
  2. You can go to your email and open the new email you get with details about logging into your site (same info as above)

To customize and add content to your site, you will always log into the site with the following address: www.YourSite.com/wp-admin

So go ahead and log on!

Step 6: Install Spacious Theme for our wordpress website

You can choose any theme template to customize on wordpress. But the one we’re using for this tutorial is the Spacious Theme.

If you followed Step 5, you are now on the “Dashboard” of your website. Now it’s time to start customizing our website!

WordPress offers you a variety of themes, which are skeletons, to make and customize our website. I’m going to help you customize a theme for free that would cost you roughly $2500 if you paid someone else to do it for you.

  1.  On the left side, find the Appearance link – hover over it and click “Themes”
  2. At the top you’ll see some tabs – click on WordPress.org Themes
  3. Then filter by clicking Popular and find the “Spacious” theme
  4. If you can’t find it, just type into the search bar on the right “Spacious”
  5. Then drag your arrow over the theme and click “Install”
  6. You’ll be brought to another page – click “Activate”

Step 7: Download images for tutorial

You can use your own images if you want. But to make things easier, I’ve linked a bunch of images we are going to use for this tutorial so you can just follow along if you want.

For now, I would like you to “right click and save as” the following images to a folder on your computer. You can eventually replace these with all your own images, but for now, let’s use some images I have.

Make sure you save all of these (or go to the resources below to find your own images)

Wow that’s a lot of images (not really) but it’s a great start. Remember, images make your site really pop and look beautiful so don’t be shy with having images on your site.

Step 8: Upload images onto wordpress

Now that you have all your images downloaded, we need to upload them to our WordPress Dashboard so we can use them on this tutorial.

Here’s what you need to do –

  1. Go back to your wordpress dashboard
  2. On the left hand side find the Media link
  3. Hover over it and click on “Add New”
  4. Click the button that says “Select Files”
  5. Go to your download folder and upload all the images you just saved in Step 8

Perfect!

Step 9: Create custom website logo

Now we’re going to create a custom logo – how cool is that?

  1. The first thing you need to do is go to this website: Logomakr
  2. On the upper left corner, there is a search bar.
  3. Type in whatever type of image you want your logo to be
  4. Then find an image that you like
  5. Then go to the right upper corner and change the size to “400 x 100”
  6. Make sure your logo fits within that white space
  7. Click on the T on the left hand side if you want to add text to your logo
  8. Make sure all the text also fits within the white space
  9. You can change the colors of your logo by highlighting the image or the text and clicking in the color chart on the lower right corner
  10. Once you’re happy with your logo, go to the upper right corner and click on the disk
  11. A new page will pop up. Right click and download the logo
  12. Then go to your download folder. Double click the logo and export it to PNG.
  13. The logo should now be saved as a PNG image

Step 10: Upload logo

Your logo should now show up on your homepage if you go to your website

Step 11: Create pages for slider

First Step

  1. In the dashboard, add a new page – Title it “Blank”.
  2. In the Page Attributes option box, choose the Business Template in the Template drop-down option.
  3. Publish the page. Yes, that’s it for the first step.
  4. Create a second page titled “Blog”
  5. In the Page Attributes option box, choose the Business Template in the Template drop-down option
  6. Publish the page. This is the second step.

Note (do this!): If you want to set this Business Page as the Home page, then follow the instruction below:

  1. In the dashboard, go to Settings->Reading.
  2. Check on the ‘Static Page’ option.
  3. Choose the business page “Blank” (the page you created following the instruction above) as the front page.
  4. Choose the “Blog” page as your posts page.
  5. Save the Changes.

 Now Let’s Make Some Slider Pages!

You can create up to five feature pages (this is the section with the big image that slides and links to another page). It makes your site look beautiful and professional.

I’m only creating two for example purposes.

These are going to show up on the top of your homepage in the menu but we’re going to delete them later. Don’t worry about this for now!

Step 12: Activate slider

This is where we’ll put in the beautiful large images in our homepage and link them to other pages/areas of the site

  1. In the dashboard, go to Appearance->Theme Options.
  2. Go to Slider Tab (on the very right).
  3. To activate the slider, check the Check to activate slider checkbox
  4. Upload the slider image # 1 for the first slider. Similarly, add the corresponding slider title, slider description and redirect link (for my site I’ll put (“http://www.dreambeachbody.com/grand-central”) . You can link to a link within your site or outside of your site.
  5. Repeat the above step for your other slides. (my other slider page will link to The Bridge)
  6. Then click on Save Changes. That’s it, open your home page and it should be there. :)

The Business template has four widget areas within it. Have a look here in this image. Click on the image for a better view.

business-setup

  1. Business Top Sidebar
  2. Business Middle Left Sidebar
  3. Business Middle Right Sidebar
  4. Business Bottom Sidebar

Step 13: Create products and services section

for more icons go to http://www.iconfinder.com

So now we’re going to add pages for the icons we have that will direct people to different areas of our site.

This section is similar to adding Pages but with one additional step.

Go to the left side menu and find Appearance > and Click Widgets

You just need to add a widget to set up the products and services section.

  1. TG: Services: Add this widget to Business Top/Bottom Sidebar. In this widget, select the pages in the drop down option you created in this step (above). There are six page drop-down options within it. The title, description and featured image of that same pages that you select will be shown.

Step 14: Create Image Gallery

Step 15: Create recent blog posts section

Go to the left menu > Plugins > Add New > Search > “Type in Recent Post Extended Widget

Download, Install, and Activate the Recent Post Extended Widget.

Go to your left menu > Appearance > Widgets

Drag it into your widgets and click a few boxes and UNCLICK “use default css” and PASTE in this (edit summary font as necessary – see video for details):

PLEASE COPY AND PASTE THE CODE IN THE VIDEO DESCRIPTION (for some reason the formatting when using the code below indents everything)

.rpwe-block ul{
list-style: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
.read-more, .more-link {
    color: #ef0202;
    padding-left: 8px;
}
.rpwe-block li{
border-bottom: 1px solid #eee;
margin-bottom: 10px;
padding-bottom: 10px;
list-style-type: none;
}

.rpwe-block a{
display: inline !important;
text-decoration: none;
}

.rpwe-block h3 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
clear: none;
font-size: 22px !important;
font-weight: 400;
line-height: 1.5em;
margin-bottom: 0 !important;
margin-top: 0 !important;
padding-bottom: 1px;
}
.rpwe-thumb{
border: 1px solid #eee !important;
box-shadow: none !important;
margin: 2px 10px 2px 0;
padding: 3px !important;
}

.rpwe-summary {
font-size: 12px;
line-height: 24px;
}

.rpwe-time{
color: #bbb;
font-size: 11px;
}

.rpwe-alignleft{
display: inline;
float: left;
}
.rpwe-alignright{
display: inline;
float: right;
}
.rpwe-aligncenter{
display: block;
margin-left: auto;
margin-right: auto;
}
.rpwe-clearfix:before,
.rpwe-clearfix:after{
content: "";
display: table !important;
}
.rpwe-clearfix:after{
clear: both;
}
.rpwe-clearfix{
zoom: 1;}

Step 16: Create blog posts

If you’re a writer and want to update your post with articles every now and then, the best way is to create blog posts.

This is really similar to make pages but blog posts can be shown as recent postings which pages cannot.

Step 17: Create call to action

These are going to show up on the top of your homepage in the menu but we’re going to delete them later. Don’t worry about this for now!

Go to the left side menu and find Appearance > and Click Widgets

You just need to add a widget to set up the call to action

TG: Call to Action: Add this widget to Business Top/Bottom Sidebar. In this widget, add the first and second title line, button text, button redirect link and all is done. The address to put in the redirect page for our site is “http://www.dreambeachbody.com/call-to-action”

Step 18: Create featured page and testimonials

Go to the left side menu and find Appearance > and Click Widgets

You just need to add a widget to set up the single feature page and testimonials.

TG: Featured Single Page: Add this widget to Business Middle Left Sidebar. In this widget, select any of your page in the drop down option. The title, description and featured image of that same page that you select will be shown.

TG: Testimonials: Add this widget to any Business Middle Right Sidebar. In this widgets, add the title, text, name, byline and all is done.

Step 19: Create additional pages

We’re going to create some additional pages for our website. This is going to help us create the menu at the top of our site and also link to slider (the big image on the homepage)

After you add these pages, you should be able to see at the top of your site that they are links on the header (this is called the Header Menu).

We can edit the header menu later (I’ll show you how below!)

Go to the left side menu and find Appearance > and Click Widgets

You just need to add a widget to set up the featured widget with additional pages.

TG: Featured Widget: Add this widget to Business Top/Bottom Sidebar. In this widget, add the title and description. select any of your page in the drop down option. There are three page drop-down options within it. The featured image of that same page that you select will be shown.

Step 20: Customize footer

Go to your Dashboard > Appearance > Widgets and find the Footer Sidebar

  1. Let’s drag the Search widget into Footer Sidebar 1
  2. Recent Widget with Thumbnails (the plugin we got) for Footer Sidebar 2
  3. Custom Menu into Footer Sidebar 3
  4. And a Text widget into Footer Sidebar 4 (type some stuff into the widget)

For your footer add this text into a text widget:

<ul>
<li> type whatever you want</li>
<li>in here</li>
<li>and lines will show up</li>
<li>just try it out</li>
</ul>

Make sure you click save on each one after you drag them into the right sidebar!

You can drag anything you want into these footer sidebars. 

Step 21: Create About Us Page

Step 22: Customize header menu

By default, the menus will fall back to Pages. That means just after activation of the theme you will see all the pages as menus. If you want selective menus with a combination of links, pages, categories then custom menu is what you should be looking for.

Set up Custom Menu

  1. Go to Appearance > Menus in the WordPress menu
  2. Click on Create a new menu link
  3. Give a name to your menu in Menu Name and click Create Menu button
  4. Now choose the pages, categories, custom links from the left-side of your screen by selecting the checkbox and click on Add Menu
  5. Click Save Menu after adding required pages, categories in the menu

Then go to Appearance > Customize > Navigation > and select the menu you just made in the Primary Menu drop down

Step 23: Embed a video

Step 24: Learn how to edit font on wordpress

Step 25: Create contact us page

  1. Download Contact Form 7 plugin (go to Plugins > Add New > Browse > Search for Contact Form 7)
  2. Then go to plugin’s page and set it. Here is a detail on that Docs (You don’t need to look at this right now)

Contact us page template

  1. Go to dashboard, then create a page. Give it a name “Contact” or “Contact us” as you wish.
  2. Now on the right hand side you can see Template Drop-down. Select Contact Page Template
  3. Copy the contact form 7 shortcode and paste it in this page. You can find this by going to Contact on the left side menu and click on “Contact Form 1″ – you’ll see the code right in front of you
  4. Click on Publish.

Step 26: Create email optin form

Step 27: Customize right sidebar

Widgets! More widgets! 

You should have gotten some good practice in Step 13 on dragging widgets onto your home page. Now we are going to drag a few more.

Step 28: Extras for your site/wordpress

Go to Plugins > Add New > Browse > Search “Social Media Widget”

Click Install and Activate

The END! Congratulations!!

And we’re done! Congrats! I know it took a little bit of time and work but you honestly just saved yourself THOUSANDS of Dollars!! And I can’t be any happier for you.

Now that you’ve made a beautiful website, how about customizing it yourself?

Here are some additional resources to help you out in case you need them.

One Response

  1. Pingback: How To Make A Wordpress Website |

Comments are closed.