Create a WordPress Website 2015

 

Download Images View Instructions View Demo Website

Introduction

Introduction 00:00:00
Overview & Costs 00:04:18
Get Domain Name & Hosting
Get Hosting & Domain Name 00:06:13
Get 35% Discount enter THIRTYFIVE 00:09:15

Install WordPress 00:10:41

Create Your Website

Login To WordPress 00:14:52
Change Password 00:15:47
Update WordPress 00:16:57
Uninstall Unnecessary Plugins 00:17:29
Get TESSERACT Theme 00:18:57
Install TESSERACT Theme 00:20:31
Header Navigation Colors 00:21:58
Navigation Link Colors 00:22:53
Site Title & Tagline 00:23:45
Remove Sample Page 00:24:29
Add All Pages 00:24:50
Add Menu 00:26:14

Build Home Page

Setup Home Page 00:27:55
Remove Sidebar 00:29:44
Add Plugins 00:30:52
Edit Home Page 00:35:16
Remove Title 00:38:14
Download Images 00:40:17
UnZip Images 00:42:12
Build Your Home Page 00:42:47

Add Logo 01:27:48
Create Credits Page 01:30:20
Add Footer Menu 01:31:57

Create About Page 01:33:31

Create Our Work Page 1:48:39

Build Services Page 01:57:13

Create Contact Page 02:09:17

Top Navigation Buttons 02:15:08
Social Media Icons 02:21:22
Make Headline Responsive 02:25:01
Background Position 02:26:22
Updating Your Theme 02:28:17
How To Make Great Looking Websites 02:29:28
Congratulations!! 02:31:01


Steps 1 + 2

Buy Domain Name & Get Hosting

Your domain name is the name of your website.  My domain is is Tyler.com and your domain name will be your-business.com.  Luckily we can get your domain name and hosting at the same place HostGator.com.

  1. Visit HostGator.com
  2. Click on Web Hosting on the top left.
  3. Choose the Baby or Hatchling plan.
  4. Enter in information
  5. Use Coupon code ThirtyFive to save 35%

I get credit if you use the coupon code ThirtyFive this helps me make these tutorials for free.  Thanks for everyone who uses it.  Now let’s move on!


Step 3

Install WordPress

HostGator will now have sent you a welcome email that has your cpanel login information. You will use this information to install WordPress using the following steps.

  1. Click on your Cpanel link.
  2. Use your username and password provided in the email.
  3. Scroll down to software/services
  4. Click QuickInstall
  5. Click WordPress
  6. Follow instructions to install WordPress
  7. If you just bought hosting you may have to wait 2 – 24 hours for your website to work
  8. Go to your-website.com/wp-admin to login
  9. Login with your username & password

Step 4

Create Your Website

Now it’s time for the fun part! First let’s prepare your website and change your password so that we are all on the same page and also have WordPress up to date.

Change Password

  1. Click on Users
  2. Click your name
  3. Scroll down and enter your password twice
  4. Click Update Profile

Prepare WordPress

  1. Click on Plugins
  2. Check off, JetPack, Mojo Themes and Wp Super Cache
  3. On the drop down box select Deactivate
  4. Click Apply
  5. On the drop down box select Delete
  6. Click Apply

Install Theme

  1. Go to Tyler.com
  2. On the top right click Download Theme
  3. Save it to your Desktop
  4. Click Appearance
  5. Click Add New
  6. Click Upload Theme
  7. Click Browse and select the theme from the Desktop
  8. Click Open
  9. Click Install
  10. Click Activate

Changed Header Menu Colors

  1. Hover over your website name on the top left
  2. Click Customize
  3. Click Header Options
  4. Click Header Colors
  5. Click Select Color
  6. Click Save and Publish

Do the same thing for all the colors you want to change.

Edited Site Title

  1. Please help me fill this out
  2. write the instructions in the comments below
  3. I really appreciate it, you are helping everyone out
  4. thanks 🙂

Delete Pages

  1. Please help me fill this out
  2. write the instructions in the comments below
  3. I really appreciate it, you are helping everyone out
  4. thanks 🙂
  5. P.S. if you see any errors let me knwo
  6. see what I did there?

Add Pages

  1. Go to Tyler.com
  2. On the top right click Download Theme
  3. Save it to your Desktop
  4. Click Appearance
  5. Click Add New
  6. Click Upload Theme
  7. Click Browse and select the theme from the Desktop
  8. Click Open
  9. Click Install
  10. Click Activate

Create Navigation Menu

  1. Please help me fill this out
  2. write the instructions in the comments below
  3. I really appreciate it, you are helping everyone out
  4. thanks 🙂
  5. P.S. if you see any errors let me knwo
  6. see what I did there?

Make Home page your Front Page

  1. Please help me fill this out
  2. write the instructions in the comments below
  3. I really appreciate it, you are helping everyone out
  4. thanks 🙂
  5. P.S. if you see any errors let me knwo
  6. see what I did there?

Change Full Width Template

  1. Please help me fill this out
  2. write the instructions in the comments below
  3. I really appreciate it, you are helping everyone out
  4. thanks 🙂
  5. P.S. if you see any errors let me knwo
  6. see what I did there?

Install Plugins

  1. Page Builder by SiteOrigin
  2. SiteOrigin Widgets Bundle
  3. Visual Editor by BlackStudio TinyMCE Widget
  4. Contact Form 7
  5. Easy Google Fonts
  6. Lightbox Plus Colorbox
  7. Spacer
  8. Title Remover

!!! Thanks so much Greg for helping me out with this !!!! 🙂

Download Images

  1. Click the download images button above to download the images
  2. Save them to your Desktop
  3. Double click the zip file to unzip it
  4. Now you have all the images used in this tutorial

Download Images

[spacer height=”70px”]

Create Home Page

Create Home Featured Headline

  1. Go to Pages Then Click Home
  2. Click Page Builder Tab
  3. Upload Background Image
  4. Copy Headline Code: <span class="home-headline">EXPLORE</span>
  5. Paste it into your website
  6. Copy Sub-Headline Code: <span class="home-sub">everything and do what you love</span>
  7. Paste it into your website
  8. Copy Button Code:  <a href="/about" class="button primary-button">Our Mission</a>
  9. Paste it in your website
  10. Copy another Button Code: <a class="button secondary-button" href="/our-work">View Our Work</a>
  11. Paste it right next to your first button
  12. Create a 300px spacer
  13. Go to visual editor
  14. Center all text
  15. Press done
  16. Click Update
  17. View Page
  18. Go back into your dashboard
  19. Go to settings > google fonts
  20. Click Create a New Google Font
  21. Name it Home Headline
  22. Click Create Google Font
  23. Under Add CSS Selector type .home-headline
  24. Click create a new font control
  25. Go to your homepage and roll over your name and click customize
  26. Click Typography > Theme Typography
  27. Under Home Headline click Edit Font and use the following settings:
    • Font Family: Roboto
    • Font Weight/Style: Regular
    • Font Color: #71ade1
    • Font Size: 100px
    • Line Height 0.8
    • Letter Spacing 6px
    • Margin Top: 151px
  28. Go back into your dashboard
  29. Go to settings > google fonts
  30. Click Create a New Google Font
  31. Name it Home Sub
  32. Click Create Google Font
  33. Under Add CSS Selector type .home-sub
  34. Click create a new font control
  35. Go to your homepage and roll over your name and click customize
  36. Click Typography > Theme Typography
  37. Under Home Sub click Edit Font and use the following settings:
    • Font Family: Roboto
    • Font Weight/Style: 300
    • Font Color: #515151
    • Font Size: 19px
    • Line Height 0.8
    • Margin Bottom: 37px

Thank you so much Marten for improving these steps!!  🙂

Create Another Headline

  1. Create a new row that goes 100% accross
  2. Click on edit to open the visual editor
  3. Click on the text tab
  4. Paste in the headline code: <span class="home-making">making the world a better place</span>
  5. Click Update
  6. Go to Settings > Google Fonts
  7. Click create a new font control
  8. Enter Home Making
  9. Add CSS selector .home-making
  10. Click Save Font Control
  11. Go to your homepage and roll over your name and click customize
  12. Click Typography > Theme Typography
  13. Under Home Making click Edit Font and use the following settings:
    • Font Family: Roboto
    • Font Weight/Style: 100
    • Font Color: #4c4c4c
    • Font Size: 37px
  14. Click Save & Publish

Create 3 Featured Boxes

  1. Edit your Home Page
  2. Click Add Row
  3. Set row layout to 3
  4. Add visual editor to each of the three columns
  5. Go to logomakr.com to create 3 icons search for float, gallery, ocean
  6. Colors:#81BADA , #FEE3D6 , #81BADA
  7. Crop them and make sure they are all 209px in height
  8. Save the logo to your desktop
  9. Copy the credits to a word document, notepad or textedit
  10. On the first of the 3 visual editors click edit
  11. Click Add media and add in your logo, make sure it is full sized
  12. On a new line type in your headline and highlight it and make it H3
  13. On a new line type in a description
  14. Go to the text tab and paste in this code: <a class="button primary-button" href="/our-work">Our Work</a>
  15. Go back to the visual tab and highlight everything and center it and click done
  16. Do steps 9 – 14 for each column make sure to change the button link and text.
  17. Update your page and view your marvelous progress!

Add Bottom Call To Action

  1. Edit your home page
  2. Add a row
  3. Keep it at 2 columns 50% and 50%
  4. Add visual editor to the first column
  5. Click on the text tab and paste in this code: <span class="home-our">Our Work</span>
  6. And underneath it paste in this code:  <span class="home-we">We believe actions speak louder than words.</span>
  7. Click done.
  8. Add visual editor to the second column and click on the text tab
  9. Add a 30px spacer
  10. Paste in these two buttons <a class="button darkblue" href="/services">Our Services</a> <a class="button darkblue-outline" href="/our-work">See Us In Action</a>
  11. Add in another 30px spacer
  12. Click done
  13. Click on the wrench and click edit row
  14. Click on design and select background color  use code #FAFAFA
  15. Click Save then update your website
  16. Go to Settings > Google Fonts
  17. Click create a new font control
  18. Name it Home Our
  19. Add CSS selector .home-our
  20. Click Save Font Control
  21. Click create a new font control
  22. Name it Home We
  23. Add CSS selector .home-we
  24. Click Save Font Control
  25. Visit your homepage and click on Customize
  26. Click Typography > Theme Typography
  27. Under Home Our Click Edit Font and use the following settings
    • Font Family: Roboto
    • Font Weight/Style: 300
    • Font Color: #8bc3ed
    • Font Size: 35px
    • Line Heigh: 0.8
    • Margin:Top 38px
  28. Under Home We Click Edit Font and use the following settings
    • Font Family: Roboto
    • Font Weight/Style: 300
    • Font Color: #898989
    • Line Heigh: 0.8
  29. Click Save and Publish

Create Logo

  1. Go to Logo Maker
  2. Search for Compass and choose your logo
  3. Change color to white
  4. Save logo to your Desktop
  5. Copy the credits to a document
  6. Go to customize
  7. Click General > Logo
  8. Upload your logo and press Save & Publish

Create a Credits Page

  1. Click Pages > Add New
  2. Type in Credits
  3. Click on the Text Tab
  4. Paste in all your credits
  5. Add a link to my website on there 🙂
  6. Make it a Full Width Template
  7. Click Publish or Update

Setup Footer Menu

  1. Click Appearance > Menu
  2. Please help me fill this out 🙂

[spacer height=”70px”]

Create About Page

Main Image and Headline

  1. Edit your about page and create a new row 100% across.
  2. Add a visual editor and go to the text tab.
  3. Click the wrench icon, then click on the design tab
  4. Select your background image and set your background image display to cover.
  5. Click done.
  6. Paste in the headline: <span class="about-headline">My mission is to help you start a business so you can change the world.</span>
  7. Go to visual and align center
  8. Create a line break at after start
  9. Click Update or Publsih
  10. Go to settings > google fonts and click create a new font control
  11. Call it About Headline
  12. Add CSS selector .about-headline
  13. Save it
  14. Go to your homepage and click on customize
  15. Click Typography > Theme Typography
  16. Edit the About Headline
  17. Set the settings to the following
    • Font Family: Roboto
    • Font Weight/Style: 100
    • Font Size: 23px
    • Background Color: #FFFFFF
    • Letter Spacing: 2px
    • Margin Top: 174px
    • Margin Bottom: 316px
    • Padding Left: 10px
    • Padding Right: 10px
  18. Save it and look at the beauty you made!

 

Creating Text Below Main Image

  1. Add a new row with 3 columns 15%, 70%, 15%
  2. Click Save
  3. Click the center column and add a visual editor
  4. Click on the text Tab
  5. Paste in this code: <span class="about-text">Hi, my name is Tyler Moore, and I am so grateful to be able to help people succeed with over 8 million views and 100,000 subscribers.  All I can say is, "Thank you".</span>
  6. Go to the visual tab and align center
  7. Click Done
  8. Click Update or Publsih
  9. Go to settings > google fonts and click create a new font control
  10. Call it About Text
  11. Add CSS selector .about-text
  12. Save it
  13. Go to your homepage and click on customize
  14. Click Typography > Theme Typography
  15. Edit the About Text
  16. Set the settings to the following
    • Font Family: Roboto
    • Font Weight/Style: 100
    • Font Size: 22px
    • Margin Top: 125px
    • Margin Bottom: 125px
  17. Save it and look at the beauty you made!

Create 3 Image Boxes

  1. Edit your about page and add new row with 3 columns 33%, 33%, 33%
  2. Click on the wrench and edit the row, and under the layout tab, make it full width stretched
  3. Add visual editor in the first column and edit the text
  4. Add a spacer that is 250px
  5. Under design upload the background image
  6. Do the same for all the other rows
  7. Click Update

Create Bottom About Text

  1. Add a new row with 3 columns 15%, 70%, 15%
  2. Add a visual editor to the middle column and edit it.
  3. Click on the text tab
  4. Paste in the text: <span class="about-text">I live in the mountains of Los Angeles, near the ocean with my wife, Jennifer and Dog, Stella.</span>
  5. Click Done
  6. Click Update

Create Our Work Page

Add All Content

  1. Edit the Our Work page and make the template full width
  2. Remove the title from the page
  3. Add a row with 3 columns 15% , 70% , 15%
  4. Add a visual editor to the center column
  5. Click the wrench and duplicate row so you have a total of 3
  6. Paste this into the first visual editor: <span class="our-text">We want to celebrate the oceans abundance, it's calmness and patience. Everything flows to the ocean because it is lower than it.</span>
  7. Paste this into the second visual editor: <span class="our-text">Our home is on land and our connection is with people. The more we help out each other the better the world becomes.</span>
  8. Paste this into the third visual editor: <span class="our-text">Let's look to the stars as role models, they give and give. That's why the world rotates around them.</span>
  9. Create a new row that is 100% wide
  10. Add a visual editor to it
  11. Put in a spacer that is 400px into the visual editor
  12. Click the wrench and duplicate it two more times so there is a total of 3
  13. For the visual editor where you put the 400px spacer click on the wrench and edit row
  14. Under design upload a background image I used backgrounds Jellyfish, Cliff & Night Sky for the three backgrounds.
  15. Change the background image display to Cover press save.
  16. Do steps 11 – 13 for the other visual editors with the 400px spacer
  17. Drag each 400px row under your text row.
  18. Click Update
  19. Go to settings > google fonts
  20. Create a new google font called Our Text
  21. Add CSS selector .our-text
  22. Click Save
  23. Visit your website and go into the customizer
  24. Click Typography > Theme Typography
  25. Edit the Our Text
  26. Set the settings to the following
    • Font Family: Roboto
    • Font Weight/Style: 100
    • Font Color: #727272
    • Font Size: 28px
    • Letter Spacing: 2px
    • Margin Top: 111px
    • Margin Bottom: 111px
  27. Save it, wonderful!

 

Create Services Page

Add All Content

  1. Edit the Services page and make it a full width template
  2. Remove the title from the page
  3. Add a row with 2 columns 50%
  4. Click the wrench and duplicate the column so that there is a total of 5 rows
  5. Alternating from left to right paste in the following text to each of the alternating columns
  6. First Left Column: <span class="services-headline">Relax</span> When you get to our retreat you will be given space to relax and enjoy nature and the scenery.
  7. Second Right Column: <span class="services-headline">Begin</span> After you are settled, you will be given some tea with herbs in it that will help your reflecting process.
  8. Third Left Column: <span class="services-headline">Reflect</span> The next part isn't always easy, you must look in and reflect, often facing emotions you haven't faced in a while.
  9. Fourth Right Column:<span class="services-headline">Enjoy</span> With your emotions released you will often feel renewed and whole again with a calmness and joy beyond any words.
  10. Fifth Left Column: <span class="services-headline">Schedule a Visit</span> Call or email to schedule a 3 day retreat or check out our work.
  11. Also add a 20px to the bottom of this column
  12. Next on the first right column go to the visual editor and add a 20px spacer
  13. Underneath the spacer insert an image
  14. Do this on the opposite side of each text.  I used images: Relax, Begin, Reflect & Enjoy in that order.
  15. On the fifth right column add in a 40px spacer in the text tab
  16. Paste in these two buttons: <a class="button darkblue" href="/contact"> Schedule It</a> <a class="button darkblue-outline" href="/our-work">See Our Work</a>
  17. Click on the visual tab and highlight the buttons and align them to the right.
  18. Click Save
  19. Click on the wrench icon and edit row
  20. For every other row under layout set it to full width and under design set the background color to #f9f9f9
  21. Click Update
  22. Go to settings > google fonts
  23. Create a new google font called Services Headline
  24. Add CSS selector .services-headline
  25. Click Save
  26. Visit your website and go into the customizer
  27. Click Typography > Theme Typography
  28. Edit the Services Headline
  29. Set the settings to the following
    • Font Family: Roboto
    • Font Weight/Style: 100
    • Font Color: #5e5e5e
    • Font Size: 42px
    • Margin Top: 18px
  30. Save it, amazing!

 

Create Contact Page

Well, let’s begin!

  1. Edit your contact page
  2. Remove the title from the page and make the page full width
  3. Add a row that is 100% across
  4. Add the SiteOrigin Google Map Widget
  5. Edit the map with the following settings
    • Map Center: Malibu, CA
    • Height: 200
    • Zoom To Scroll: Uncheck
  6. Add another row  with 2 columns 70% , 15%
  7. Add two visual editors to the left on top of each other and one visual editor on the right side.
  8. On the first left visual editor add your Email, Phone, & Address
  9. Add some space to the top by pressing enter above all the text
  10. Add an Horizontal Line below all the text.
  11. Bold the email phone and address
  12. On the bottom visual editor add a spacer height that is 380
  13. Under the Design tab set the background image, I used the Skateboard image
  14. Choose Cover as the background display
  15. Click Update
  16. On the left side of your dashboard click contact
  17. Copy the Shortcode
  18. Go back to your contact page
  19. Paste in the shortcode in the text tab into the right column
  20. Click Done
  21. Update your page, congrats!

 

Polishing Your Website

 

Creating Main Navigation Buttons

  1. Go Appearance >  Lightbox Plus Colorbox
  2. Under General click Use Secondary Lightbox
  3. Scroll all the way down to the secondary lightbox settings
  4. Use settings:
    • Elastic
    • 300
    • 5%
    • Width: 80%
    • Height:80%
    • Max Width: 90%
    • Max Height: 90%
    • Secondary Class Name: popup
  5. Click Save all Settings
  6. Go to customize > Header Options > Header Right Block Content
  7. Make sure button is selected
  8. Paste in the following code: <a href="http://www.youtube.com/embed/oc1HDF2AyNE" class="popup button primary-button">Watch the Video</a> <a href="/our-work" class="button secondary-button">Our Work</a>
  9. Click Save & Publish

Add Social Media

  1. Click on Customize > Social
  2. Choose which social media website you would like to use and insert url
  3. Go to logomakr.com and find your image and download it to your Desktop
  4. Upload your image
  5. Repeat for every social network you are on
  6. Go back and go to Footer Options > Footer Content
  7. Choose Social Icons
  8. Click Save & Publish

Resize Mobile Headlines

  1. Go to your headline you want to resize for mobile
  2. Click Edit on the visual editor
  3. Click the text tab
  4. Where it says: <span class="home-headline">EXPLORE</span>
  5. Change it to: <span class="headline-resize home-headline">EXPLORE</span>
  6. Click Done
  7. Update Page

Position Background Focus

  1. Click on the wrench with on a row with an image
  2. Click Attributes
  3. Under CSS Styles paste: background-position:100% 0%;
  4. Click Save
  5. Click Update

 

Tips

Updating Your Theme

  1. Go to appearance > themes
  2. Temporarily activate a random theme
  3. Go to your theme and click on the image
  4. Then at the bottom click delete
  5. Upload the updated theme
  6. Click Activate

Note: Make sure to save the settings for your header and footer especially the button codes as they will be lost.

Making Amazing Layouts

To make amazing website layouts it is easiest to find inspiration from other people who have amazing layouts also.  Don’t copy “internet marketers” or even your local businesses.  Let them do whatever it is that they are going to do.  You want to be inspired from the best of the best.  I love the following websites:

https://www.airbnb.com/
https://www.uber.com/
https://www.campaignmonitor.com/
https://www.udemy.com/
http://mailchimp.com/
https://www.olark.com/
https://www.kissmetrics.com/
http://www.skype.com
http://www.apple.com
http://www.envato.com/
http://www.teamtreehouse.com/

Getting Help

I want you to not be afraid to try and make a website.  I have noticed that a lot of people think that they can’t do it.  I am here to tell you “Yes you can!”.  If you follow my advice step by step and something goes wrong or you don’t understand something I am here for you.  Once you get the hang of it, I just ask that you also help someone else out so we can be a community that helps and supports each other.

Always Do Good

Remember to always do good in business.  The better you can do for people the more successful you will become.

Congratulations!!

Good job!  Most people don’t have the guts to not only start a business but commit.  I really respect you.  I would love to see your website and make some sort of showcase out of all the amazing websites people have made.  If you have any comments or questions let me know, I’m here for you.