How to Make A WordPress Website - 2015 (repost: tyler.com)

Home
Edit Theme by Tyler Moore
Videos
Download Theme

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.
Visit HostGator.com
Click on Web Hosting on the top left.
Choose the Baby or Hatchling plan.
Enter in information
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.
Click on your Cpanel link.
Use your username and password provided in the email.
Scroll down to software/services
Click QuickInstall
Click WordPress
Follow instructions to install WordPress
If you just bought hosting you may have to wait 2 – 24 hours for your website to work
Go to your-website.com/wp-admin to login
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
Click on Users
Click your name
Scroll down and enter your password twice
Click Update Profile
Prepare WordPress
Click on Plugins
Check off, JetPack, Mojo Themes and Wp Super Cache
On the drop down box select Deactivate
Click Apply
On the drop down box select Delete
Click Apply
Install Theme
Go to Tyler.com
On the top right click Download Theme
Save it to your Desktop
Click Appearance
Click Add New
Click Upload Theme
Click Browse and select the theme from the Desktop
Click Open
Click Install
Click Activate
Changed Header Menu Colors
Hover over your website name on the top left
Click Customize
Click Header Options
Click Header Colors
Click Select Color
Click Save and Publish

Do the same thing for all the colors you want to change.
Edited Site Title
Please help me fill this out
write the instructions in the comments below
I really appreciate it, you are helping everyone out
thanks
Delete Pages
Please help me fill this out
write the instructions in the comments below
I really appreciate it, you are helping everyone out
thanks
P.S. if you see any errors let me knwo
see what I did there?
Add Pages
Go to Tyler.com
On the top right click Download Theme
Save it to your Desktop
Click Appearance
Click Add New
Click Upload Theme
Click Browse and select the theme from the Desktop
Click Open
Click Install
Click Activate
Create Navigation Menu
Please help me fill this out
write the instructions in the comments below
I really appreciate it, you are helping everyone out
thanks
P.S. if you see any errors let me knwo
see what I did there?
Make Home page your Front Page
Please help me fill this out
write the instructions in the comments below
I really appreciate it, you are helping everyone out
thanks
P.S. if you see any errors let me knwo
see what I did there?
Change Full Width Template
Please help me fill this out
write the instructions in the comments below
I really appreciate it, you are helping everyone out
thanks
P.S. if you see any errors let me knwo
see what I did there?
Install Plugins
Page Builder by SiteOrigin
SiteOrigin Widgets Bundle
Visual Editor by BlackStudio TinyMCE Widget
Contact Form 7
Easy Google Fonts
Lightbox Plus Colorbox
Spacer
Title Remover
!!! Thanks so much Greg for helping me out with this !!!!
Download Images
Click the download images button above to download the images
Save them to your Desktop
Double click the zip file to unzip it
Now you have all the images used in this tutorial

DOWNLOAD IMAGES

[spacer height=”70px”]

Create Home Page

Create Home Featured Headline
Go to Pages Then Click Home
Click Page Builder Tab
Upload Background Image
Copy Headline Code: <span class="home-headline">EXPLORE</span>
Paste it into your website
Copy Sub-Headline Code: <span class="home-sub">everything and do what you love</span>
Paste it into your website
Copy Button Code: <a href="/about" class="button primary-button">Our Mission</a>
Paste it in your website
Copy another Button Code: <a class="button secondary-button" href="/our-work">View Our Work</a>
Paste it right next to your first button
Create a 300px spacer
Go to visual editor
Center all text
Press done
Click Update
View Page
Go back into your dashboard
Go to settings > google fonts
Click Create a New Google Font
Name it Home Headline
Click Create Google Font
Under Add CSS Selector type .home-headline
Click create a new font control
Go to your homepage and roll over your name and click customize
Click Typography > Theme Typography
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
Go back into your dashboard
Go to settings > google fonts
Click Create a New Google Font
Name it Home Sub
Click Create Google Font
Under Add CSS Selector type .home-sub
Click create a new font control
Go to your homepage and roll over your name and click customize
Click Typography > Theme Typography
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
Create a new row that goes 100% accross
Click on edit to open the visual editor
Click on the text tab
Paste in the headline code: <span class="home-making">making the world a better place</span>
Click Update
Go to Settings > Google Fonts
Click create a new font control
Enter Home Making
Add CSS selector .home-making
Click Save Font Control
Go to your homepage and roll over your name and click customize
Click Typography > Theme Typography
Under Home Making click Edit Font and use the following settings:
Font Family: Roboto
Font Weight/Style: 100
Font Color: #4c4c4c
Font Size: 37px
Click Save & Publish
Create 3 Featured Boxes
Edit your Home Page
Click Add Row
Set row layout to 3
Add visual editor to each of the three columns
Go to logomakr.com to create 3 icons search for float, gallery, ocean
Colors:#81BADA , #FEE3D6 , #81BADA
Crop them and make sure they are all 209px in height
Save the logo to your desktop
Copy the credits to a word document, notepad or textedit
On the first of the 3 visual editors click edit
Click Add media and add in your logo, make sure it is full sized
On a new line type in your headline and highlight it and make it H3
On a new line type in a description
Go to the text tab and paste in this code: <a class="button primary-button" href="/our-work">Our Work</a>
Go back to the visual tab and highlight everything and center it and click done
Do steps 9 – 14 for each column make sure to change the button link and text.
Update your page and view your marvelous progress!
Add Bottom Call To Action
Edit your home page
Add a row
Keep it at 2 columns 50% and 50%
Add visual editor to the first column
Click on the text tab and paste in this code: <span class="home-our">Our Work</span>
And underneath it paste in this code: <span class="home-we">We believe actions speak louder than words.</span>
Click done.
Add visual editor to the second column and click on the text tab
Add a 30px spacer
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>
Add in another 30px spacer
Click done
Click on the wrench and click edit row
Click on design and select background color use code #FAFAFA
Click Save then update your website
Go to Settings > Google Fonts
Click create a new font control
Name it Home Our
Add CSS selector .home-our
Click Save Font Control
Click create a new font control
Name it Home We
Add CSS selector .home-we
Click Save Font Control
Visit your homepage and click on Customize
Click Typography > Theme Typography
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
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
Click Save and Publish
Create Logo
Go to Logo Maker
Search for Compass and choose your logo
Change color to white
Save logo to your Desktop
Copy the credits to a document
Go to customize
Click General > Logo
Upload your logo and press Save & Publish
Create a Credits Page
Click Pages > Add New
Type in Credits
Click on the Text Tab
Paste in all your credits
Add a link to my website on there
Make it a Full Width Template
Click Publish or Update
Setup Footer Menu
Click Appearance > Menu
Please help me fill this out

[spacer height=”70px”]

Create About Page

Main Image and Headline
Edit your about page and create a new row 100% across.
Add a visual editor and go to the text tab.
Click the wrench icon, then click on the design tab
Select your background image and set your background image display to cover.
Click done.
Paste in the headline: <span class="about-headline">My mission is to help you start a business so you can change the world.</span>
Go to visual and align center
Create a line break at after start
Click Update or Publsih
Go to settings > google fonts and click create a new font control
Call it About Headline
Add CSS selector .about-headline
Save it
Go to your homepage and click on customize
Click Typography > Theme Typography
Edit the About Headline
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
Save it and look at the beauty you made!

Creating Text Below Main Image

Add a new row with 3 columns 15%, 70%, 15%
Click Save
Click the center column and add a visual editor
Click on the text Tab
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>
Go to the visual tab and align center
Click Done
Click Update or Publsih
Go to settings > google fonts and click create a new font control
Call it About Text
Add CSS selector .about-text
Save it
Go to your homepage and click on customize
Click Typography > Theme Typography
Edit the About Text
Set the settings to the following
Font Family: Roboto
Font Weight/Style: 100
Font Size: 22px
Margin Top: 125px
Margin Bottom: 125px
Save it and look at the beauty you made!
Create 3 Image Boxes
Edit your about page and add new row with 3 columns 33%, 33%, 33%
Click on the wrench and edit the row, and under the layout tab, make it full width stretched
Add visual editor in the first column and edit the text
Add a spacer that is 250px
Under design upload the background image
Do the same for all the other rows
Click Update
Create Bottom About Text
Add a new row with 3 columns 15%, 70%, 15%
Add a visual editor to the middle column and edit it.
Click on the text tab
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>
Click Done
Click Update

Create Our Work Page

Add All Content
Edit the Our Work page and make the template full width
Remove the title from the page
Add a row with 3 columns 15% , 70% , 15%
Add a visual editor to the center column
Click the wrench and duplicate row so you have a total of 3
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>
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>
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>
Create a new row that is 100% wide
Add a visual editor to it
Put in a spacer that is 400px into the visual editor
Click the wrench and duplicate it two more times so there is a total of 3
For the visual editor where you put the 400px spacer click on the wrench and edit row
Under design upload a background image I used backgrounds Jellyfish, Cliff & Night Sky for the three backgrounds.
Change the background image display to Cover press save.
Do steps 11 – 13 for the other visual editors with the 400px spacer
Drag each 400px row under your text row.
Click Update
Go to settings > google fonts
Create a new google font called Our Text
Add CSS selector .our-text
Click Save
Visit your website and go into the customizer
Click Typography > Theme Typography
Edit the Our Text
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
Save it, wonderful!

Create Services Page

Add All Content
Edit the Services page and make it a full width template
Remove the title from the page
Add a row with 2 columns 50%
Click the wrench and duplicate the column so that there is a total of 5 rows
Alternating from left to right paste in the following text to each of the alternating columns
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.
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.
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.
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.
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.
Also add a 20px to the bottom of this column
Next on the first right column go to the visual editor and add a 20px spacer
Underneath the spacer insert an image
Do this on the opposite side of each text. I used images: Relax, Begin, Reflect & Enjoy in that order.
On the fifth right column add in a 40px spacer in the text tab
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>
Click on the visual tab and highlight the buttons and align them to the right.
Click Save
Click on the wrench icon and edit row
For every other row under layout set it to full width and under design set the background color to #f9f9f9
Click Update
Go to settings > google fonts
Create a new google font called Services Headline
Add CSS selector .services-headline
Click Save
Visit your website and go into the customizer
Click Typography > Theme Typography
Edit the Services Headline
Set the settings to the following
Font Family: Roboto
Font Weight/Style: 100
Font Color: #5e5e5e
Font Size: 42px
Margin Top: 18px
Save it, amazing!

Create Contact Page

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

Polishing Your Website

Creating Main Navigation Buttons
Go Appearance > Lightbox Plus Colorbox
Under General click Use Secondary Lightbox
Scroll all the way down to the secondary lightbox settings
Use settings:
Elastic
300
5%
Width: 80%
Height:80%
Max Width: 90%
Max Height: 90%
Secondary Class Name: popup
Click Save all Settings
Go to customize > Header Options > Header Right Block Content
Make sure button is selected
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>
Click Save & Publish
Add Social Media
Click on Customize > Social
Choose which social media website you would like to use and insert url
Go to logomakr.com and find your image and download it to your Desktop
Upload your image
Repeat for every social network you are on
Go back and go to Footer Options > Footer Content
Choose Social Icons
Click Save & Publish
Resize Mobile Headlines
Go to your headline you want to resize for mobile
Click Edit on the visual editor
Click the text tab
Where it says: <span class="home-headline">EXPLORE</span>
Change it to: <span class="headline-resize home-headline">EXPLORE</span>
Click Done
Update Page
Position Background Focus
Click on the wrench with on a row with an image
Click Attributes
Under CSS Styles paste: background-position:100% 0%;
Click Save
Click Update


Tips
Updating Your Theme
Go to appearance > themes
Temporarily activate a random theme
Go to your theme and click on the image
Then at the bottom click delete
Upload the updated theme
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.





Home
Videos
Unbranding Plugin
Support
Theme by Tyler Moore