Hey everyone –

Today I’m going to teach you how to make a wordpress website completely for free. (well almost. You will need to do two things)

Then we’ll learn how to make a wordpress website that could cost you $1,000 – $2,500 if you had to pay someone else.

Have no fear!! You’re going to learn how to build the website on your own and you won’t need to write one single line of code ūüôā

Summary of what we’re¬†going¬†to do

  1. This tutorial is going to help you build a $2500 site for free
  2. With no coding or programming knowledge/experience necessary

Step 1: Register Your Domain

This tutorial uses hostgator and hostgator only so you do not need to go back and forth to other sites for information.

  1. Go to Hostgator.com and register a domain (come up with a good name that you’re proud of!)

You need a domain address since this is the web address of your website.

Step 2: Get Hosting Service

Hosting is where we’ll store all our content, images, video and data for our website. The hosting service I recommend is¬†Hostgator.

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.

Use the discount code: NYCTECHCLUB to save 65%

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

Cheap, great customer service, and easy to install everything to build your wordpress website

  1. Go to www.hostgator.com
  2. Click on web hosting
  3. Decide what plan is best for you – I recommend the BABY plan if you think you’ll make more than 1 website
  4. Click “Sign up now!”
  5. Go to the tab “I already own this domain” (since you already registered with GoDaddy)
  6. Fill in all the info (I suggest you choose a 12 month billing cycle)
  7. Unclick all additional services (they are unnecessary and extra money)
  8. Enter “NYCTECHCLUB” for a¬†25% off coupon code¬†(our very own special coupon code!)
  9. Agree to the terms and conditions and “Check Out”

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

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 3:  Install WordPress using Hostgator

There’s one last thing we need to do before we can start customizing our website – we have to install the platform we’re going to use to build it.

  1. Log on to hostgator via your email you got from them.
  2. In the email there is a link – “Your Control Panel” – click on that
  3. Log in using the username and password in your hostgator email
  4. Now scroll down to Software/Services section of the main page
  5. Click on the icon that says “QuickInstall”
  6. Click on WordPress on the left side menu
  7. Click Continue
  8. Enter an admin email (that you get email from), blog title (you can change this later), user name and other details
  9. Click “Install now!”

Awesome! 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 4: Log to Your New  Site

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 5: Choose A New Theme (template)

If you followed Step 5, you are not 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 build 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 6: Let’s Start Customizing Our Site!

First click on the customize button

All we’re going to do is add a title to our side and a tag line or “motto”

Did you make sure to click Save? If so then let’s click the X on the upper left corner and start building ūüôā

Step 7: Save a few Images You’ll Need

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 7: Add Pages To Your Site

We’re going to create some pages for our site first. 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!)

Step 8: Create Two 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 9: Let’s Add Some Additional Pages for the Buttons (service pages)

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 (Step 8) but with one additional step.

We’ll add the buttons to the homepage in a few steps from now.

Step 10: Make a Call To Action Page

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 11: Create Blog Posts / Articles

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 12: Enable and Add Slider to Homepage

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. ūüôā

Step 13: Set up Business Template (the meat of the website!)

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.

Second Step

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

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

You just need to add some widgets to these sidebars to setup the business template. Third Step Below are some widgets provided by the theme that you could use to make your business template look awesome.

  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 Step 10. 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.
  2. 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”
  3. TG: Testimonials: Add this widget to any Business Middle Right Sidebar. In this widgets, add the title, text, name, byline and all is done.
  4. 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.
  5. 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.
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. Save the Changes.

Step 14: Customize Right Side Bar Menu

 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 15: Customize Your 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 16: Customize Footer (bottom of website)

Similar to Step 15 – we are just going to drag and drop some stuff into the Footer Sidebar 1, 2, 3, and 4 for our footer!

Yes, it is that easy!

  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)

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

Step 17: Add a Contact Page

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 18: Add Social Icons

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

Click Install and Activate

AND YOU’RE DONE!

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.