How to make a WordPress website 2017

Modern WordPress tutorial Subscribe

A step by step guide on how to create a WordPress website for 2017. Fully responsive & 100% customizable.

modern-line

Quick steps to create your website:

1. Register domain + set up hosting
Sign up with DreamHost for discounted hosted and get a free domain. If you require faster / premium hosting, check out: WP Engine or bluehost.

2. Purchase your WordPress theme
In this example we use the Divi WordPress theme. Alternatively you could check out themes by: Tesla Themes, themeforest, Theme Isle, or StudioPress

3. Install WordPress + upload your WordPress theme
Once you’ve secured your domain and selected your WordPress theme. Check out the video on how to install WordPress on bluehost and uplaod your WordPress theme.

Want to know how to make a WordPress website in 2017?

It’s easy!

Modern WordPress tutorial

Below is our step by step guide on how to build out our modern WordPress website. Follow along with our YouTube video to create your beautiful and effective website.

Step 1 | Preparation
Step 2 | Planning & design
Step 3 | Install WordPress
Step 4 | Upload & install WordPress theme
Step 5 | Set up email for your website
Step 6 | Set up email marketing / newsletter
Step 7 | Customizing your website
Step 8 | Set up Google Webmaster Tools
Step 9 | Set up Google Analytics

View the LIVE example of the website we’re going to build at www.modernwptutorial.com

Full tutorial video also available on the Lurn Digital YouTube channel

Step 1 | Preparation (WordPress theme, domain, hosting, logo)

modern-line

By failing to prepare, you are preparing to fail

– Benjamin Franklin

Step 1.1 | Purchase and download your WordPress theme

For the Modern WordPress tutorial we’re using Divi by Elegant Themes.

To get started, purchase the Divi WordPress theme from Elegant Themes.

  1. Go to the Elegant Themes website
  2. Select ‘Join to download’
  3. Choose your package and hit ‘Sign up today!’
  4. Enter your details and make payment
  5. From within the Elegant Themes dashboard, under themes, download the Divi theme package

What is a WordPress theme?
A WordPress theme integrates with WordPress to alter the display and functionality of your website content. A WordPress theme is comprised of a number of files put together by designers and developers to help you create a cohesive and impactful website. The quality of themes, in terms of both design and development can vary greatly – generally you get what you pay for!

Step 1.2 | Secure your domain

For the Modern WordPress tutorial we’re using DreamHost as our domain registrar. Follow along and get your FREE domain (.com, .net, .org, .info, .xyz) for the first year here.

What is a domain?
Your domain is effectively the address of your website online, for example www.YourBusiness.com. It is the digital equivalent of a bricks and mortar store, and often your most valuable form of ‘owned’ media.

How to set up a domain (.com, .net, .org, .info, .xyz) & hosting – step by step

  1. Go to the DreamHost website (this link will give you a FREE domain + hosting discount)
  2. Create your account by selecting a username and password
  3. Choose your domain by searching for the domain name you want to register
  4. Select the 1 year hosting plan which includes a FREE domain and a 20% discount
  5. Skip the additional options
  6. Enter your details, make payment – and you’re up and running!
  7. Under ‘manage domains’ you will be able to see your new domain, which will be hosted by DreamHost

How to set up a country specific domain (.ca, .co.uk, .com.au, .co.nz, etc) & change the nameservers for the domain to be hosted by DreamHost

  1. Go to either GoDaddy or Crazy Domains to register your domain (see our Domain Registration Tutorials for WordPress videos)
  2. Search for your domain, enter your details and make payment
  3. From the dashboard, navigate to the manage domains section and change the nameservers to point to DreamHost by amending the DNS records to the following
    • ns1.dreamhost.com | 66.33.206.206
    • ns2.dreamhost.com | 208.97.182.10
    • ns3.dreamhost.com | 66.33.216.216

If you have a current website live and you want to create your new website in a development environment first, then check out step 1.3 below on how to set up a development environment for your new website. This will allow your current site to stay live until you’ve finished the design for your new website. We have a video on our WordPress tutorials page that shows you how to take your site live from the development environment, once you’re ready.

Step 1.3 | Set up hosting

For the Modern WordPress tutorial we’re using DreamHost for our hosting provider. Follow along and access a 20% discount here.

How to set up hosting on DreamHost for your domain (.com, .net, .org, .info, .xyz)

  1. Go to the DreamHost website
  2. If you’ve followed the steps in the section above your hosting will already be setup, if it isn’t already review step 1.2 above

How to set up hosting on DreamHost after changing the name servers in Step 1.2

  1. Go to the DreamHost website (this link will entitle you to a hosting discount)
  2. Create your account by selecting a username and password
  3. If you want to register a FREE domain (.com, .net, .org, .info, .xyz), you’re eligible to do that, or select ‘I already own this domain’.
  4. Select the 1 year hosting plan which includes a 20% discount
  5. Skip the additional options
  6. Enter your details, make payment – and you’re up and running!
  7. Under ‘manage domains’, select ‘Add hosting to a domain / sub-domain’
  8. Add your domain to the ‘domain to host’ field
  9. Leave the ‘add www’ prefix, as this is the default
  10. For the ‘Run this domain under the user’ option, select ‘create a new user’ and either use the default or create a specific username
  11. If you’re wanting to set up an email for your website with Google Apps, check the Google Services box, otherwise leave this unchecked.
  12. Then select ‘Fully host this domain’, you’ll see a username and password (record these somewhere safe).

How to set up a development environment for your new website

  1. Go to the DreamHost website (this link will entitle you to a hosting discount)
  2. Create your account by selecting a username and password
  3. If you want to register a FREE domain (.com, .net, .org, .info, .xyz), you’re eligible to do that, or select ‘I already own this domain’.
  4. Select the 1 year hosting plan which includes a 20% discount
  5. Skip the additional options
  6. Enter your details, make payment – and you’re up and running!
  7. Under ‘manage domains’, select ‘Add hosting to a domain / sub-domain’
  8. In the ‘domain to host’ field, enter your website name followed by .dreamhosters.com (for example yourwebsite.dreamhosters.com – this will create a sub-domain that you can use to create your new website.)
  9. Leave the ‘add www’ prefix, as this is the default
  10. For the ‘Run this domain under the user’ option, either select an existing user, or ‘create a new user’.
  11. Then select ‘Fully host this domain’, you’ll see a username and password (record these somewhere safe).

If your domain isn’t registered with DreamHost (i.e. you purchased your domain through GoDaddy, Crazy Domain or another domain registrar) that’s ok, you’ll just need to change the nameservers for your domain to the following:

  • ns1.dreamhost.com | 66.33.206.206
  • ns2.dreamhost.com | 208.97.182.10
  • ns3.dreamhost.com | 66.33.216.216

We have videos on our WordPress tutorials page for how to do this with GoDaddy and Crazy Domains, alternatively you can Google ‘how to change nameservers in (enter name of your domain registrar)’, and then enter the nameserver information above to point your domain towards DreamHost.

Hosting stores all the information for your website and serves up the content when someone visits your domain. Like with WordPress themes, you get what you pay for when it comes to hosting. Our preferred inexpensive options are DreamHost and SiteGround – we have video tutorials for each provider on our WordPress tutorials page.

Step 1.4 | Logo & favicon design

If you want a graphic designer to put together a logo for you check out Freelancer or 99Designs. Another option could be to make a simple ‘png’ logo using a tool like logomakr.com.

The first graphical elements we’ll use on your new website will be your logo and your favicon, if you have these already you can skip this step and we’ll move right along! If not, you can have a designer create them for you or I’ll show you how you can create something simple yourself.

Step 2 | Planning & design (Wireframes, UX) – begin with the end in mind!

modern-line

Step 2.1 | Wireframes & page layouts

We have created a website wireframe template to help you plan your website content. To download this template for FREE – subscribe to our mailing list below.

Before getting started on any digital project, it’s important to clearly define your objectives. Once you know ‘why’ your building your website, and ‘how’ you want users to interact with your site, you can then plan out your strategy. Often the best way to do this is to put together a series of page layouts or ‘wireframes’ that outline the structure and functionality of your website and provide you with a roadmap for success.

Sign up to our newsletter in the footer to get access to your FREE tutorial assets

Step 2.2 | Content design

For quality stock images go to Shutterstock, Depositphotos, Pexels and Unsplash. Icons8 is a powerful tool for generating relevant icons. If you need help writing web copy then check out freelancer.

Well designed content is one of the most important aspects of web design. Now that you’ve clearly defined the objectives for your website and grouped your information and offerings into effective page layouts, it’s time to write your ‘web copy’, source quality images and icons, and begin piecing together your website.

Step 2.3 | Design elements

For this tutorial we will use Kuler to explore our brand color and discover complimentary colors. We’ll also be using Google fonts to consider font pairing for our website.

You will need to consider what your brand color will be and the color palette you will be using for your design. Adobe have a great tool call Kuler for helping select brand colors that will work with your design. You will also want to consider typography and which typefaces you want to use for your design. For this I would recommend checking out some great free resources: Google Fonts or Font Squirrel.

Step 3 | Install WordPress

modern-line

Step 3.1 | Install WordPress on DreamHost

In this tutorial we will be installing WordPress on DreamHost, if you haven’t setup your hosting yet, get your 20% discount here.

For tutorial videos on installing WordPress via other hosting providers such as SiteGround, please visit our WordPress tutorials page.

How to install WordPress on DreamHost | Steps

  1. Go to DreamHost dashboard
  2. From your dashboard go to Goodies, then One-Click Installs
  3. Select ‘WordPress’ from the list of One-Click Installs
  4. Under ‘Install to’, select the domain that you want to install WordPress on
  5. For ‘Select Database’, leave this as ‘Automatically Create Database’
  6. Unselect ‘Deluxe Install’
  7. Click on ‘Install it for me now!’

Once WordPress is installed on your domain, you will receive an email from DreamHost requesting you to create an admin user. Follow the first link of the email which will take you to yourwebsite.com/wp-admin/install.php. From there you can follow these steps:

  1. Select your language
  2. Insert your site title
  3. Create a user name and password
  4. Assign an email address for this user
  5. Discourage search engines from indexing your website (optional – you will uncheck this from within WordPress once you’ve built out the pages for your website)
  6. Select ‘Install WordPress’

You will receive a ‘Success’ message. To login to the back-end of your website moving forward, go to yourwebsite.com/wp-admin and use the username and password you just created.

Step 4 | Upload & install WordPress theme

modern-line

Step 4.1 | Upload & install Divi WordPress Theme

If you haven’t downloaded Divi by Elegant Themes as yet, you can purchase the theme here.

How to upload a WordPress theme – Divi | Steps

  1. Download the Divi WordPress theme by Elegant Themes – if you haven’t already, that is!
  2. From your WordPress dashboard, go to ‘Appearance’, then ‘Themes’
  3. Select ‘Add New’, then ‘Upload Theme’
  4. Select ‘Choose File’
  5. Navigate to find your theme file ‘Divi.zip’, then select ‘Open’, and ‘Install Now’. (This may take a minute or so to upload)
  6. Once the Divi theme has uploaded successfully, select ‘Activate’ & you’re ready to go!

Step 5 | Set up email for your website (Google Apps)

modern-line

Step 5.1 | Set up an email account for your website (Google Apps)

For the Modern WordPress tutorial we will set up an email account for your website using Google Apps, access your free trial here.

How to set up email with Google Apps | Steps

  1. Go to the Google Apps website
  2. Click on ‘Start free trial’
  3. Enter your personal info and current email address (not the one you want to create), then click ‘Next’
  4. Select ‘Use a domain name I have already purchased’, enter your domain name, then click ‘Next’
  5. Choose your username (i.e. hello@yourdomain.com, or team@yourdomain.com, etc), and password, then click ‘Accept and sign up’
  6. If you need to add additional users, click on ‘Add people to your Google Apps account’
  7. You’ll then need to verify your domain ownership, to do this go to the ‘alternate method’ tag and select ‘meta tag’, copy the meta tag provided
  8. Go to your WordPress dashboard, under appearances, choose editor and select the ‘header.php’ file
  9. Add the meta tag just before the closing ‘head’ tag which will look like
  10. Once you’ve pasted your meta tag, select ‘update’, then head back to the Google Apps page
  11. Check the ‘I added the meta tag to my homepage’ box
  12. Go to your hosting admin panel, in this case go to your DreamHost dashboard, then ‘Manage domains’
  13. Click on the ‘Edit’ button next to your domain
  14. Scroll down and check the ‘Google services’ checkbox if you haven’t already, then select ‘Change settings’
  15. Go back to Google Apps, check the ‘I have opened the control panel for my domain’ checkbox, confirm that the mx records match what Google suggests, by going into DNS records for your domain in DreamHost
  16. Then select, ‘I created the MX records’ and ‘I saved the mx records’ in Google Apps
  17. Click the ‘Verify domain and set up email’ button
  18. It will take about an hour for Google Apps to complete this process

Step 6 | Set up email marketing / newsletter opt-in

modern-line

Step 6.1 | Set up email marketing / newsletter with AWeber

In this tutorial we will set up email marketing with AWeber and create an newsletter opt-in form. Access your free trial here.

Step 7 | Customizing your website (step by step)

modern-line

Step 7.1 | Customize the default WordPress settings

The first thing we need to do when building out a new website is customize the default WordPress settings.

Step 7.2 | Customize the Divi theme options

Next we need to customize the Divi theme settings, add our logo and favicon, integrate our AWeber account and save our changes.

Step 7.3 | Install any additional plugins required for our website

For the Modern WordPress tutorial we will use the following FREE plugins:

Step 7.4 | Use the Theme Customizer to execute your design

Follow along in the video tutorial for the custom settings used for the Modern website example

The settings for the ‘typography’ tab created by Easy Google Fonts are listed in the table below

Element Font family Font weight Font color Font size Line height Letter spacing
Paragraphs Roboto 300 #777777 14px 1.6 Default
Heading 1 Roboto 300 #444444 35px 1 1
Heading 2 Roboto 300 #444444 22px 1 Default
Heading 3 Roboto 300 Brand color 26px 1.1 Default
Heading 4 Roboto Regular #444444 16px 1.4 Default

We have used no H5s or H6s in this design, however if you decide to include these in your design, be sure to add font properties for these in the Easy Google Fonts settings.

Step 7.5 | Use the Divi Builder to create page content & templates

In this tutorial we will go through how to use the Divi Builder to create and customize every page in this demo. If you need further information check out the theme documentation video walkthroughs by Elegant Themes here

The first thing we’ll need to do is create the initial pages for our website. This should be customised to suit your business or project. For the Modern WordPress tutorial we’ll create the following pages

  • Home
  • Services
  • Web design (sub services page)
  • About
  • Our work
  • Contact
  • Blog
  • How it works
  • pricing
  • Privacy policy
  • Terms & conditions
  • Thank you

Below is the HTML markup that you will need to add to your 'footer.php' file to update your footer text


/*------Copy from below this line


© 2017 | All rights reserved. <a href="https://icons8.com/" target="_blank">Icons by Icons8</a>


Don't copy this line-------*/

Step 7.6 | Add custom CSS to Divi Theme Options page

In this tutorial we have provided some additional CSS to be added to the Theme Options page, copy the CSS from below and paste it in to the Theme Options CSS panel in WordPress.

/* Copy the CSS below this line -------


/*—Footer social icon spacing—*/

.footer-social img {margin: 0px 4px;}


/*—Footer anchor text color—*/

.footer-text a {color: #fff;}


/*—Text color on how it works boxes—*/

.how-it-works-box p {color: #fff !important;}


/*—Text color on pricing page – colorful services boxes—*/

.feature-cta-box p {color: #fff !important;}


/*—Heading anchor color—*/

h2 a, h4 a {color: #2f8eee;}


/*—-Contact button color and weight—*/

.contact-header a {color:#0076ed !important; font-weight: 100;}


/*---'Menu' label - this will add the word 'MENU' next to the menu toggle (optional)---*/

.et_pb_header_toggle:after {

content: 'MENU';

color: #fff !important;

position: absolute;

top: 15px;

right: 35px;

}


-----Do not copy this line*/

Step 8 | Set up Google Webmaster Tools

modern-line

Step 8.1 | Set up Google Webmaster Tools & index your website for search

For your website to be indexed by search engines we need to unselect the ‘Discourage search engines from indexing this site’ box in the ‘Settings’ > ‘Reading’ tab & submit a sitemap through Google WebMaster Tools. For this we will use the Yoast SEO plugin by Team Yoast.

Step 9 | Set up Google Analytics

modern-line

Step 9.1 | Set up Google Analytics

Google Analytics allows you to track the performance of your website, and set up goals for user behaviours on your website. Set up Google Analytics here

Share This