How to Make a WordPress Website!!

I’m super excited to create this tutorial on how to make a wordpress website. It uses a free wordpress theme and I show you how to build this website from scratch and walk you along every step of the way.

As always, you do not need to be technical or know how to code whatsoever, all you need is some spare time, a domain and hosting to build this wordpress website.

I will be providing you with a few links and content to help you make this wordpress website for free so if you need any images or text instructions – they are all provided below.

What You Need

For hosting, we’ll be recommending Hostgator. You can also use hostgator to get your domain which this tutorial covers. If you want to use another service like GoDaddy to get your domain – follow this link (to come) for step by step instructions.

Why Hostgator?

Hostgator Discount

Hostgator has allowed me to share a special discount code with you (the HIGHEST EVER!) – nyctech30– this is a 65% off coupon code (highest available)

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.

nyctech30 coupon code is an affiliate coupon code, which means Hostgator gives me a small commission when you use the code. It helps me run my website and helps me create these free tutorials for you, so please use it – it only helps you save money!! 🙂 !

In the next step, we’ll use the NYCTECH30 hostgator coupon code.

Step 1: Get Domain and Hosting

What do you need a domain? A domain is your web address (what you type in to get to your site). This is a MUST.

You need hosting in order to run your website and store all the data (content, images, video). Every website needs hosting. This is a MUST.

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

Type in a domain you want to register and push enter to see if it is available. If you found one that has a green check mark next to it, let’s move on!! :)

Make sure to use the discount code: nyctech30 to save 55% (highest possible!)

(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 55% off coupon code (our very own special coupon code!)
  5. Agree to the terms and conditions and “Check Out”

Step 2: Go to 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 Cpanel

This is where we are going to go to install wordpress, which we need to make our wordpress website for free.

  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 Website

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: Download and Install Theme

You can choose any theme template to customize on wordpress. But the one we’re using for this tutorial is the Sydney 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 “Sydney” theme
  4. If you can’t find it, just type into the search bar on the right “Sydney”
  5. Then drag your arrow over the theme and click “Install”
  6. You’ll be brought to another page – click “Activate”

Step 7: Download and Install WordPress Sydney Child Theme (two options below)

You don’t need to install the child theme. I just like to, so all of the customizations we make are saved.

So if you’re going to install a child theme you can download this folder will all the demo files. If you unzip it, you will find the sydney-child.zip which is what you want to upload (make sure it is a zip file):

A child theme helps save all of our changes that we make when wordpress updates so our website doesn’t change. Do this and you’ll thank me later!!

  1. Open the zip file and find the sydney-child.zip (make sure it remains a zip file. If not, please compress it before uploading) for our wordpress website
  2. Install and activate through the wordpress dashboard > appearance > themes > add new:D

Step 8: Install the required plugins that show up at the top of your dashboard

These plugins include:

Make sure you activate these plugins

Step 9: Download and Install These “Other” WordPress Plugins

Step 10: Download the Zip File with Images (plus Logo)

This is the same folder from step #7. If you already downloaded it – you do not need to again.

Click on this link here to download the zip file with all the images we use in this tutorial (or similar images or placeholders).

Sometimes I don’t always give the exact images but it shouldn’t matter since you’ll have your own images for your website.

Step 11: Upload the media files on to your WordPress Website

  1. Go to your wordpress dashboard > click on Media > Add New
  2. Add files
  3. Now all of your files should be in your media library.

You can also upload these files individually on each page/post, when you need them. I’ll show you how in the video tutorial.

Step 12: Create Homepage and Blog Post Page

First we’ll create two new pages

  1. Go to your WordPress dashboard > Pages > Add New
  2. Title your first page Home or Homepage
  3. Go to the Page attributes on the right side and select Front Page in the Template drop down
  4. Push the publish button

Now create a new page for your blog page

  1. Pages > Add New
  2. Title your page “Blog”
  3. Push the publish button

Now we need to set the homepage and the blog page. To do that, do the following:

  1. Go to your dashboard > Appearance > Customize
  2. Click on the tab that says “Static Front Page”
  3. Choose “A Static Page” button
  4. For the front page, go to the drop down and select the homepage you just created
  5. For the blog page, go to the drop down and select the blog page you just created
  6. Click the blue Save and Publish button

You can go check out your homepage and you should see your new pages. They should look a little different from the default pages when you installed the theme 🙂

Now that we have our front page and blog page for our wordpress website, we can create all the pages we need to and customize our entire wordpress website. Are you excited? I know I am. 

Step 13: Edit Our Slider Images on Our Homepage

Now if you want to add your own custom slider images to your wordpress website, you can doing the following steps:

  1. Go to your Dashboard > Hover over Appearance > Click on Customize
  2. Click on the Header Area tab
  3. Click on Header Slider
  4. Change your slider images and text to whatever you want
  5. Near the bottom of the page you will see a section for your button. You can add the URL you want to link that button to and the text you want in the button. If you don’t change the #primary for the URL then when someone clicks on the button it will skip to the next section of the homepage
  6. Make sure you click save and publish when you’re done editing

Step 14: Select and Modify Setting Options for Your WordPress Website

Go to your customize tab (wordpress dashboard > appearance > customize)

Now I’ll walk you through all the tabs that we are going to do some sort of modification to the settings:

Site Tagline

Header Area

Click the Header Type area

Blog Options

Font Size

  1. Click on Fonts
  2. Go to Body Fonts and change the font size to 16

Colors

  1. Now click on the color tab
  2. Change the primary color to whatever color you want – we use this color code #d63737 for the demo site
  3. Menu background color: #d63737
  4. Site Sub-menu background color: #1c1c1c
  5. Body text color: #000000
  6. Sidebar color: #000000
  7. Footer widget background color: #252525

Click back and go to Menu Style

  1. You can change the custom options here if you want. But we are going to keep it the same.

Make sure you click Save

Step 15: Create Logo and Favicon

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 roughly “50 x 50”
  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

Helpful hints: I change my logo to White so it looks good on the slider image. I also save a black copy of the same logo for the favicon

Now that we have our logo – let’s upload it!

  1. Go back to your Dashboard > Appearance > Customize
  2. To upload your favicon, click on the General tab and just click to upload your image
  3. To upload your logo to go the Site title/tagline/logo tab
  4. You can change your site title and tagline if you want
  5. Click select image to upload your logo
  6. Make sure you click Save!

Step 16: Modify Permalinks

The last thing we’re going to do is modify our links so we show the www at the beginning of our URL and also how our blog post links look.

  1. Go to your dashboard > settings > general
  2. Where it says wordpress address – type in www. in from of your web address
  3. And then where it says site address – type in www. in from of your web address
  4. Then click save changes

Now let’s change our permalinks for our blog posts pages

  1. Go to your dashboard > settings > permalinks
  2. Select the post name option
  3. Click save changes

 Step 17: Add Custom CSS

We’re going to do this step now just to get it out of the way. It’s just some copy and pasting.

Now to add some additional customization to make you’re site really look professional.

Add the following CSS code by doing this:

  1. Go to Dashboard > Appearance > Custom CSS
  2. Paste in the following:
.widget_sydney_latest_news .roll-button {
 display: none;
}
body > .preloader{ display: none; }
.widget-area .widget {
 padding-top: 0;
}
.site-info {
 text-align: center;
}

#gallery-1 {text-align: center;}
figure.gallery-item {margin: 5px; width: 267px; display: inline-block;}

Make sure you click Update Custom CSS

Step 18: Customize WordPress Homepage

Time to Customize the Homepage

Now the fun begins. First we’re going to create our homepage and then create pages to link it all together. Let’s open a tab for our homepage

Step 19: Create About Section

The first section that we are going to create is the Services section. To do this we first need to create some services.

  1. On the right side of your Dashboard go to Services and click Add New
  2. Title Your Service
  3. Add a small description if you please
  4. Go down to the service icon section and add whatever icon you want – there is a link there for shortcodes
  5. If you want to link the title of the service to another page, go ahead and type in a URL
  6. Add a category name to your service so we can “show’ these later – you’ll get what I mean in a little bit. Just click Add new category and type in “Type A”

Do this a few times to get at least 3 services but you can make as many as you want. Just be aware they will show up on your homepage and you don’t want to make the page look too messy.

After you’re done creating services 

  1. Go to your homepage (edit)
  2. At the top of the content section click Add Row
  3. Click Edit on the upper right of the new row
  4. Change the number of rows to 1
  5. Now click add widget and select Sydney FP: Services Type A
  6. Click Edit within the new widget
  7. Title it Our Services and make sure there is a “-1” in number of services you want to show
  8. Where it says “Enter the slug for your category or leave empty to show all services.” type in “type-a” (or whatever category name you used for the services)
  9. Now just click done
  10. Push the Publish / Update button and go ahead and check your homepage to see it update if you want

Step 20: Create Call to Action

A call to action is super important for your webpage. So let’s create that section now.

  1. Go to your homepage (edit)
  2. At the top of the content section click Add Row
  3. Click Edit on the upper right of the new row
  4. Change the number of rows to 1
  5. Click on the Theme tab and add 50 to the top/bottom padding
  6. Change the background color to #252525 then background image and insert an image
  7. Scroll down to Row Layout and select Full Width
  8. Click Save
  9. Now click add widget and select PageBuilder Widgets and select Layout Builder
  10. Click Edit within the new widget
  11. Now click add a row and edit the row and make the number of rows to 1
  12. Change the color of the background color to #d65050 -> then click save
  13. Now add another row and make sure the number of rows is 2
  14. Now add two Sydney FP: Call to Action widgets (one for each row)
  15. For the Call to action on the left click edit and title it “Take some time and meet our Employees”
  16. Now for the link to the button, you can put in whatever URL you want or wait until after you make a page. I know we are going to make an Employees page so I will paste in the following URL: “http://www.yourwebaddress.com/employees”
  17. For the button text, put in “Meet the team”
  18. Click done
  19. For the Call to action on the right click edit and title it “Review Some Facts About Us”
  20. Now for the link to the button, you can put in whatever URL you want or wait until after you make a page. I know we are going to make an about page so I will paste in the following URL: “http://www.yourwebaddress.com/about”
  21. For the button text, put in “Facts”
  22. Click done
  23. Push the Publish / Update button and go ahead and check your homepage to see it update if you want

If you want a background box for each call to action – copy and paste this code: background-color: rgba(0,0,0,0.3); into the attributes section of each call to action (edit > attributes)

** We are going to create pages for these buttons for this section later. You can add the URLs I recommend or update them after you create your own custom pages. **

Step 21: Create Blog Post Section

Now if you want a latest news section – follow these directions. I think a blog is something every website should have, no matter what type of business or website you are running.

  1. Go to your homepage (edit)
  2. At the top of the content section click Add Row
  3. Click Edit on the upper right of the new row
  4. Change the number of rows to 1
  5. Click Save
  6. Now add widget and select the Sydney FP: Latest News widget
  7. Click edit on the widget and title it “Latest News”
  8. Now click done
  9. Push the Publish / Update button and go ahead and check your homepage to see it update if you want

** Nothing new may show up in this section since we haven’t created any blog posts yet. That’s ok. We will create them in a little bit! **

Step 22: Create Another Call to Action

Following the demo template that I’ve designed, we are going to create another call to action to give our visitors another chance to navigate our website. This is important so we can funnel visitors where we want them to go.

  1. Go to your homepage (edit)
  2. At the top of the content section click Add Row
  3. Click Edit on the upper right of the new row
  4. Change the number of rows to 1
  5. Click on the Theme tab and add 30 to the top/bottom padding
  6. Change the background color to #252525 then background image and insert an image
  7. Scroll down to Row Layout and select Full Width
  8. Click Save
  9. Now click add widget and select the Sydney FP: Call to Action widgets
  10. For the Call to action click edit and leave the title blank
  11. Where it says Enter your call to action, type in “WE LOVE WHAT WE DO. NEED INSPIRATION? CHECK OUT WHAT OUR CLIENTS ARE SAYING”
  12. Now for the link to the button, you can put in whatever URL you want or wait until after you make a page. I know we are going to make an Testimonial/Success Stories page so I will paste in the following URL: “http://www.yourwebaddress.com/success-stories”
  13. For the button text, put in “Success Stories”
  14. Check the box that says inline with text
  15. Click done
  16. Push the Publish / Update button and go ahead and check your homepage to see it update if you want

** We will be creating the page for the button in a little bit **

Step 23: Create Social Media Widget Section

Now if you want social media buttons at the bottom of your pages – do this for each page you have.

  1. Create a new row and then click edit and make sure it has 1 row
  2. Click on the theme tab and add 10 for top/bottom padding
  3. Then change the background color to #1c1c1c and select Full Width for Row Layout
  4. Now click save
  5. Now click to add a widget and select the SiteOrigin Social Media Buttons Widget
  6. Click edit
  7. Now click Add for however many social media buttons you want
  8. Then click to expand each social media section and select the social media you want
  9. Add your URL
  10. And for this tutorial we change all the icon colors to #ffffff and the button colors to #252525 as the background color
  11. Once you’re done adding social media buttons go down to the DESIGN section and click to expand that
  12. I’ve chosen the FLAT button theme, NORMAL icon size, SLIGHTLY ROUND rounding, Low padding, Align Center, and Low Margin
  13. Click Done when you are Done 🙂
  14. Push the Publish / Update button and go ahead and check your homepage to see it update if you want

Remember, you have to do this for every page you want this. We are not going to use the footer widgets for this site because they make our site look ugly 🙂 So this is a little more work but it makes your site look beautiful!

Step 24: Create About Page

First we need to create a new page.

  1. Go to your dashboard and go down to pages > add new
  2. Title the page About
  3. Create a row > edit row > set row layout to 1
  4. Click on Theme tab
  5. Add 50 to top/bottom padding
  6. Go to background image and select and insert a background image
  7. Go to row layout and select full width
  8. Push Save
  9. Now click to add a widget and select the SiteOrigin Headline widget
  10. Click edit within the widget and title it “About Us” then click done
  11. Now insert a new row and make sure to set the row layout to 1
  12. Click on the theme tab and add 40px to the top/bottom padding then click Save
  13. Now click to add a widget and select the Visual Editor
  14. Just type in whatever content you want about your business or you or anything else – you can also format the font here
  15. Once you’re done, click done (that sounded funny)
  16. Now let’s add another row and make the row layout to 1
  17. Click edit on the row and add 30px to top/bottom padding and change the background color to #d65050 and change the row layout to Full Width – click Save when you’re done
  18. Now click add widget and select the Syndey FP: Facts widget
  19. Now just click edit and add in some stats by adding titles, icons (click on the link at the top for short codes for icons) and stats
  20. Click done
  21. Now add another row and set the row layout to 1 – this is for our call to action
  22. Click on the theme tab and put in 30px for top/bottom padding
  23. Change the background color to #252525 and select Full Width for Row Layout
  24. Then click Save
  25. Now click to add a widget and select the Sydney FP: Call to Action widget
  26. Click edit and type in your call to action. For this demo site we use “For a free quote to start working with us today.” and the link for the button “http://www.howtowebtutorial.com/contact-us” (we’ll make this page in a little bit). And the button is titled “Contact Us”
  27. Do not click display inline with text
  28. Then click done
  29. Go back up to Step # if you want to add social media buttons on this page
  30. Make sure to click the Publish/Update button when you are done. You can go to your homepage and see the changes 🙂

Step 25-A: Add Employees

To add a new employee: go to your dashboard and on the left hand side find Employees and hover and click add new employee

  1. Name your employee
  2. Scroll down to then bottom and input information about the employee
  3. Add a profile photo for the employee if you wish
  4. Then you want to create a custom category name for the employee so we can reference it
  5. Click publish

Do this over and over again to create your employees that you want to show up on the employee page.

Step 25-B: Create Employees Page

Now let’s create our Team or Employee page

Go to your dashboard > pages > add new > and title your page Employees

  1. We need to create a new row and set the row layout to 1
  2. Then add a widget and select the Sydney FP: Employees widget
  3. Click edit and title it “Meet The Team”
  4. For number of employees, put in -1
  5. Click done
  6. Now click publish

The employee page shows all your employees. By default it just lays everyone out.

If you want to customize your team page and have the title at the top and a call to action at the bottom you must create a page and create a URL that is different than “Employees”

Also your employee section will us a slider that shows 3 employees per slide.

I like this layout that we have put together better since your visitors can still navigate via the header menu

Step 26: Create Portfolio Projects

Before we can create our gallery or portfolio page. We need to create upload some gallery/portfolio images or projects.

You can add as many projects as you want. In the demo website, I add 12. I will walk you through how to add one project and you can just do this over and over again to create more projects.

  1. Go to the dashboard and hover over media and click add new
  2. Click upload files > select files > select images you want to upload
  3. When you are ready -> create a new page and title it “Image Gallery”
  4. Click Add Media
  5. On the upper left click Create Gallery
  6. Upload images you would like to include
  7. When finished, click the button to create gallery
  8. Make sure to publish this page

We are going to edit the look of the gallery later when I show you how to add some custom CSS to your wordpress website. It will be easy, super super easy! (already done earlier!)

Step 27: Create Contact Us Page

First we need to create a new page and title it Contact Us

  1. Go to your dashboard and go down to pages > add new
  2. Title the page About
  3. Create a row > edit row > set row layout to 1
  4. Click on Theme tab
  5. Add 50 to top/bottom padding
  6. Go to background image and select and insert a background image
  7. Go to row layout and select full width
  8. Push Save
  9. Now click to add a widget and select the SiteOrigin Headline widget
  10. Click edit within the widget and title it “Contact Us” then click done
  11. Now insert a new row and make sure to set the row layout to 1
  12. Click on the theme tab and add 50px to the top/bottom padding then click Save
  13. Now create another row and set the row layout settings to 2
  14. Change the ratio between the left and right row to 70:30
  15. Now click add widget and select the Visual Editor
  16. Click to duplicate the Visual Editor widget and drag it to the right (so you have one on the left and one on the right)
  17. Now click to edit the Visual Editor widget on the left
  18. Type in your address and then push enter to create a new line
  19. Push the button to create a horizontal line
  20. Now click done
  21. Now click to add a new widget below this Visual Editor widget with your address
  22. Select the SiteOrigin Google Maps widget
  23. Now click to edit the Google Maps widget
  24. Type in your address/location
  25. The map settings we have selected for the demo site are: Interactive Map and 250px Height
  26. Click done when you are done

Now the last thing we have to do is grab some short code to create our Contact Us form

  1. So do either push publish on the page (so your work is saved) or open up a new tab and go to your homepage dashboard
  2. On the left side find the Contact Form link
  3. Hover over that and click Contact Forms
  4. Now you will see a contact form listed and there will be short code next to it. Please copy that short code. (It should look something like this: 
    [contact-form-7 id="268" title="Contact form 1"]

    (I don’t think the short code shows up, so watch the video! Yours may look different so please make sure you go to your contact form page)

  5. Now go back to your Contact Us for and click on the edit button for the Visual Editor widget
  6. Paste in your short code and then click done
  7. Go back up to Step # if you want to add social media buttons on this page
  8. Now push Publish and Update and you can view the page to see what we just created

Step 28: Create Testimonials Page

The testimonial page requires us to do two things: 1) Create testimonials and 2) Create a client list

You only need to create a client list if you want to show a client list like our demo website.

So before we create the testimonial page we need to create some testimonials.

Follow the steps below to add as many testimonials as you want (we will be adding three for this website). 

  1. On the dashboard, on the left you will see a link that says Testimonials. Hover over that and click Add New
  2. Title the testimony with the name of the person or company
  3. In the body, type in the quote or whatever the testimonial is
  4. Below the contact section you can type in a Title/Role for the person/company if you want like “CFO, Google” for example
  5. Then just add a featured image and click publish
  6. Add a category name
  7. Do this again to add additional testimonials

Once you’re done adding testimonials, we want to create a client list 

  1. So again on your dashboard, look over on your left and find Clients
  2. Hover over clients and click add new
  3. You can title your client whatever you want
  4. We really just need to upload a featured image (logo)
  5. Once you do that
  6. Click Publish
  7. Do this again a few times if you want a client list. You can add as many as you want but 5 seems like a good number.

Now we need to create a new page – title it Success Stories

  1. Go to your dashboard and go down to pages > add new
  2. Title the page About
  3. Create a row > edit row > set row layout to 1
  4. Click on Theme tab
  5. Add 40 to top/bottom padding
  6. Go to background image and select and insert a background image
  7. Go to row layout and select full width
  8. Push Save
  9. Now click to add a widget and select the Visual Editor widget
  10. Click edit within the widget and title it “What Our Clients Are Saying” then click done
  11. Now create a new row and set the row layout to 2
  12. Click to edit the row and set the Border bottom color to #d63737 and the Top/Bottom Padding to 20px
  13. Then click save
  14. Now add two SiteOrigin Video videos (one for the left row and one for the right row)
  15. Click to edit each widget and make sure external is checked
  16. Add a video URL
  17. Click done
  18. Now add another row for your testimonials and set the number of rows to 3
  19. Change the % for each row to 33% and click Insert
  20. Click add widget and select the Sydney FP: Testimonials widget ->duplicate this 2 more times or create two more widgets for each row (drag them over if necessary)
  21. Click edit within each testimonial widget and make sure 1 is for number of testimonials to show
  22. Then add the category name for the testimonial you want to show in that column
  23. Then click done
  24. Now add another row and set the row layout to 1
  25. Edit the row and set the top/bottom padding to 30px and the background color to #efefef
  26. Select Full width
  27. Click save
  28. Now add a widget and select the Sydney FP: Clients widget
  29. Again, click edit and make sure -1 is for the number of clients to show
  30. Now add another row and set the row layout to 1 – this is for our call to action
  31. Click on the theme tab and put in 10px for top/bottom padding
  32. Change the background color to #252525 and select Full Width for Row Layout
  33. Then click Save
  34. Now click to add a widget and select the Sydney FP: Call to Action widget
  35. Click edit and type in your call to action. For this demo site we use “For a free quote to start working with us today.” and the link for the button “http://www.howtowebtutorial.com/contact-us” (we’ll make this page in a little bit). And the button is titled “Contact Us”
  36. Do not click display inline with text
  37. Then click done
  38. Go back up to Step #21 if you want to add social media buttons on this page
  39. Make sure to click the Publish/Update button when you are done. You can go to your homepage and see the changes 🙂

Step 29: Create Blog Posts

  1. Go to your Dashboard > Post > Click Add New
  2. Title your blog post whatever you want
  3. Type in whatever content you want and change the text formatting if you would like
  4. For format (on the right) I just leave it as standard
  5. Once you’re done you can add in a category for the blog post if you would like
  6. Add a image in the Featured Image section on the lower right if you want a thumbnail to show up on the homepage and blog post page

This is how you create blog posts :)

Once you create some blog posts, you’ll see them populate on your homepage and if you go to your blog page – you’ll see them there. We will put a link in your header menu for your blog page in a a little bit.

Step 30: Select Comments Options

Now if you want to allow people to leave comments on your blog posts all we have to do is go to our settings and select that. Some people like this, some don’t. So it’s up to you.

  1. Go to your dashboard > go down to settings > click on discussion
  2. Check the box to 
  3. Check the box that says c
  4. Uncheck the box that says U
  5. Make sure the box that says Automatically close comments on articles older than 1 day is either unchecked or you change the number of days people can leave comments after you post an article
  6. I also like to have my comments manually approved so I check the box that says 
  7. Then just click save changes below and you’re done

Step 31: Customize Widgets Section

Now we can modify our sidebar widgets. The sidebar will only be showing up on our Single Portfolio Page and Single Blog Post pages

If you want the exact sidebar that I create in the demo site with a Facebook like box and twitter feed then we need to download one additional plugins

Go to your plugins page (dashboard > plugins > add new > browse) and search for “Easy Facebook Likebox”

You should find one that is made by By Sajid Javed -> click Install and Activate

Now we can go and edit our side bar

  1. Go to your dashboard and go to Appearance and hover and click on widgets
  2. You will see on the right side a “Sidebar” box. We are going to drag widgets in there
  3. First, find the Easy Facebook Likebox on the left, click it and drag it into the side bar
  4. Now you need to type in your Facebook page URL where it says “fan page URL”
  5. Please type it just like this https://www.facebook.com/nyctechclub (notice there is no / at the end of the URL)
  6. Then just set the width to 250
  7. And check whatever options you want (like show face and responsive)
  8. Then click Save

Now let’s add a twitter feed (if you have twitter)

  1. For twitter the first thing you need to do is click a Text widget and drag it into your Sidebar
  2. Now to go your twitter account and hover over your image and click on Settings
  3. On the left side you will see your settings > click on Widgets
  4. Then click Create New
  5. On the next page just click Create Widget
  6. Now you should see some html code below your twitter feed on the page > copy that
  7. Go back to your dashboard page where you have dragged in the text widget
  8. Paste in the code into the text widget
  9. And then take this code below and replace everything BEFORE the “href”
  10. <a class="twitter-timeline" width="250" height="500"
  11. This makes the width the same as the Facebook like box.
  12. Now just click save

Now the last thing we’re going to do is drag in a plugin widget that we downloaded earlier called the Recent Post Extended Widget.

  1. Find the Recent Posts Extended widget and drag it into the side bar
  2. Then click to expand it and we are going to make some quick edits
  3. All we are going to do is change the thumbnail size to 75 x 75
  4. Check the box to display excepts
  5. Change excerpt length to 8
  6. Make sure the Read More box is unchecked
  7. Make sure below the box next to Use Default Styles is Checked
  8. Click Save

Now you can delete all the other widgets that are in the sidebar by default by clicking on them and clicking the delete line

And we’re done 🙂

Step 32: Translate Your Website (Optional)

If you want to translate your website, make sure you have the Polylang plugin installed and activated

Step 33: Make Header Menu

  1. Go to Dashboard > Appearance > Menus
  2. Click create new menu and title it Header Menu
  3. Make sure Header Menu is selected in the drop down menu section at the top
  4. Drag / Modify / Edit what you want to show in the menu from the left pages or create new menu items
  5. We are going to add the following pages: Home, About, Employees, Portfolio, Blog, and Contact Us
  6. Click Save

Note you can click and expand any menu item and change the URL to a custom URL and the Label name to a different name (just make sure you click save after you update)

You can also add any pages you want that aren’t in the list by using the Custom option.

Step 34: Modify Footer

Now this section you must be extra extra extra (and extra) careful.

If you delete one extra line of code – all your hard work will be wiped out. 

Follow this section carefully if you want to modify the header to show your website name.

  1. Go to your Dashboard > Appearance > click on Editor
  2. Click on Footer.php on the right
  3. Click the proceed button in the center
  4. Now delete everything you see
  5. Take the code below and wherever it says NYC TECH CLUB in red – change it to your web address and business name (two places you need to update – just two!)
<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package Sydney
 */
?>
 </div>
 </div>
 </div><!-- #content -->

 <?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
 <?php get_sidebar('footer'); ?>
 <?php endif; ?>

 <a class="go-top"><i class="fa fa-angle-up"></i></a>

 <footer id="colophon" class="site-footer" role="contentinfo">
 <div class="site-info container">
 <a href="<?php echo esc_url( __( 'http://www.nyctechclub.com', 'sydney' ) ); ?>"><?php printf( __( 'Proudly created by %s', 'sydney' ), 'NYC TECH CLUB 2016' ); ?></a>
 </div><!-- .site-info -->
 </footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

And click update file

Go to your website to make sure everything is still running 🙂

That’s it 🙂

Now one last reminder. If you turned off your WP Super Cache or changed the settings. Go back and activate/update it. And then celebrate…because you’re done!

Additional Information (Sydney Pro WordPress Theme)!!

If you want to create an online store or want to take your website to the next level – make sure you get the Premium version of the Sydney theme to help you out!

Congratulations!

That’s it. Super easy, super awesome. Super WordPress website for free 🙂 Congrats!!

Now please share this video, like, and comment in the Youtube video. It will help so so much with spreading the word about this tutorial that I spent countless hours making for amazing people like yourself.

All the best!
Jameson – NYC Tech Club