Hey good looking people!

ATTENTION!!

I have an updated Youtube video – please watch this link instead!!
Some steps are no longer necessary so please watch the new video!
(made October 2016) 

This is the latest and greatest website tutorial I have created 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 know any sort of programming or coding (they are the same thing, I don’t know why people say both words), 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 so if you need any images or text instructions – they are all provided below.

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.

What You Need

We will be recommending Hostgator for your hosting service here. You can also use hostgator to get your domain. If you want to use another service like GoDaddy to get your domain – follow this link for step by step instructions.

Why Hostgator?

Hostgator Discount

Please use the following discount code with your hostgator purchase – nyctech30 this is a 55% 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 code, which means Hostgator gives me a small commission when you use the code (no charge to you). It helps me run my website and helps me create these free tutorials for you, so thank you thank you thank you in advance!

Now that we got all of that out of the way. Let’s get started creating your new wordpress website!

Step 1: Get Domain and Hosting

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, so make sure you get hosting otherwise we can’t build out your website. This is a MUST.

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 55%

(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

  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: Install Suggested Plugins

  1. Now at the top of your page on your dashboard you should see some suggested plugins to install. Click on the link to install them.
  2. Then click to activate all of them.

Step 8: Download Plugins

Plugins are “tools” to help us build out our website. They make life a lot easier and are usually free courtesy of the WordPress community.

These are the plugins that we will be using to help make our wordpress website:

For each of these click Install and Activate

Step 9: Download and unzip all of the demo content (images, logo)

Click here to download a zip file of all the images used on the demo site in this wordpress tutorial.

ATTENTION!!

I have an updated Youtube video – please watch this link instead!!
Some steps are no longer necessary so please watch the new video!
(made October 2016) 

Step 10: Import Theme Settings

  1. Once you’ve download the file go to Types > Click on Dashboard > Scroll down to the bottom and click on Import/Export
  2. Go to Import Types data file and click Choose File
  3. Find the Sydney Settings XML and choose that
  4. Click Import File

Step 11: Download and Install Lightbox Colorbox Plugin

The Lightbox Colorbox plugin is no longer available. Download the SIMPLE LIGHTBOX plugin instead. I will provide additional modifications to make the gallery look perfect later in the tutorial (custom CSS section).

  1. Go to Plugins > Add New
  2. Search for the SIMPLE LIGHTBOX plugin
  3. Click Install
  4. Make sure you Activate the plugin

Step 12: Upload demo content (images, logo)

We will also upload all of these images now but I will walk you through how to do this step by step also if you want as we make this wordpress website.

  1. Go to your Dashboard > Media > Add New
  2. Click Select Files
  3. Click and add all the images (individually or all together)

Step 13: Create Homepage and Blog Page

We need to create two pages – one for our homepage and one for our blog page

  1. Go to your Dashboard > Pages > Add New
  2. Make a new page and title it Homepage
  3. Set the page attributes template to Front Page
  4. Now Click the link or button to create another new page
  5. Title this page Blog
  6. Click Publish

Now we need to set these two pages as the homepage and blog page

  1. Go to Appearance > Customize
  2. Go to Static Front Page
  3. Click on the button for Static Page
  4. Select Hompage for your front page
  5. Select Blog for your blog page
  6. Click the Save button

Step 14: Change Slider Images

Now let’s change the slider images (if you want)

  1. Stay on the Customize tab and click on Header Area
  2. Go to Header Type and make sure Full screen slider is selected for Front Page and No header for Site header type
  3. Now go to the Header Slider tab
  4. You can add up to 5 slider images
  5. To change the slider image just click Change image for each slider section
  6. To modify the text – just type in what you want it to say
  7. Scroll down to the bottom of the tab if you want to modify the button text and link it to another page (we just link it to the next section on the homepage)
  8. Make sure you click save

Step 15: Change Theme Option Settings

If you want to change some of the default color settings and layouts, this is what we are going to do in this section.

If you’re still on the Customize tab, click the < to go back to the main section

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

Blog Layout

I like a different layout for the blog page instead of the default one

  1. So click on Blog Options
  2. Select on Masonary
  3. Change the excerpt length to 20

Make sure you click Save

Step 16: 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!

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 17: 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. Click on the Theme tab and change the border color to #e0e0e0, then scroll down to Row Layout and select Full Width
  6. Now click add widget and select Sydney FP: Services
  7. Click Edit within the new widget
  8. Title it Our Services and make sure there is a “-1” in number of services you want to show
  9. Where it says “Enter the slug for your category or leave empty to show all services.” type in “type-a”
  10. Now just click done
  11. Push the Publish / Update button and go ahead and check your homepage to see it update if you want

If you are missing your categories go to your wordpress dashboard > hover over types > click on taxonomies > click on categories > go down to post types and check all the boxes > push save. Now they will show up.

Step 18: 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 19: 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 20: 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 21: 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 22: 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 23: 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 24-a: 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

You will also need to go to your lightbox plus colorbox settings and select “use for wordpress” for the pop ups to work 🙂 – watch video for these steps

Step 25: 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 26: 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 27: 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 28: 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 29: 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 30: 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 31: 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 🙂

Step 32: Add Custom CSS

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 33: 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

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!

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