How To Make a Modern WordPress Website From Scratch

Step by Step Guide for Beginners

This is a Step by Step Guide on How to Make a modern website, in trends, on  WordPress for  anyone who understand the 21 Century, the Communication, Connection, Sharing Needs !!!
We will start from the ground, nothing left out….
We’ll divide this Tutorial in 3 Parts or “ Steps TO BE Online”: Domain, Hosting, Website Creation.

This Guide is made for Beginners for people without programming (coding) skills. It uses a free WordPress Theme and free Plugins to help you keep all cost at the Lowest possible level.
It’s better to Start with a low budget and Upgrade only and accordingly to your future needs.

How much it will cost you ?
You’ll have to pay only for Domain and Hosting, and we’ll recommend the Best Domain Registrar and The Best Hosting Provider by the Renewal Regular Price rate (Not the Promo/Advertised Price which is lower only for the First Term of your purchase and after that you’ll be billed at the Regular Renewal Price which is Higher on Every Domain Registrar and Hosting Provider). You can Verify :
Domain Price Comparison Table Here  and Hosting Comparison Price Table Here

We will cover you by providing with a few links and content to help you create this website, images and text instructions, all provided below.

Steps TO BE Online:
-Step 1) DOMAIN
The first one and The MOST IMPORTANT  Step TO BE Online is To Buy a Domain Name.
A domain IS YOUR ONLINE ID, your web address, URL  –  www.yoursite.com.
It is Your ASSET and you Must DRIVE TRAFFIC to your site, your domain name NOT to other websites/domains. Don’t loose time and money for other assets!
Focus only on your Domain !!!

When you Buy a Domain You MUST DECIDE 3 things:
a) Your Domain Name. You have to have a List of more than 5 different NAMES to choose from in case your desired domain name was taken.
b) The purchase term : 1year, 2, 3 or more. Maximum is 10 years. The prices are from = $10.99/year (ICANN fee included). Longer Terms=Better SEO Scores on Search engines like (Google, Bing, Yahoo, Ask, Yandex, DuckduckGo, etc) =>MORE VISIBILITY, TRAFFIC, CLIENTS.
We recommend a minimum 2-3 year Plan for individuals or a 3-5 year Plan For Businesses.
c) If you want to share on the entire Internet your Private Data (like: Name, Address, email, phone)
If Not, you MUST buy a Domain Privacy which is about $3.00/year/domain.
All your Private Records will be replaced with your Domain Registrar Info.

DOMAIN COSTS = $10.99+$3.00= $13.99/year (with Privacy) from Dynadot.

Recommendation for The Best and Cheapest Domain Registrar by Renewal Price Plan:
-NO 1,   NameSilo  Coupon Code: STEPS1 .  The Lowest Price on the Internet, only $8.99/year, Whois Privacy Free
-No 2,   Uniregistry , The second Price with Free Whois Privacy, only 10.88/year
-No 3    NameCheap, KNOWN FOR LOW PRICES, only $10.87/year FOR 1 YEAR PLAN ($10.69/year for Domain Name+$0.18 annual ICANN); for 2 year $10.59/year, 3 year $10.49, 5 year $10.29/year+ICANN fee.  Whois Guard/Privacy= $2.88/year.
-NO 4,  Dynadot , only $10.99/year (ICANN Fee included). The Fourth Lowest Renewal Price with a PLUS!!!  If you use this Code 8F6t8h70358v6X when you buy a Domain name (Referred by….CODE or website: www.stepstobeonline.com), your account will be credited with $5 for your future purchase of a New Domain Name, Domain Renew or Whois Privacy. Domain Whois Privacy is only $3/year!
We love Dynadot : NO upsells during the buying process, all prices clean and clear….
-NO 5, click here to Choose yourself from the Domain Comparison PriceTable

Video:    How to Buy a Domain Name from Dynadot,

Step 2: HOSTING
The Hosting will allow you to run your website and store all your website content.

When you buy Hosting you MUST Decide:
a) The Term of your purchase plan: Monthly or Annual (1,2,3 years – one payment). If you want to SAVE Upfront you must choose a Longer Term Plan (1,2,3 years) of one payment, and/or if you want to keep in a Monthly Budget you Must choose a Monthly Plan.
b) Your Present and Future Website Resources Needs. Your website content will grow, your traffic will grow…. That it means you MUST look for a Plan who can be Upgraded at the Best Price or for a Plan who has Unlimited Resources at an Affordable Price.

We have found 3 Hosting Providers with Starter Plan or Unlimited Resources at the Lowest Renewal Regular Price Rate to choose from: InterServer, IFastNet and AwardSpace.
HOSTING COSTS: $5/month, or $54/year

Advice: When you buy hosting please Uncheck / untick all additional services, they are usually unnecessary and cost you extra money.

Total Starting Costs = Domain with Privacy (ICANN fee included) + Hosting Unlimited All Feature Monthly Plan = $13.99/year+$5.00/month=$18.99 First Month than $5/month for 11 months only for Hosting.
Renewal Cost= the same= $18.99/first month (Domain and Hosting) than $5.00/month for Hosting.
Total Annual Cost (Annual Plan): $13.99+$54.00=$67.99/year (one payment, not monthly)for Domain with Privacy and SSD Hosting with Unlimited Websites, Unlimited Disk Space, Unlimited Bandwidth, FTP, email addresses +FREE SSL Certificate.
This Price is for InterServer , the BEST one with ALL UNLIMITED, Standard Plan ($5.00/month).

AwardSpace has a Free Hosting Plan for 1 website and a PRO plan with 2 Free Domain when you buy Hosting ($9.92/month),  IFastNet  has a very good Starter Premium Plan without Free Domain at $2.99/month (FREE SSL, 20 websites, 20 MySQL, FTP, etc) and a Pro Plan, Ultimate Premium at $6.99/month Unlimited Websites, Disk Space, Bandwidth, FTP, emails, FREE SSL+1 FREE Domain (from biz, in, eu,pw,co.uk,us) or $5.99/month without Free Domain!

If You want to choose other hosting company go and check this Hosting Comparison Price Table (please look for Renewal Price, the price which will be billed after the First Term of your Purchase (1month, 1year,2,3 years).

STOP !!!….

If you want to SAVE another $5.00/year for Domain, buy it from NameSilo!
You’ll pay only $8.99/year for a .com domain with FREE Whois Privacy.
If you will USE this Coupon Code: STEPS1 you’ll get an extra Discount for the First Year !!!
Your Total Annual Cost for .com Domain Name + Hosting with UNLIMITED ALL Feature will be only $62.99/year instead of $67.99/year= $8.99/year for .com domain with Free Whois Privacy + $54.00/year for SSD Hosting with Unlimited Websites, FREE SSL Certificate and Unlimited ALL other Feature Standard Plan from InterServer.

If you want to keep the costs in a monthly budget, you’ll have to pay $12.99 First month = $7.99/1-rst year for .com Domain using this Coupon Code:STEPS1+$5.00/month for Hosting, than only $5.00/month for Hosting.
Renewal cost, 2-nd year, $13.99 First Month ($8.99/year for domain+$5.00/month for Hosting) than $5.00/month for Hosting. 3-rd year the same= $13.99 first month than $5.00/month

For a 3 year Plan for .com Domain with FREE Whois Privacy you’ll be billed = $7.99 first year using this Coupon Code: STEPS1 +$8.99/second year+$8.99/third year= $ 25.97 (one payment) ->from NameSilo!

The Second Renewal Price on the Domain Market  for .com Domain with FREE Whois Privacy is $10.88/year –> from Uniregistry. (Buy NOW and you’ll get a 1-rst year for only $8.88 than $10.88/year)
Total Cost for a 3 year Plan = $10.88×3= $32.64.
$32.64-$25.97= $6.67 in SAVINGS for a 3 years Plan!

The Third Renewal Price on the Domain Market for .com Domain is $13.75/year ($10.69/1 year for Domain+$0.18 ICANN annual fee+$2.88/year Whois Privacy) –> from NameCheap
Total Cost for a 3 year Plan = $13.75×3= $41.25.
$41.25-$25.97= $15.28 in SAVINGS for a 3 years Plan!

The Fourth Renewal Price on the Domain Market for .com Domain is $13.99/year ($10.99/1 year for Domain, ICANN annual fee included+$3.00/year Whois Privacy) –> from  Dynadot.
Total Cost for a 3 year Plan = $13.99×3= $41.97.
$41.97-$25.97= $16.00 in SAVINGS for a 3 years Plan! If you use this Code: 8F6t8h70358v6X when you buy/register a Domain name (Referred by….CODE or website: www.stepstobeonline.com), your account will be credited with $5 for your future purchase of a New Domain Name, Domain Renew or Whois Privacy.

 For More Info or to Choose another Registrar, Check this
Comparison Price Table for The Best, Most Used and Cheap Domain Registrar

NOTE: When you buy using our Links or Discount CODES we can qualify for a small commission.
You will pay ONLY the Company Product Price NOT a Higher one or other fees!
The company will share a small part of his revenue with us if we qualify for.
Thank you, for choosing to use our links, for your help!

 How to buy Hosting from InterServer:
Go to InterServer -> Click on Webhosting Label (left upper corner )-> Choose the STANDARD Web Hosting Plan -> Click Buy Now button->Tick the box for “I Have a domain name already and I use that”->Insert (type in) your domain below, on the box “Choose the Host name for your site” eg: yourdomain.com->Click on Continue…. Follow all the Steps. Use your Real info not Fake Data.
You must Log in if you have an account or if not Sign up to create one, Go to your email inbox to Confirm your account and continue the purchase process.
After the Purchase you’ll receive an email with all your Login Info and Account Details. You’ll need those for the next steps….
InterServer is our recommendation but you can choose any service you want!
Hostgator is the most popular one and a reliable hosting provider with great client support but with higher prices. It’s up to you.

Now you have bought a Domain and a Host.

To access your websites, to have a functional website, you MUST connect your Domain (your website address) with your Hosting (your website content, files)

How to Connect your Domain with your Hosting
Go to your email inbox and open the email with your Hosting Account Info.
Here you’ll find your Name Servers (eg: ns1.yourhosting.com, or ns2.12345.yourhost.net)
Go to your Domain Registrar, Log into your Account=>go to Domain=>Manage=>Select your domain name, if you have more than one=>click on Nameservers, choose “I want to use my own servers” or something like that…. Than type in/insert the name servers received from your hosting provider . You can have 2 or 4. Change them all =>click on SAVE changes and logout. That’s ALL ! Maybe it takes 5 min but no more than 24 hours to connect each other.  Now you must see an Index page or a Parked Page. We’ll change this….

Step 3: Website Creation
If you Don’t have time or skills, check our Win-Win Service.
To Build our Website we need to install the platform we’re going to use to make it, called WordPress, a content management system, very popular and easy to use.
a) You MUST Log into your Hosting Cpanel:
Open the email with your Hosting Account info from your Hosting Provider =>Click the link that says “Your Control Panel”=>Log in with the username and password from your email
b) Install WordPress
Now you are logged into your Account (yourdomainname.com) Cpanel.
Scroll down to Software/Services Section =>Click on the icon that says “QuickInstall”/ Installer (names can differ)=>Choose Free WordPress or WordPress=>Click on Continue=>Enter an Admin email (you’ll get emails from), blog title (can be changed later), username, password and all other details, than Click “Install now”.
Now we have WordPress installed. If you go to your domain address you’ll see the preinstalled website.
We’ll  “fix” it,  and we’ll make it pretty, step by step, don’t worry!
c) How to make your Website Step by Step
Let’s Log into our WordPress Website.
There are few ways to log in to your site:
You can click on the link provided by your hosting provider after the quick install of WP and use your username and password or go to your email and open the WP installation email the one with WP log in details or type into your Browser bar the following address: www.yourwebsite.com/wp-admin  and use your username and password from your WP installation process. Log in!

Step 1: Download and Install the Theme
You can choose any theme template to customize on WordPress, but the one we’re using for this tutorial is the Sydney Theme.
After Log in, you are on the “Dashboard” of your website.
WordPress offers you a variety of themes, which are like a naked body of your future website.
We must put some clothes on our body, customize the Theme….
Now we‘ll SAVE some money, customizing our self the Theme, building our website. Let’s start….

Go to your WP Dashboard=>on the left side, find the Appearance link , hover over it and click “Themes”.
At the top you’ll see some tabs=>click on WordPress.org Themes=> On the right, inside the Search box type “Sydney” , select the Theme (click on)=> click on Install =>than click on Activate.
You have installed your new Theme… Your site looks better now…

Step 2: Download and Install WordPress Sydney Child Theme (You have 2 options below)
You don’t need to install the child theme if you don’t want. It is only for the purposes of saving all customizations we will make.
So if you’re going to install a child theme you can download the Website Media File with Child Theme or only the Sydney Child Theme from the Download page .
If you unzip it, you will find the sydney-child.zip which is what you want to upload (make sure it is a zip file).
A child theme helps save all of our changes that we make when wordpress updates so our website doesn’t change. Do this and you’ll thank me later!
Find the Sydney-child.zip (make sure it remains a zip file. If not, please compress it before uploading to your website)
From Dashboard go to Appearance => Themes => Add New, select Sydney Child zip and click on Upload=> Install than Activate.

Step 3: Install and Activate the Required Plugins that show up at the top of your Dashboard
These plugins are: SiteOrigin Pagebuilder Plugin and Custom Sydney Toolbox Plugin
We’ve just installed our Website Builder and his tools.

Step 4: Download or Install and Activate The “Other” WordPress Plugins listed below:
SiteOrigin Widgets Bundle (need to activate the social media widget)
Black Studio TinyMCE Widget (will add more functionality to your Visual editor-like Word)
Contact Form 7 (let your visitors to send messages from your Contact Page)
TJ Custom CSS (we’ll add some code to improve the look of our site)
Simple Lightbox (It will be used for your Photo Gallery)
WP Super Cache (to clear the site cache ) – Activate at the END.
Polylang (Optional, only if you want to translate your website) – DO NOT ACTIVATE THIS PLUGIN UNTIL you finish the entire website (or your pages will not be found, as you create them)! This Plugin will Not Translate Automatically your Content!

Step 5: Download the Zip Media File with Images for your Gallery (or you can upload your own pictures: post featured pictures, Team pictures, portfolio pictures, logo, and so on)
If you already downloaded it with the Sydney Child Theme on Step 2, you do not need to Download it again.

Step 6: Upload the media files on to your WordPress Website
Go to your Dashboard => click on Media => Add New=>Add files
Now all of your files should be in your Media library.
You can skip Step 5 and 6 and upload these image files individually on each page or post, if and when you need them.

Step 7: Create your Homepage and Blog Post Page
Delete preinstalled (default) pages and posts!
We’ll create two new pages: Go to your WP Dashboard= > Pages => Add New
Name/Title your page Home or Homepage=> Go to the Page Attributes, on the right side and select Front Page in the Template dropdown=> click on Publish button
Now create a new page for your blog page: Pages => Add New=>Name/Title your page “Blog” than click the Publish button.
You have Created the Most important pages of your site.
Now we need to set up the homepage and the blog page. To do that, Go to your Dashboard => Appearance => Customize=>Click on the tab that says “Static Front Page”=>Choose “A Static Page”.
For the Front Page, go to the drop down and select the HomePage you just created and for the Blog Page, go to the drop down and select the Blog page you just created =>Click the blue Save button=> click on Publish button
You can go to check your homepage. It should look a little bit different….
Now we have our front/home page and blog page and we can create all the pages we need to and customize our entire website.

Step 8: Edit the Slider Images on Our Homepage
If you want to add your own custom slider images to your website, follow this steps:
Go to your Dashboard => Appearance => Click on Customize=>Click on the Header Area tab => Click on Header Slider, Change your slider images and text to whatever you want; You have 5 options =>Near the bottom of the page you will see a section for your button. You can add the URL you want to link that button and the text for the button. If you don’t change the #primary for the URL, when someone clicks on the button it will skip to the next section of your homepage=> Click on Save=>click Publish
Header Area
Click on the Header Type area
For Front Page header type => select Full Width slider
For Site Header Title => select No Header (menu only with Logo without Site Title)=>Save or Click back and go to Menu Style
You can change the custom options here if you want. But we are going to keep it the same.

Step 9: Select and Modify Setting Options for Your WordPress Website
WordPress Dashboard => Appearance => Customize
Now we’ll walk you through all the tabs that we are going modify the settings:
Site Tagline
Here You can change your site Title.
You can delete the Tagline and you’ll have only the Title. If you want to have a second row, in Tagline type in a message or call to action for the button.
If you have a Logo you can upload it here. The same for your Favicon (the image shown on your browser before your URL). Don’t forget to save all your changes or you’ll lose everything!
Blog Options
Change the blog layout to Masonry Grid. Change the excerpt length to 20 words or 30 (default is 55 words)
Font Size
Click on Fonts=>Go to Body Fonts and change the font size to 16
Colors
Click on the color tab. Here you can change the color to whatever you want
Primary color: we use this color code #047fea  (it is a blue)
Menu background color: #dd2525    or    #0166bf
Body text color: #000000
Sidebar color: #000000
Footer widget background color: #000000
Click on Save Changes !

Step 10: Create your Logo and Favicon
This Step is for those who don’t have a Logo. We’ll Create a Logo and a Favicon.
We’ll use a FREE website http://www.logomakr.com/
Go to the website. On the upper left corner, is a search bar. Type in whatever type of image you want your logo to be=> select an image=>go to the right upper corner and change the size to roughly “50 x 50” (Be sure your logo fits within that white space)=>If you want to add text to your Logo click on the T on the left hand side (all the text must fits within the white space). Now 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.
If your logo looks great go to the upper right corner and click on the disk=>Right click on the new page to Download your logo. You must Save the Logo as a PNG image.
You can change the color of your logo to black and to white and save a copy if it fits better to your website slider image or for your Favicon.
Now we have our logo. To upload it go to: Dashboard= > Appearance => Customize=>General tab=> Site title =>Tagline=>Logo tab=>Select the image for your logo to upload=>click on Save.
The same process for your Favicon.

Step 11: Modify the Permalinks
Why? To show the www before your domain name www.yourdomain.com  and to have post links that means something not just random numbers and letters.
For www, Go to your Dashboard => Settings => General=>where is WordPress address, type in www. in front of your web address http://www.yoursite.com
On the row where it says site address type in www. in front of your web address http://www.yoursite.com => Click on SAVE CHANGES !
If you Use a FREE Subdomain, please don’t insert the www. in front of your Subdomain name !
Your Website will NOT WORK, can NOT BE ACCESSED !!! (MUST BE !!! => http://subdomain.domain.com)

To change our Permalinks for our blog posts go to Dashboard= > Settings => Permalinks=>Select “Post Name” option=> click on Save Changes !!!

Step 12: Settings for Comments Options
It is up to you if you want or not to allow people to comment on your blogposts.
If you want to allow people to leave comments on your blog posts we have to do some settings.
Go to your Dashboard= > Settings= > Click on Discussion=> Check the box “ Allow people to post comments on new articles”=> Check the box “Comment author must fill out name and email”=>Uncheck the box “Users must be registered and logged in to comment”=> Uncheck the box “Automatically close comments on articles older than 1 day”. You can change the number of days people can leave comments after you post an article=> Check the box “Comment must be manually approved” (to avoid spam comments)=> Save Changes

Step 13: Adding our Custom CSS Code
Do you remember? We just installed and activated TJ Custom CSS Plugin….   We’ll add our Custom CSS.
Just Copy and Paste the Code Below !
To add this Code go to WP Dashboard => Appearance => Custom CSS
Copy and Paste in the following CSS Code:
.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;}

Please make sure you click on Save button to save all your work !!!
Sorry !….  You can not copy here the CSS Code BUT you can DOWNLOAD all CSS and HTML Codes used on this Tutorial from our Download page

Step 14: Customizing our Homepage
Go to Dashboard= > Pages => All Pages => Click on Homepage (to edit the homepage)
Here we are going to use the Site Origin Pagebuilder to build our Homepage Sections. 

Step 15: Create the Services Section
To do this, we need to create some Services first.
On the right side of your Dashboard go to Services Tab=> click Add New=> Title Your Service=> Add a small description=> Go below to the service icon section and add whatever icon you want – here is a link to the Cheatsheet site to get the shortcodes for your icon=>Type in the Service Page URL if you want to link to another page=>Add a Category name to your service; we’ll use these later. Click on Add New Category and type in “Type A” => click on Save
Do this a few times to get at least 3 Services. Asign the services to the Same Category, Type A.
You can make as many as you want but, just be aware they will show up on your homepage!
We have our Services. Let’s go to edit our Home page Services Section.
Go to your Homepage, click on edit=>At the top click Add Row Button to add a new row to your page. =>Click the row Edit, into the upper right of the new row=>On the new window, up, Change Row Layout to 1 (the column inside your new row)=>click on Save. On the right side on Theme tab settings=> Layout=> Row layout Select Full Width=> click on Done to Save.
Inside that row we must insert our Services. To do that Click on Add Widget and select Sydney FP: Services Type A Widget=> click Edit within the new widget=> Title it “Our Services” => Number of services you want to show must be “-1” (all services)=> Where it says “Enter the slug for your category or leave empty to show all services” type in “Type-A” (or the category name you used for your services)=> click on Done=> click on Publish/Update button
Your Homepage will look different if you want to check.

Step 16: Create a Double Call to Action Section
A call to action is very important for your website.
Go to your Homepage, click on edit. As you learn now we must add a Row.At the top of the content section click Add Row=> Click Edit on the upper right corner of the new row=> Change the number of rows to 1 (column). On the right menu Theme, type in 50 to the Top/Bottom Padding=> Row Layout select Full Width=> on Design change Background color to  #252525 => on the Background image, insert an image from Media Gallery=>Click on Done to Save.
We must Add our Widget…. Add Widget=>Select Layout Builder Widget=>click the widget Edit=>Background image to display, select Cover=>Done
Click on widget to select it. We must add a Row inside the widget for our Title.
Add new Row=>click to Edit row, Set the Row layout to 1 column, on the right settings change the background color to #d63737 => then click Done.
We must Add a Widget,” Text Editor”. Click on Add widget, select Text Editor Widget. Now click on widget Edit, on the left on Title type in “Our Story….”=> click Done to save the changes.
We must add another row below. Set the Row layout to 2 column=>Done.
We must Add Widgets on each column, the Sydney FP: Call to Action widget.
Add widget, select Sydney FP Call to Action. Click to edit the Right widget. On “Call to action” type in “Take some time and meet our Team”, for the Link to the button, you can put your Team or Employees Page URL. You can create it later. http://www.yoursite.com/employees .   For the button text, put in “Team” =>click Done to save.
The Left Widget… click to edit. On “Call to action” type in  “About Us”
Link to the button, you can put the About Us Page URL: http://www.yoursite.com/about-us.
You can create this page later => For the button text, put in “Goals”=> click on Done to Save=> click on Publish to Update your Homepage.
If you want a background box for each call to action (as our site have, copy and paste the CSS red code:
background-color: rgba(0,0,0,0.3); into the Attributes section of each call to action column. Click on edit widget, on the right side=> Attributes=> CSS, insert the red code=>Done=> Publish/Update

 Step 17: Create Blog Post Section or Latest News
We are on the Homepage, click on edit to create this Latest News Blog Section.
To do that we Must Add New Row=> click on the right corner to edit the row, Set the Row Layout (column) to 1=>Done
Now we must Add the Widget. Click on to select the row =>Click Add Widget, select Sydney FP: Latest News widget=> Click edit on the widget and title it “Latest News”=>Done=>Click the Publish / Update button and go to check your homepage to see how it looks after the update. Nothing new to show up!
You have no blog posts… We’ll create few in a moment….

Step 18: Create the Single Call to Action Section
Let’s give our visitors another chance to choose … to navigate on our site.
It’s important to funnel them wherever you want, wherever they can benefit of your site info, product, service.
Go to your Homepage, click on Edit, to …Add the Row for our New Section.
Go to your toolbar and click on Add Row=> Click on the row Edit (right upper corner)=> Set the Row Layout to 1 column=> on the right menu setting go to Top/Bottom padding change to 30=> Background color to #252525=> Background image: choose an image from your site Media Gallery or add one from your computer if you want to have one on the background-it is optional=> Row Layout change to Full Width=>click on Done to save settings.
Now we must add our widget. Click on your row to select it. Go to the top bar, click on Add Widget than Select Sydney FP: Call to Action widget=> Click the widget Edit=>on the left side live the Title blank, on the second row where it says “Enter your Call to Action” type your text “We Love What We Do… Check What Our Clients Are Saying”=> Link for the button put your Success Stories, Testimonial Page URL: http://www.yoursite.com/success-stories . We will create this page later. =>Button Text type in “Success Stories”=>Tick/check the box to have Text in line with the button (or live it blank to have the Button below the Call to Action Text) => Click on Done to Save=> click on Publish/Update to update the Homepage and check How it looks…. Much, much better, isn’t it….?

Step 19: Create Social Media Widget Section
If you want social media buttons at the bottom of your pages, if you have Social Media Accounts, you can create social media buttons for each page you have.
Go to your Homepage, click on Edit=> Click Add Row, on top set the Row to 1 column=> on the right settings choose Top/Bottom padding and change to 10=>Background color to #1c1c1c=>Design, Row Layout to Full Width=>Done to save Row settings.
We must click on to Add Widget, select “SiteOrigin Social Media Buttons Widget”=> click on widget Edit Now you can add your Social Media Buttons/Accounts. Click Add for 2,3, 4,… 6 times or how many social media buttons you want. =>Click on the first one section to expand, Select the Social Media Network=>Keep the original icon color or change it to #ffffff => button colors to #252525=> background color #252525=> go below to Design settings click to expand and change Button Theme to Flat=>Icon Size to Normal=>Rounding to Slightly Round=> Padding to Low => Margin to Low=> click on Done to save this Network settings and go to the next one choose the Social media network and do the same steps. When you’re done with all Social Media Buttons click the Publish/Update button to update your Homepage with that Section.
Remember to do Step 18 for each Page where you want to have Social Media Buttons !
Now you can Admire your Work….. All Done by Yourself !!!
Go and check your Homepage to see how it looks !

We have to Create some Pages for our Homepage section URLs to work with…. Do you remember?…
Let’s do that!

Step 20: Create the About Us Page
We need to create a New Page….
You are on your WP Dashboard=> go to Pages=>Add New=>=>Type in the Title for Your Page “About Us”. Do you remember the process…. Add Row+Edit Row, Add Widget+Edit Widget ?
Add Row, set the Row Layout to 1 (column)=> on the right setting, Theme tab, choose Top/bottom padding to 50=> Background image, select one from your Media Gallery or upload from your computer=> Row Layout to Full Width=>click on Done/Save.
Now go and click to Add Widget, select the SiteOrigin Headline widget and click on his Edit, type in your Page Title “About Us”=>click on Done to save.
Add Row, the second one, set Row Layout to 1 (column)=>on the right set the Top/bottom padding to 40=> click Done/Save.
We’ll add the widget for this Row. Go to Add Widget, select “Visual Editor”, click on his Edit.
On the opened window, it is and works like MS Word Editor, you can insert pictures, movies, texts, link them to open a specific URL, whatever content you want on your page => click Done to save the changes.
Add Row, the 3-rd one, for the Fact, our Numbers. Click on his Edit (right upper corner), Set the Row Layout to 1 (column), on the right setting set the Top/bottom padding to 30 pixels => Background color to #dd3b3b (red)=> Row Layout to Full Width=> Save
Now We’ll Add our Widget, select the Syndey FP: Facts widget, click the widget Edit=> Add in some stats by adding titles, icons (with icon shortcodes-click on the link at the top to get the icon short code) and type in your stats(numbers)=> click Done to save.
Now we must Add Row, the 4-th one, for our Call to action. Add Row, click on Row Edit, select Row Layout to 1 (column)=>on the right settings, Theme tab, for Top/bottom padding put 30=> Background color to #252525 scroll to Row layout and change to Full Width=>Save.
It’s Widget turn… Add Widget, select Sydney FP: Call to Action widget, click on widget Edit=>live the title blank, on” Your Call to action” type in “Need Help? Want to work with us ?”=> Link for the button http://www.yoursite.com/contact. We’ll create that Page in a minute => Text for the button “Contact Us”=> Don’t display button inline with text=> Done to save.

If you want to Add Social Media Buttons, you must follow Step 18.
When you’re done, click on Publish/Update to update your About Us Page. You can check how it looks.

Step 21: Create the Employees/Our Team Page
a) First we Must Create the Employee Profile
To add a new employee: Go to your WP Dashboard and on the left hand side find Employees tab, hover and click Add New Employee. Type in their Name, Add some info about that employee (job position, social media accounts, etc), a Profile Photo and a Category (eg: marketing, support, design, management, sales, etc)=> Publish
Do this several times to create the employees that you want to show up.
b) Create the Employees Page
Go to WP Dashboard=> Pages=> Add New=> Type in Your Page Title “Employees”.
Add Row, Edit row to 1 column=>Save
Add widget, select Sydney FP: Employees widget=> click on widget Edit=> Add Title “Meet Our Team”,=> Number of Employees, insert “-1” to show all => click on Done to save=> Publish/Update
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 an URL that is different than “employees”. You can add a button to redirect them to employee projects and so on…
We choose this design with slider.

Step 22: Create the Photo Gallery/Portfolio/ Projects Page
Before we can create our Gallery we need to Upload our images if you don’t have them on Your Media Gallery.
Go to the Dashboard, hover over Media and click Add New=> Click upload files= > Select files/images= > Upload. When you’re done, create a new page, Go to Dashboard=>Pages=>Add New=> Type in the Title you want “Photo Gallery”=> Click the Button “Add Media” (the same which help you to insert pictures on your posts)=> on the new window, on the Left Upper Corner click the Tab “Create Gallery”, select the pictures or upload the one you want to include=>on the right settings choose => Link to Media Files=> Columns to 4, Size to Medium, Click the button Insert Gallery, on the right side=>Publish/Update.
We have added earlier some CSS code to increase the space between the pictures.
If you want to add Social media buttons use Step 18 and if you want to add a Call to action Section use Step 17.

Step 23: Create the Contact Page
Go to your Dashboard=> Pages=> Add New=>Title it “Contact”
Add Row, Edit Row layout to 1 (column), on the Theme-right settings, change => Top/bottom padding to 50, Row Layout to Full width=>Save
Add Widget, select SiteOrigin Headline widget, click on his Edit, type in the Title “Contact”=>Done/Save.
Add a second Row, Edit Row Layout to 2 (column)=>Change the ratio between the left and right column to 70:30 (click the percent and type in 70 for the left column and 30 for the right column or drag the middle line to the right)
Add the Widgets for our column, select Visual Editor=> Click to duplicate the Visual Editor widget and drag it to the right (one on the left and one for the right column)
Let’s Edit the Left Widget: Edit=> Type into the box, Your Name (Company name), Address, email, phone. Press Enter to create a new line (like MS Word), here click the button to create a horizontal line=> click Done to save.
Below the left Visual Editor Widget you must add another widget.
Add Widget, select SiteOrigin Google Maps widget, click the widget Edit=> Type in your Address/Location=> select Interactive Map=> 325 pixel Height=>Done=>Publish/Update.

Let’s edit the right widget for your Contact Form. Click on edit and let all as it is…. We’ll come back!
Now we have to grab some short code from your Contact Form.
Open in New tab your WP Dashboard. On the left side menu of your Dashboard find Contact Form and click on=> on the opened window you’ll see a row with Created Contact Forms. Click to open it.
You must see some text like this:
Your Name (required)
Your Email (required)
Subject
Your Message
Send …
If you see that, look for a short code on the right side or on Top of that, it’s a line of code. Copy that line of code, and go back to your Contact Page right Widget (it must be open) and insert/paste your CODE into the text box=>click on Done=>Publish
If you want to add Social Media Buttons use Step 18 than save and publish.

Step 24: Create Testimonials Page or Success Stories
We have to do 2 things first: a) Create Testimonials and b) Create a Client list
a) Create Testimonials
Dashboard=> On Left side Menu look for “Testimonials”=>Click Add New=> Type in the Testimony Name or Company=> in the Body, type in the text received from your client, company (email, comments, facebook, etc)=>on Title/role for the person/company (eg:  Webdesigner / SUMO Advertising)=> Add featured image (his/her picture)=>Add a Category name  (eg:”test1” or “test2” or “test 3”)=>Publish
Repeat all this steps to Add all your testimonials. If you have finished let’s go to next part,
b) Create a Client List
Go to your Dashboard=>look for Clients=> Add New=> Title your client (or not. The logo is important for us)=>click to upload a featured image (client logo)=>Publish
Repeat the process for all clients you want to show up.

Now we can Create our Success Stories Page
Go to your Dashboard=>Pages=> Add New=> Type the Title “Success Stories”
Add a Row, Edit Row Layout to 1 (column)=> Theme tab-right settings change, Top/bottom padding to 40=> Row Layout to Full width=>Save
Add Widget, select Visual Editor widget, Edit widget=>Type in your Title “What Our Clients Are Saying” =>click Done
Add Row, the second one, Edit row layout to 2 (column)=>on right settings, Top/bottom padding to 20=> Border bottom color to #d63737 => Save.
Add Widget, select SiteOrigin Video videos (one for the left and one for the right column) => Click on Edit widget=>Click to edit each widget, Check “External” =>Add your Video URL for each one=>Done.
Add Row no 3 for Testimonials, Edit row layout to 3 (column). Click the % and change to 33% for each one).
Add Widget, Select the Sydney FP: Testimonials widget, duplicate this 2 times and drag one to each column. Now we have 3 widgets. Click to edit your first widget =>change “Number of  testimonials to show “ to  “1” => Add category name “test1” for first widget, test 2 for the second and test 3 for your 3-rd widget=> Done. Do the same step for all your testimonials.
Add Row no 4, for Clients, Edit row, set the Row Layout to 1 (column)=> right settings change => Top/bottom padding to 30px=> Background color to #efefef (gray) => Row layout to Full Width=> Save
Add Widget, Select Sydney FP: Clients widget=> Click widget Edit=>change Clients to show to ‘-1’=> Done/Save
Add Row no 5, for Call to Action, Edit Row layout to 1=> on the theme right settings change , Top/bottom padding to 10px=> Background color to #252525=> Row layout to Full Width=>Save
Add a Widget, Select Sydney FP: Call to Action widget, Edit widget=> “Your call to action” type in “We are here to Help you….”=>link for the button http://www.yoursite.com/contact => Text for the Button “Contact Us”=> Do not display inline with text=> Done
If you want to add Social Media Buttons, use Step 18. Don’t forget to click Publish !

 Step 25: Create Blog Posts
Go to your Dashboard => Posts= > Click Add New=> Type in the Title for your blog post=> on the body box add your Post Text, Pictures, Videos, links, whatever you want=> Add a Category or check a Category box to assign your Blogpost => Add a Featured image for your blogpost (lower right side)=> Publish/Update to save your Post. You can Save your Blogpost as Draft and Publish it later. It’s on you….
Create at least 3 Posts to look good your Homepage Latest News Section.

Step 26: Customize Widgets Section
Dashboard=>Appearance =>Widgets. On the Right side you’ll see a box called “Sidebar”.
Here You must Drag and Drop all Widget you want to Show up.
We choose only the Search Box and Recent Posts. Delete all other widgets that are in the sidebar by default by clicking on them and clicking the delete tab.
If you are not content with the Old Style for the Recent Posts widget (only Title), you can add a New Plugin called Recent Post Extended which allows you to have thumbnail and excerpt for each new post.
To do that Go to Dashboard=>Plugins=>Add New, search for “Recent Post Extended” Install and Activate than come back here Appearance=>Widgets, Select and Drag into the Sidebar the “Recent post Extended” Widget.
To customize the widget, click on to expand than change the Thumbnail size to 75×75, check the box to display excerpts, Change Excerpt Length to 8, Uncheck Read More box, Check the box Use Default Styles=>Save

If you have a Twitter Account and want to have your twitter feed you must do this Steps:
Drag&Drop a Text Widget into the Sidebar => Go to your Twitter Account, hover over your image and click on Settings (on the left side)=>click on Widget=> Create New=>on opened page click Create Widget=> Copy the HTML Code (must be below your twitter feed) and go back to your Opened Sidebar Text Widget and Paste in your Code. Don’t click Save yet !!!
To have a Twitter Feed Box with a Width of 250 and a Height of 500 you must replace some code….
Copy this code: <a class=”twitter-timeline” width=”250″ height=”500″ and replace all before “href”.
You can do it later. Save all changes with the Original Twitter Code. If you Don’t like come back and replace with the bold red cod.

Step 27: Create the Header Menu
Go to WP Dashboard => Appearance => Menus=>Create New Menu and Name it “Header Menu”=> On the Dropdown select Header Menu , check the box Primary Menu.
Add/Drag from the Left Side into your Header Menu Pages you want to Show there.
We had added: Home, Gallery, About, Blog, Contact, Employees, Success Stories.
Drag under the About Page, a little bit to the right, your Employees and Success Stories pages to become a Submenu=> click on Save Menu
You can rearrange the order of your pages. Don’t forget to Save the changes!
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 (please SAVE after you update!
You can add any Page you want that aren’t in the left list by using the Custom option.

Step 28: How to Modify Footer
Now this STEP you must be EXTRA, VERY, SUPER …CAREFUL !!!
If you delete one single extra line of code all of your hard work will be lost, wiped out!
If you want to modify the default footer “Proudly powered by…..” with your Website Name, Business Name or your Name, follow this STEP carefully !!!
(Before Doing this change it is Better to Backup your entire website. Learn How from our Website Video Tutorials )

We will present here 2 options: a) Create and Replace only the Copyright part of the code and b) Replace the entire Footer code with the, modified by you, Code below

a) Create and Replace only the Copyright part of the code
This is a sample for footer Copyright text:  © STEPS TO BE ONLINE.  All rights reserved.

First you must create your Copyright text.
Go to your Dashboard=>Pages =>Add New. Title it Copyright. You will DELETE this page after the replacement process. On the Body box, on Visual Mode create your Copyright. You can Bold, Underline, Change color accordingly to your site colors, link to your site or to a specific page if you have (Terms and Condition, Privacy Policy, Sitemap, etc).
When your Copyright Text looks GREAT change to Text Mode (click the upper”Text” tab).
You’ll see an HTML code like this one:
<strong>© <a href=”http://www.stepstobeonline.com/”>STEPS TO BE ONLINE</a></strong>. All rights reserved
This is the code you must Copy and Paste into your website footer.
Copy the code ! and
Go to your Dashboard => hover over Appearance => click on“Editor” to Open in new bowser tab => on this Page on the right side menu look for Theme Footer and Click on “footer.php” => Click the “Proceed” button in the center. You’ll see the Footer code; look for the footer.php area.
There are 2 lines of code, 2 div’s, div class and div site or style…. Something like (we’ve colored them red to be more visible in this tutorial):
   <div class=”site-info container”>
CODE TO BE REPLACED
CODE TO BE REPLACED
   </div><!– .site-info –>
DON’T Touch this 2 lines of Code!!! Don’t DELETE anything from them!
Select the code between the div’s and replace it with your Copyright Code=> Click on “Update files” button below.  That’s ALL ! Open your site in new browser tab to check….

 Or you can use the second option:
b) Replace the entire Footer code with the Code below, modified by you with you info
Go to your Dashboard => Appearance => click on Editor=>Click on “footer.php” on the right=>
Click the “Proceed” button in the center. Now delete everything you see.
On the code below wherever see STEP TO BE ONLINE in red, replace it with your website address and business name or name (only two places you need to update, just 2!)
<?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.stepstobeonline.com‘, ‘sydney’ ) ); ?>”><?php printf( __( ‘Proudly created by %s’, ‘sydney’ ), ‘STEPS TO BE ONLINE‘ ); ?></a>
 </div><!– .site-info –>
 </footer><!– #colophon –>
</div><!– #page –>

<?php wp_footer(); ?>

</body>
</html>

And click “Update file” button below!
Go to your website to make sure everything is still running, open in new tab.

Sorry !….  You can not copy here the CSS Code BUT you can DOWNLOAD all CSS and HTML Codes used on this Tutorial from our Download page

Step 29: Translate Your Website (Optional)
If you want to translate your website, make sure you have the Polylang plugin installed and activated.
This plugin will not auto translate your website, will create ALL pages on a second language with a Flag on your Homepage, and you will translate all manually.

One last reminder. If you turned off/deactivate your WP Super Cache Plugin go back and activate it.
That’s all. Congratulation!
You have now a Modern Website, made by yourself, ready to receive TRAFFIC, Visitors.
Send your site to web directories, search engines, share it on social networks….

Have a nice day and… SUCCESS !

Build your site with Free Domain and Free Hosting
Build your website with Paid Domain and Hosting at the BEST RENEWAL PRICE

Download this Step by Step Guide Here (pdf)

To Activate The Download Link please insert the required info:

 

One thought on “How To Make a Modern WordPress Website From Scratch

Leave a Reply

Your email address will not be published. Required fields are marked *