How to Make a WordPress Website Using Empire Theme

Welcome to this new tutorial by NYC TECH CLUB on how to make a wordpress website for free – 2018 using the Empire Theme.

We’ll be updating this section later but for now, I just want you to know that the video tutorial follows every single step in this text tutorial. So if you want to use this text tutorial to learn how to build your wordpress website 2018, it works the same as our video on how to make a wordpress website that I’m linking to.

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.

Just a few tips for you before we get started.

  • If this is your first time making a wordpress website – take your time and enjoy the process
  • This video tutorial does not require any coding or programming
  • Take breaks so you don’t get frustrated
  • Pause the video if you need to. We go at a good pace
  • Try things out and don’t be afraid to make mistakes – that’s how you learn!
  • Have fun and ask me questions if you get stuck – I’m here to help
  • Learn how to make a website with wordpress 2018

Step 1: Get Domain and Hosting

This is one of the most important things in the tutorial. Without completing this step, we can’t really move forward. We need to get a domain and hosting in order to make a wordpress 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.

I recommend you go to Hostgator for your domain and hosting. I’ve been using them since I started because they’re simply the best, especially for you as you start scaling your web business.

There’s a variety of choices you can go with. I’ll link them below but if you asked me who I recommend, I’d say Hostgator

  • Fast
  • Reliable
  • Cheap
  • Great customer service

Click here to go to the Hostgator website and remember to use coupon code NYCTECH30 for 60% off 

Other hosting options include Godaddy and Inmotion (use nyctechclub for coupon code)

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 2: Go to Email Inbox

Now we’re getting places! Ok so you have your domain and hosting taken care of, so it’s time to go to our email inbox to see the confirmation email so we can start building our wordpress website!

It should be an email from Hostgator, so go ahead and click and open that up.

What we’re going to do is click on the cpanel link and go to our hosting cpanel where we can install WordPress.

Step 3: Login to Cpanel

Once you’re logged into your cpanel, this is your file manager. This is where you’ll go to install and delete files from your server.

You can also create an email address through your hosting, which I’ll show you how to do later.

For now, just click on install wordpress or click on quick install so we can install WordPress.

Step 4: Install WordPress Theme

Click on this link to download the Empire Theme by Soho Themes for free

Soho Themes has been collaborating with NYC Tech Club to create some themes to bring to you so I’m really excited to be able to share this theme with you for free. You’re lucky because if you weren’t watching this video you would have to pay $60 for this wordpress theme. Keep it our little secret!

Step 5: Install Plugins

First we’ll install the required plugins on the WordPress dashboard. Then we need to install a few premium plugins

Download Plugin Zip File for Premium Themes

Here is a list of the plugins you should have installed and activated after this step

  • Slider Revolution
  • WPBakery Visual Composer Page Builder
  • Recent Posts Widget Extended
  • Contact Form 7
  • Empire Custom Post Types
  • Meta Box
  • Meta Box Conditional Logic
  • Meta Box Tabs
  • Newsletter
  • Redux Framework
  • SVG Support

Copyright Footer plugin – This is a premium plugin we will talk about later as we edit our footer.

Step 6: Download and Install Demo Images

Click on this link to download the zip file with all the images that we are using in this tutorial to learn how to make a wordpress website for free.

You can use your own images if you want. I will also show you how to upload your own images onto wordpress.

Please note that the images you’re downloading maybe slightly different than the video because the images I use are copyrighted and require a license to use.

To upload your files

  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 7: Select WordPress Theme Settings

Now that we installed WordPress, what I want to do is teach you how to select the settings for your WordPress website. What this will do is let you customize your site so when you start learning how to make your wordpress website, you will already have the settings you want.

  1. Go to your WordPress Dashboard
  2. Hover over Empire Theme
  3. Click on Theme Options

I’ll list out what we select for each section below if we make any changes to the default settings. Otherwise, go play around with the settings for your own wordpress website whenever you want! Just make sure to click save!

General

  • I leave everything as is since I don’t want to change the site colors from the default blue color

Header

  • Change the header menu color to #000000 (for black)
  • This is where you can upload your own logo if you want!

Page

  • No change

Blog

  • I’m going to add a newsletter sign up optin here
  • Customize the heading and subheadline (this will show up on your blog post pages)

Footer

  • Add your social media links here
  • If you want to modify your footer you can do so by getting the Soho Themes Copyright plugin (premium)
  • We change the copyright background color to #000000

Typography

  • Here is where you can change your font styles for your entire wordpress website

Translations

  • Only need to change something here if you’re translating your website into another language

Custom CSS

  • No change

Import/Export

  • No change

Step 8: Create Free Logo

If you want to learn how to make a Free WordPress Website logo go to Logomakr

The video will show you how to navigate the site. My suggestion is you resize the logo by clicking and dragging the corners to make the logo smaller so it fits and looks good in the navigation menu.

  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 9: 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 change

Step 10: Create Homepage and Blog Page

Now the fun really begins because this is when we start learning how to make our wordpress website 🙂

The first thing we are going to do is create our first page – the wordpress website home page.

  1. Go to your wordpress dashboard
  2. Hover over pages
  3. Click add New
  4. Title the page Home
  5. Click the publish button

Let’s create another page using the same steps and title it Blog.

Well come back to this page in a few minutes. But first let’s set the homepage.

Step 11: Set Homepage

  • Now let’s go back to the wordpress dashboard
  • Hover over settings
  • And click on reading
  • Select Front page option
  • In the drop downs put in Home and Blog
  • Make sure to click save!

Step 12: Create Slider for WordPress Website Homepage

Step 13: Make and Customize Homepage

  • Now go back to your wordpress dashboard > hover over pages
  • Click on edit homepage
  • Click on the backend (or front end) editor for visual composer
  1. Add a new row
  2. Make the row stretch row and content
  3. Click the + and add a Revolution Slider 5 widget
  4. Select your slider
  5. Click Save

Now we’re make our about section for the wordpress website

  1. Add a new row
  2. Default spacing. Add 0px for bottom margin in the design option tab
  3. Customize the rows to 4/12 + 8/12
  4. Add a heading
  5. Add a text box
  6. Add a button
  7. Add a single image -> large size
  8. Click save

Now we are going to learn how to build the services section for our wordpress website

  1. Add a new row
  2. Stretch row
  3. Add background color for row: #f4f4f4
  4. Add a heading and title it “Our Services” -> H2, Centered, Style 2
  5. Add a new row and change the columns to three
  6. Add Service Modules with description, icons, images and links (do this three times)
  7. Add a button

For the next about section I just make a duplicate of the previous

  1. Add background color for row: #ecf2f4
  2. Add 0px for bottom padding and bottom margin)
  3. Add an image
  4. Go ahead and customize this however you want

Now let’s learn how to make the section for our blog posts

  1. Add a new row
  2. Select stretch row – add a background color #f4f4f4
  3. Add a heading and title it “Latest News”
  4. Add blog post module and customize it with 3 blog posts

The next thing for this wordpress website homepage we’re going to create is the testimonial section (optional)

  1. Add a new row
  2. Select stretch row
  3. Add 0px for bottom margin (optional – I do not add this)
  4. Add a heading that says “What Our Clients Are Saying”
  5. Add an inner row with 4 columns
  6. Add single testimonials

Now let’s finish off learning how to make our wordpress website homepage with a call to action

  1. Add a new row
  2. Stretch row
  3. Add background color: #00a9da and 0px bottom margin
  4. Add a heading that says “Ready to get the ball rolling?”
  5. 20px bottom margin
  6. Add a button that says Contact Us
  7. Customize the button if you want

Now that you are done learning how to make your wordpress website homepage for free – make sure you click save!

Click Save! (Yes I said it again haha)

Step 12: Make About Page

Now we could just go and make our wordpress blog posts but I want to do this in a certain order. If you don’t want to learn how to make any of these wordpress website pages then go ahead and skip these steps. You do not have to do them all.

But for the people that want to learn how to build a beautiful about page for their wordpress website this section is for you.

  1. Go to your wordpress dashboard > hover over pages > click add new
  2. Title the page “About”
  3. Uncheck show page title (we’re going to make our own)
  4. Select the backend visual composer editor
  5. Add a row for your custom page title
  6. Select stretch row and content
  7. Add 40px to top padding for row
  8. Add a background image and select cover option (we darken the image)
  9. Add a heading and title it About (h1, white, style 1)
  10. Add a separator (white, center, 3px, 10%, -20px for top margin padding)

Now let’s add a description row for our wordpress website

Add a new row (leave everything as the default)

  1. Change the columns to “5/12 + 7/12”
  2. Add a text block and add text
  3. Add a single image (I add 500×300 for the image size but you can put in whatever you want)
  4. Center Image

Now we will learn how to create the services section for our wordpress website 2017

  1. Add a new row > stretch row > add background color: #f4f4f4
  2. Add a Heading and title it “Our Process” with subtitle “How We Do it”
  3. Add an inner row with 3 columns
  4. Add service modules (select style 2 option)

Now we are going to add another about section

  1. Add a new row > default > columns 7/12 + 5/12
  2. Add a single image > full size
  3. Add a text box
  4. Add a button

Now we are going to learn how to create another call to action at the bottom of our wordpress website page

  1. Create a row (stretch row and content)
  2. Add background color: #00a9da
  3. 0px bottom margin
  4. Add a heading > 20px bottom margin
  5. Add a button and customize it

Click publish when you’re done 🙂

Step 13: Learn How to Make WordPress Website Success Stories Page

  1. Go to wordpress website dashboard
  2. Hover over pages and click new page and title it Success Stories
  3. Check to hide page title
  4. Turn on backend visual composer editor
  5. Add a row > stretch row > Add image > select cover >40px top padding
  6. Add a heading and title it Success Stories (H1, change font color if you want to white)
  7. Style 1 heading option
  8. Add a separator (white, 3px, 10%, -20px for top margin padding)

Let’s now add a row for our wordpress website testimonials

  1. Add row (change columns to 4)
  2. Add single testimonials

Now let’s build the client section for our wordpress website 🙂

  1. Add a new row
  2. Stretch row
  3. 0px for bottom margin
  4. #ededed background color
  5. Change it to 4 columns
  6. Add logo blocks

Now we’ll add our call to action

  1. Add a new row
  2. Stretch row
  3. Add 0px for bottom margin
  4. #00a9da for color
  5. Add a heading and title it “Stay Updated” > 20px bottom margin
  6. Subtitle “Sign up for our Newsletter!” (change to H3)
  7. Add a newsletter module (customize button colors)

Click publish when you’re done!

Step 14: Team Page

Now we are going to learn how to make a wordpress website page for your employees

  1. Go to your wordpress dashboard and create a new page
  2. Title the wordpress page “Team” or any other name you want
  3. Check the box to disable page title (we are going to create a custom one)
  4. Turn on the backend editor
  5. Add a new row for your wordpress website page
  6. Stretch row
  7. Add a background image
  8. Change the option to cover
  9. 40px top padding for row
  10. Add a heading and title it “Meet The Team” (style 1)
  11. Add a separator line (white, 3px, 10%, -20px for top margin padding)
  12. Add a new row for your team member photos
  13. Add an inner row
  14. Change the row to 4 rows
  15. Add team member modules
  16. Create a new row for call to action > stretch row > 0px bottom margin > background color #00a9da
  17. Add a heading and put in “Work With Our Team” (style 2) > 20px bottom margin
  18. Add a button “Get In Touch” > customize the button > 20px bottom margin

Step 15: Build Portfolio Page

Step 16: Create Blog Posts

Now we are going to create some wordpress blog posts to show up on our homepage and also for our blog post page.

  1. Go to your wordpress dashboard
  2. Hover over Posts
  3. Click Add New
  4. Add wordpress blog title
  5. Add text
  6. Add featured image
  7. Make sure you choose the title option you want
  8. Publish when ready

Repeat these steps if you’d like to make additional blog posts 🙂

Step 17: Create Blog Post Page

  • Add a new page and title it blog
  • Select Masonry option or any option that you want for the template on the right hand side
  • Disable the page title
  • Add a row (stretch row and add a background image > cover)
  • Add a heading for your page title (style 1, white)
  • Add another row for your call to action (stretch row, 0px bottom margin, background color #00a9da)
  • Add a heading (style 2, 0px bottom margin)
  • Add a newsletter form
  • Click publish when ready!

Step 18: Customize Sidebar

The sidebar shows up on any page you want it to but specfically the blog post and blog page for this wordpress website that we are making.

To customize the side barfor the wordpress website that you are building, do the following:

  1. Go to your wordpress website dashboard
  2. Hover over appearance and click on widgets
  3. Drag whatever widgets you want into your sidebar
  4. Watch the video if you want to format some of the plugins we use
  5. Click save when you’re done

Step 19: Contact Us Page

  1. Go back to your wordpress dashboard and create a new page
  2. Title the page FAQ
  3. Disable the page title
  4. Turn on the backend visual composer editor
  5. Add a row > stretch > background image > select cover > 40px top padding
  6. Add a heading for your page title (h1, style 1, white)
  7. Add a separator with -20px for top margin
  8. Create a new row for your contact information and change the row to 4 columns
  9. Add some contact info modules
  10. Add another row for the contact form (stretch row, 20px top padding, 0px bottom padding, #f4f4f4 background color)
  11. Add an inner row and change the column size
  12. Add a Heading for your contact form title (we will change the contact form layout at the end of this section)
  13. Add another row for your map (stretch row and content with no padding)
  14. Add a map module (0px bottom margin)
  15. Add a new row for your call to action (stretch row and content, 0px bottom margin, background color:#00a9da)
  16. Add a heading
  17. Add a call to action newsletter module

Click publish to publish your wordpress website page!

Now on your wordpress dashboard, hover over CONTACTS and click on forms

  • Click on edit Form 1
  • Replace the html with the following to customize your contact form:
[text* your-name placeholder “Name”]

 

[email* your-email placeholder “Email”]

 

[textarea your-message placeholder “Message”]

 

 

 

[submit “Send”]
 

Click save/update when you’re done

Now you have just learned how to make your wordpress website homepage for free 🙂 We’ll come back to this page in a big to finish learning how to make our wordpress website menus but if you want to make other pages like a terms and conditions page or privacy page, feel free to do that yourself!

Step 19: FAQ Page

FAQ time (if you have one) for your website. Let’s learn how to make this page for our wordpress website. Side note, are you having fun building your website from scratch following this step by step wordpress website tutorial?

  1. Go back to your wordpress dashboard and create a new page
  2. Title the page FAQ
  3. Disable the page title
  4. Turn on the backend visual composer editor
  5. Add a row > stretch > background image > select cover > 40px top padding
  6. Add a heading for your page title (h1, style 1, white)
  7. Add a separator with -20px for top margin
  8. Add another row and change it to two columns
  9. Add headings for each FAQ section
  10. For FAQs add accordion modules and add your questions and answers
  11. Add a new row for your wordpress website call to action
  12. Make the row a stretch row, background color: #00a9da, and 0px for bottom margin
  13. Add a heading (20px for bottom margin) and title it Have Any More Questions?
  14. Add a button and customize it

Make sure you click publish wordpress website page when you’re done!

Step x: Change Permalinks for WordPress Website

Step x: Add Favicon

Step x: Create Header Menus

Create Footer Menu