WordPress Tutorial For Beginners 2017

Create a WordPress website step by step Subscribe

Build a website using WordPress with this WordPress tutorial for beginners 2017.

modern-line

Create your website in 2017 with this FREE WordPress tutorial for beginners!

Set yourself up for success!

What you will need:

Logo + favicon: If you haven’t got your brand logo and favicon yet, check out a free tool called Logomakr, or have one designed at 99Designs, or Freelancer. Check out the video tutorial: Create a free logo using Logomakr

Website content for your business: You will need to put together great web copy and source relevant images for your website. You can find free images at Unsplash or Pexels, or more specific high quality stock images at Shutterstock. In this tutorial we’ll use Font Awesome for social media icons, it’s free and as its name suggests, it’s awesome! For icons, you could also checkout Icons8 which we’ve used in previous WordPress tutorials.

See who else is using WordPress: WordPress notable users

A small budget: To set up your own fully hosted WordPress website you’ll need the following:

  • Custom Divi layout: Free (usually $89) | Sign up to our newsletter to download. Already on the team? Then check the monthly newsletter for the links to the ‘tutorial resources’ + other discounts

Optional items include:

STEP ONE

Set up hosting & register your website domain

For this tutorial we’re using BlueHost for our hosting provider. Through Lurn Digital you will get access to a hosting discount of up to 54%, plus a FREE domain. Want faster hosting? If your website speed is important to you, we would recommend using WP Engine, click the link below and use the promo code: wpe20off

Follow the steps below:

  1. Head to the bluehost website (massive hosting discount up to 54% + FREE domain)
  2. Select ‘get started now’ for the plan you want (shared hosting will be fine for most users & you can always upgrade later)
  3. Choose the hosting plan that’s right for you, hit ‘select’
  4. Either use your existing domain, or type in the domain that you want, then hit ‘next’
  5. Enter in your details, and make payment
  6. Select ‘no thanks’ to the add-ons and then navigate to the dashboard
  7. You will receive a welcome email from bluehost with all your details, and an email titled ‘WHOIS Verification for..’ – click the link in this email to verify your ownership of the domain
Watch the how to make a business website in WordPress tutorial

Recommended domain registrars

  1. For country specific domains check out: GoDaddy
  2. If you’re in Australia, check out: Crazy Domains
  3. Review the steps in this section on how to change the nameservers to point at bluehost or WP Engine
  4. Check out our video on how to register a domain and change the nameservers: here

How to change nameservers to bluehost

If you’ve purchased your domain already through an alternate domain registrar, you will need to change the nameservers and point them towards bluehost. Google the instructions for your specific registrar, alternatively:

  1. From your bluehost dashboard, go to ‘Domains’ > ‘Assign’
  2. Follow the steps to assign your existing domain to your bluehost account
  3. Navigate to the manage domains section of your domain registrar
  4. Change the nameservers to point to bluehost by amending the DNS records to:
    • ns1.bluehost.com | 162.88.60.37
    • ns2.bluehost.com | 162.88.61.37

How to change nameservers to WP Engine

  1. From your WP Engine get your CNAME record details (yourinstall.wpengine.com)
  2. Login to your domain registrar account, go to the DNS management section and point the A record ‘@’ to the CNAME (yourinstall.wpengine.com).
  3. You may want to set up an auto-forward on your domain from http://yourdomain.com to www.yourdomain.com
  4. Check out this video for more info

STEP TWO

Purchase & download the Divi theme and get access to your FREE layout pack

Divi by Elegant Themes is a premium WordPress theme that is fully supported and has an incredible range of features including a revolutionary drag and drop editor and front-end editor, built-in split testing capabilities, and an extensive video library. As part of the Lurn Digital community, you get access to exclusive discounts!

To purchase and download your copy of Divi, follow the steps below:

  1. Go to the Elegant Themes website
  2. To purchase Divi, select ‘Join to download’
  3. Choose the package that’s best for you, and hit ‘Sign up today!’
  4. Enter your details and make payment
  5. Once you’re in your Elegant Themes dashboard, go to ‘Themes’ and download the Divi theme package

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

STEP THREE

Introduction to WordPress: How to Install WordPress, upload a theme, and JSON file

In this tutorial, we use bluehost as our hosting provider that features a one-click WordPress install to help simplify the process.

How to install WordPress via the bluehost one-click install:

  1. Login to your bluehost account cPanel
  2. From the main bluehost dashboard, click on either ‘install scripts’, or navigate to the ‘website’ pane and select ‘One-click installs’
  3. Under the ‘One-click installs’ section, choose WordPress, then select ‘Install’
  4. Choose the domain you want to install WordPress on, then select ‘check domain’
  5. If you receive an error message, wait a few hours for the domain to propagate and try again. If you are still getting an error contact the bluehost 24/7 support
  6. If there are no error messages, select ‘show advanced options’, enter your ‘site name’, username, and a password
  7. Tick the terms and conditions box
  8. Click the ‘install’ button
  9. Once WordPress has successfully installed, click ‘view credentials’, or check your email for a confirmation email
  10. Follow the instructions, or go to www.yourdomain.com/wp-admin, and use your credentials to login to the back end of your website

Alternatively, watch this YouTube video for more details on how to install WordPress manually via FTP

How to upload the Divi WordPress theme

  1. If you haven’t downloaded the Divi WordPress theme by Elegant Themes, you will need to do that first
  2. On the left hand side of your WordPress dashboard under ‘Appearance’, select ‘Themes’
  3. Choose ‘Add New’, and click on ‘Upload Theme’
  4. Select ‘Choose File’
  5. Find your theme file that you just downloaded called ‘Divi.zip’, select ‘Open’, then ‘Install Now’ (This may take a minute or so to upload)
  6. When the Divi WordPress theme has uploaded successfully, select ‘Activate’
Watch the how to make a business website in WordPress tutorial

How to upload the Divi layout pack – JSON file

  1. On the left hand pane of your WordPress dashboard go to ‘Divi’ > ‘Divi Library’
  2. Select ‘Import & Export’
  3. Navigate to the ‘Import’ tab and select ‘Choose file’
  4. For the page layouts, locate the file you downloaded called ‘brooklynPages.json’, select open, then hit ‘Import Divi Builder Layouts’
  5. If you plan on having a blog and want to use the post layouts, locate the file called ‘brooklynPosts.json’, select open, then hit ‘Import Divi Builder Layouts’
  6. These layouts will now be saved in your Divi Library

STEP FOUR

How to create pages, posts and menus in WordPress

Now it’s time to create the pages for our website, using the layout pack will save a lot of time. You can use these layouts as the base design, and create as many pages as you like.

How to create pages in WordPress:

  1. Go to your WordPress dashboard, under pages, select ‘All pages’ to view existing pages, or ‘Add new’ to create a new page
  2. Enter the page name in the ‘Enter title here’ field
  3. Choose to ‘Use the Divi Builder’
  4. To use an existing layout, select ‘Load from library’ and pick the appropriate layout
  5. Alternatively, create your page using the Divi builder
  6. You can either save your page as a draft or select ‘Publish’

For a more detailed walkthrough of the Divi Theme, checkout the Divi documentation guide video series

How to create posts in WordPress:

  1. Go to your WordPress dashboard, under posts, select ‘All posts’ to view existing posts, or ‘Add new’ to create a new post
  2. Enter the post name in the ‘Enter title here’ field
  3. Choose to ‘Use the Divi Builder’
  4. To use an existing layout, select ‘Load from library’ and pick the appropriate layout
  5. Alternatively, create your post using the Divi builder
  6. Under ‘Divi post settings’ in the top right, for page layout select ‘Full width’, and for post title select ‘hide’
  7. You can either save your page as a draft or select ‘Publish’

For a more detailed walkthrough of the Divi Theme, checkout the Divi documentation guide video series

How to create a menu in WordPress:

  1. From your WordPress dashboard, go to ‘Appearances’ and select ‘Menus’
  2. In the ‘Menu name’ field, enter a name for your menu (e.g. ‘Main menu’), and select ‘create menu’
  3. Under ‘Menu settings’, select ‘Primary menu’
  4. To add menu items that link to specific pages, posts, or any other content on your website, check the boxes in the pane to the left, next to each piece of content (i.e. pages) that you want to add, and click ‘add to menu’
  5. Drag the menu items into the order you want, and click ‘save menu’
  6. For the ‘contact’ menu item add the CSS class: featuredMenuItem

STEP FIVE

How to update WordPress settings, Divi theme options and the theme customizer

It’s now time to configure our WordPress settings and have a look at how to adjust the theme specific settings to suit your business.

How to update WordPress settings

  1. From your WordPress dashboard, go to ‘settings’
  2. General settings | Enter site title and tagline, pick timezone, date format, and language
  3. Writing settings | For this tutorial we will leave these settings as the default
  4. Reading settings | Set front page to be a ‘static page’, and choose ‘home’ from the dropdown list. While your website is in development, select ‘discourage search engines from indexing this site’. Remember to uncheck this later once your website is live
  5. Discussion settings | Leave these as the default settings or review and amend accordingly
  6. Media settings | The default settings will be fine
  7. Permalinks settings | Select ‘post name’

For a more detailed overview of the general WordPress settings, checkout WordPress courses on Udemy or Skillshare

How to update the Divi theme options

  1. From your WordPress dashboard, go to Divi, then choose ‘Theme options’
  2. Click on the ‘Import/export’ button (up/down arrows in the right corner)
  3. Select the ‘Import’ tab, and select ‘Choose file’
  4. Navigate to the layout files you downloaded before, and select the file ‘brooklynThemeOptions.json’
  5. Select ‘Open’, then choose ‘Import Divi theme options
  6. In the ‘Custom CSS’ section at the bottom of the page, add the custom CSS that you downloaded from the Lurn Digital website, and select ‘save’
  7. To integrate Google Fonts, go to Google Fonts, choose your font/s and copy the embed code. Go to the ‘Integration’ tab within Theme Options and paste the copy within the < head > section
  8. To integrate Font Awesome, go to Font Awesome, enter your email to get your free embed code, and paste it within the < head > section on the integration tab of Theme Options

How to amend the Divi theme customizer

  1. In your WordPress dashboard, go to Divi, then choose ‘Theme customizer’
  2. Select the ‘Import/export’ button (up/down arrows)
  3. Click on the ‘Import’ tab, then ‘Choose file’
  4. In the layout pack files, select ‘brooklynThemeCustomizer.json’
  5. Click ‘Open’, then select ‘Import Divi customizer settings

For more details, checkout the Divi documentation guide at Elegant Themes

How to amend footer text & links

  1. From your WordPress dashboard, go to Divi, then select ‘Theme customizer’
  2. Select ‘footer’, then ‘bottom bar’, and input the desired text and links in the ‘Edit footer credit’ section
  3. Use the code below as a guide

For more detailed walkthroughs, check out the Divi video library:

Watch the how to make a business website in WordPress tutorial

Google Maps API

To include a map on your website, you will need to generate a Google Maps API key. Detailed instructions on how to set up your Google Maps API can be found on the Elegant Themes website.

WordPress Widgets

Widgets in WordPress are typically used to add control the design and add functionality to sidebars and other widget-enabled areas within your website. For this tutorial we are going to create two custom widgets. To do this:

  1. Go to ‘Appearances’ > ‘Widgets’
  2. At the bottom right side of the widgets pages, enter the widget name ‘customRecentPosts’ and select ‘Create’
  3. Similarly, create another widget with the name ‘footerRecentPosts’ repeating the step above
  4. Refresh the page to see your new custom widgets, then add the ‘Recent Posts’ widget to each of the new custom widgets
  5. Leave the title blank for each ‘Recent Posts’ widget, for the ‘customRecentPosts’ widget set the ‘number of posts to show’ equal to 10, and for the ‘footerRecentPosts’ custom widget set this number to 3

How to add Font Awesome Icons

You can see all the icons available through Font Awesome: here

  1. Select the icon you want to use from here
  2. Copy the ‘i’ class tag for the icon you want to use
  3. Paste it into the relevant section on your website
  4. Wrap the ‘i’ class tag in an anchor tag if you want to add a link (see example below)

Creating a footer using the WordPress footer widgets

In this tutorial we will create a four column footer:

  1. Go to ‘Appearances’ > ‘Widgets’
  2. In ‘Footer Area #1’ add a text widget, set the title to ‘NEWSLETTER SIGN UP’, and add your AgileCRM form code (we will set this up in step 10, you can leave this blank for now)
  3. For ‘Footer Area #2’ add a text widget, add the title ‘FOLLOW US’, and add your font awesome code – remember to wrap this in a paragraph tag and assign a class of footerSocial
  4. For ‘Footer Area #3’ add a recent posts widget, input the title to ‘RECENT POSTS’, and set the number of posts to 3
  5. For ‘Footer Area #4’ add a text widget, input the title to ‘RESOURCES’, and copy the page links from the global footer module. Wrap these in a paragraph tag and assign a class of footerLinks
  6. Manage your footer settings in the theme customizer section

STEP SIX

Divi WordPress Theme tutorial | A walkthrough of how to amend and style content in the latest version of Divi

Divi is an incredibly powerful theme. What sets Divi apart is it’s custom page builder, SEO qualities and ability to save elements, rows, sections and entire page layouts to the Divi Library. In this video we give you a crash course in what you’ll need to know to create stunning layouts and edit existing content. Access the full Divi documentation video library for more info:

CSS tutorial | walkthrough

To amend the custom CSS in this tutorial:

  1. From your WordPress dashboard, go to ‘Divi’> ‘Theme Options’
  2. Follow along with the video as we go through the custom CSS line by line.
  3. The brand color used for this tutorial is: #35b2b6 rgb(53,178,182) rgba(53,178,182,x) where x = 0 to 1. Substitute your brand color to customize your design
  4. For more detailed courses on HTML or CSS check out Udemy or Skillshare, or register your interest at courses.lurndigital.com

CSS Property Reference | w3schools

For a list of the CSS properties and a description of their function, check out w3school

STEP SEVEN

How to set up a business email using G Suite (Google Apps for Work)

G Suite (previously Google Apps for Work) is a powerful offering from Google that allows you to create a domain specific email for your business, and includes a number of additional productivity tools.

Setting up a business email with Google Apps

  1. Go to the G Suite (Google Apps) website
  2. Select ‘Start free trial’
  3. Enter your personal info including your existing email address (not the one you want to create), click ‘Next’
  4. Choose ‘Use a domain name I have already purchased’, insert your domain name, then hit ‘Next’
  5. Pick a username (i.e. hello@yourdomain.com, or team@yourdomain.com, etc), a password, then select ‘Accept and sign up’
  6. If you want additional users, select ‘Add people to your Google Apps account’
  7. The next step is to verify your domain ownership, choose the ‘alternate method’ tab, and pick the ‘meta tag’ option, copy the meta tag provided
  8. From your WordPress dashboard go to ‘Divi’ > ‘Theme options’, click on the ‘Integration’ tab, paste the meta tag into the box labelled ‘Add code to the < head > of your blog’
  9. Save changes and head back to the G Suite (Google Apps) page
  10. Check the ‘I added the meta tag to my homepage’ box
  11. Login to your bluehost account, and follow the latest instructions on the Google website for how to configure your Google email in bluehost
  12. Once you’ve done that, click ‘Verify domain and set up email’, this process will take about an hour for Google to complete
Watch the how to make a business website in WordPress tutorial

Google Maps API

To include a map on your website, you will need to generate a Google Maps API key. Detailed instructions on how to set up your Google Maps API can be found on the Elegant Themes website.

STEP EIGHT

How to index your business website and make it visible to search engines using Yoast SEO & Google Search Console

The purpose of indexing your website is to ensure that people who are looking for your website (and eventually your offerings – we’ll cover SEO in other tutorials), can find your website via search engines like Google.

From your WordPress dashboard, go to ‘Settings’ > ‘Reading’, and uncheck the ‘Discourage search engines from indexing this site’ box.

How to install the Yoast SEO plugin & amend settings:

  1. From your WordPress dashboard, go to ‘plugins’ and ‘add new’
  2. Search for ‘Yoast SEO plugin’, find ‘Yoast SEO by Team Yoast’ and ‘install now’
  3. From the left hand pane of your WordPress dashboard go to the ‘SEO’ tab > select ‘Titles & metas’
  4. In ‘Titles & metas’, go through the tabs and set the ‘Meta robots’ toggle to either ‘index’ if you want the type of content to be indexed (i.e. searchable), or ‘no index’ if you don’t want the content to be found via search engines. To begin with you may want to index only pages and posts.

How to generate a sitemap using Yoast SEO plugin:

  1. Go to ‘SEO’ > ‘XML Sitemap’, on the general tab set the ‘XML sitemap functionality’ to ‘enable’
  2. In the ‘Post types’ tab, set ‘Posts’ and ‘Pages’ to ‘In sitemap’, and everything else to ‘Not in sitemap’, click save changes
  3. Similarly, in the ‘Taxonomies’ tab, set ‘Categories’ to ‘In sitemap’, and everything else to ‘Not in sitemap’, then save changes
  4. Go to the ‘general tab’ and click on the ‘XML Sitemap’ box next to ‘You can find your XML Sitemap here:’
  5. This will create a new link and open in a new tab, copy this link address (or keep this tab open as we will need this link once we set up Google Search Console).

How to set up Google Search Console and submit your website sitemap:

  1. Go to the Google Search Console website, and sign up or sign in using your google account.
  2. Search for ‘Yoast SEO plugin’, find ‘Yoast SEO by Team Yoast’ and ‘install now’
  3. From the left hand pane of your WordPress dashboard go to the ‘SEO’ tab > select ‘Titles & metas’
  4. In ‘Titles & metas’, go through the tabs and set the ‘Meta robots’ toggle to either ‘index’ if you want the type of content to be indexed (i.e. searchable), or ‘no index’ if you don’t want the content to be found via search engines. To begin with you may want to index only pages and posts.
  5. Then go to ‘SEO’ > ‘XML Sitemap’, on the general tab set the ‘SML sitemap functionality’ to ‘enable’
  6. In the ‘Post types’ tab, set ‘Posts’ and ‘Pages’ to ‘In sitemap’, and everything else to ‘Not in sitemap’, click save changes
  7. Similarly, in the ‘Taxonomies’ tab, set ‘Catagories’ to ‘In sitemap’, and everything else to ‘Not in sitemap’, then save changes
  8. Go to the ‘general tab’ and click on the ‘XML Sitemap’ box next to ‘You can find your XML Sitemap here:’
  9. This will create a new link and open in a new tab, copy this link address (or keep this tab open as we will need this link once we set up Google Search Console).

STEP NINE

How to set up Google analytics to track the performance of your business WordPress website

Google analytics is a powerful FREE tool for helping you track your website traffic, set up goals for your website, and monitor user behaviour and engagement.

How to set up Google Analytics account for WordPress

  1. Go to the Google Analytics website
  2. Sign in with your existing Google account or create a new account
  3. You may be prompted to create a new property (account for a domain), to do this manually go to the ‘Admin’ tab, under the ‘account’ dropdown, select ‘Create new account’
  4. Select to track a website, enter your account name and website name (these could be your business name)
  5. Enter your url (i.e. www.yourdomain.com)
  6. Set your industry, reporting timezone and select ‘get tracking ID’
  7. Copy the JavaScript with your tracking ID
  8. Go to the ‘Divi theme options’ section, select the ‘integration’ tab, and paste the JavaScript into the section titled Add to the < body > tag section
  9. Select ‘save changes’

STEP TEN

Setting up email marketing, a newsletter opt-in, and marketing automation with AgileCRM, ConvertKit, or AWeber

Want to take your online marketing to another level? Create email auto-responders, sophisticated marketing sequences and funnels, and much more with AgileCRM

Get started with AgileCRM on a risk-free 30 day trial, plus get one-on-one coaching:

  1. Go to the AgileCRM website
  2. Click ‘Sign up’ button
  3. Choose the option that’s best for you (we would recommend ‘Starter’), and hit ‘Get started’
  4. Enter your details, and follow the prompts
  5. Check out the AgileCRM getting started resources: Here

LAST STEP

CONGRATULATIONS – You’re done! It’s time to pay it forward

Help fund the next wave of FREE tutorials by paying what this tutorial was worth to you!

If you got value from this tutorial and want to show some love, then contribute via PayPal and help fund the next series of FREE video tutorials and content. We’ll be featuring our top contributors as a way of saying thanks!

Payments will be made to Modern Day Consulting Pty Ltd T/As Lurn Digital

Hire us or book some one-on-one time

If you want to book some one-on-one time to customize your design further, lurn more about building or marketing your website, or engage us to create your next website for you – get in touch and/or book some time: here

Share This