11.09.2013 Views

Create WordPress

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

<strong>Create</strong><br />

your own<br />

<strong>WordPress</strong><br />

Website<br />

Step by Step<br />

With No Step<br />

Skipped!<br />

Tyler Moore


11th Edition<br />

© 2013 Conutant Corp.<br />

All rights reserved. No part of this publication may be reproduced, distributed, or transmitted in<br />

any form or by any means, including photocopying, recording, or other electronic or mechanical<br />

methods, without the prior written permission of the publisher, except in the case of brief<br />

quotations embodied in critical reviews and certain other noncommercial uses permitted by<br />

copyright law. For permission requests, write to the publisher, addressed “Attention: Permissions<br />

Coordinator,” at the address below.<br />

8644 Falmouth Ave, #12A<br />

Playa Del Rey, CA 90293


Table of Contents<br />

INTRODUCTION: Building a Website<br />

Building a Website 7<br />

Overview 8<br />

What You Are Going To Build 9<br />

Chapter 1: Getting Your Website Name and Hosting<br />

7 “Musts” When Choosing a Hosting Company 12<br />

Selecting Your Website Name and Hosting 13<br />

Chapter 2: Installing and Setting Up <strong>WordPress</strong><br />

Installing <strong>WordPress</strong> 18<br />

Logging into <strong>WordPress</strong> 21<br />

Changing Your Password 23<br />

Turning Off Caching 24<br />

Chapter 3: Building Your Website<br />

Installing Your Theme 26<br />

Adding Website Pages 28<br />

Editing Website Pages 29<br />

Deleting Your Comment Box 34<br />

Editing Your Homepage 36<br />

Changing Your Footer 47<br />

Changing Your Logo and Phone Number 51<br />

Deleting Pages 53<br />

| Table of Contents 3


Table of Contents<br />

Chapter 4: The Sidebar<br />

Removing Sidebar Widgets 56<br />

Adding Content To Your Sidebar 58<br />

Adding Facebook To Your Sidebar 60<br />

Deleting Your Sidebar 62<br />

Chapter 5: Plugins<br />

Adding Content Visually To Your Sidebar 64<br />

Adding Social Media Icons 69<br />

Adding Your Twitter Feed 74<br />

Adding a Contact Form 79<br />

Adding a Price Table 84<br />

Adding a Photo Gallery 91<br />

Maintenance Mode 97<br />

Chapter 6: Creating Your Logo<br />

Using pixlr.com 103<br />

Photoshop and Gimp 110<br />

Chapter 7: Website Success Tactics<br />

Social Media 114<br />

Opening a Gmail Account 116<br />

Tracking Visitors With Google Analytics 118<br />

Setting Up Your Blog 125<br />

Search Engine Optimization (SEO) 132<br />

Setting the SEO-friendly Permalink Structure 133<br />

Using Google’s Keyword Tool 134<br />

| Table of Contents 4


Table of Contents<br />

Downloading the SEO Plugin 137<br />

Writing SEO-Friendly Posts 139<br />

Chapter 8: Finding Help<br />

Tips For Searching Google 143<br />

<strong>WordPress</strong> Forum 144<br />

YouTube 145<br />

Elance.com 146<br />

Craigslist 147<br />

Chapter 9: Bonus Topics<br />

Setting Up Email 149<br />

Security 154<br />

Creating Another Website 164<br />

Buying a Domain Name From GoDaddy 164<br />

Reinstalling <strong>WordPress</strong> (Starting Over) 171<br />

Homepage Missing / 404 Error 174<br />

Plugin Broke My Website 176<br />

Back that thing up 179<br />

| Table of Contents 5


Introduction<br />

Building a<br />

Website


Introduction<br />

In this book we will show you how to create a website, step-by-step with no step skipped! You will be<br />

using the same technology to build your website as Fortune 500 companies, pop stars like Jay-Z and Katy<br />

Perry, and professional web developers. Following this guide, you will be creating a website from scratch<br />

without having to learn any code, fancy design programs or technical jargon.<br />

Our goal is to help people create websites so people can start their own business online.<br />

We have helped over 2 million people in more than 200 countries create websites from scratch! These<br />

lessons have helped people as young as 9 and as old as 81 create a website, start a business, and build<br />

something amazing.<br />

What Kind of Websites Can You Make with this Guide?<br />

Following this course you can make many types of websites including business sites, blogs, photography<br />

websites, online stores, affiliate websites, membership websites and more. The possibilities are<br />

essentially limitless. Here are examples of the different websites you can build by following this step-bystep<br />

process:<br />

| Introduction 7


Introduction<br />

Overview<br />

Before we begin, let’s make a game plan!<br />

Creating a website is a 4-step process. Everything covered in this guide is step-by-step, so I won’t leave<br />

you stuck wondering about anything. First let’s overview all of the steps.<br />

Step 1: Getting a Website Name and Hosting<br />

First you’ll need to pick your website’s name.<br />

If your website was about teaching people how to make websites, your website name will be<br />

www.your-website-here.com, just like Google’s website name is www.google.com<br />

To register your website name it costs about $13 per year.<br />

The next thing we need to buy is hosting. Hosting is a computer that stores all of your website<br />

information like pages, photos, logos and text. Without hosting, if you visited your website, you wouldn’t<br />

see anything, it would just be a blank page.<br />

To buy hosting is costs about $10 per month.<br />

In total it is less than $25 to start which is an amazing deal considering web developers charge<br />

thousands of dollars and you can potentially reach millions of people with your website.<br />

Step 2: Installing <strong>WordPress</strong><br />

After we acquire our website name and hosting, the next step is installing <strong>WordPress</strong>. <strong>WordPress</strong> is the<br />

technology we will be using to create your website.<br />

<strong>WordPress</strong> is a content management system (CMS), which is just a fancy way of saying it helps you<br />

manage your web content. Instead of having to learn computer code to make your website, all you have<br />

to do is add text, just like you would in Microsoft Word.<br />

<strong>WordPress</strong> has a 56.3% market share and the majority of professional web developers (like the one you’d<br />

be hiring to build your site) now also build their clients’ websites using <strong>WordPress</strong>.<br />

Step 3: Building Your Website<br />

Next you will be building your website step-by-step. We will pick a design, add text and images, create<br />

photo galleries and more. This book is guided with screenshots, so we are going to show you how to<br />

make a specific website, but it’s easy to choose a different design and change the options as you see fit.<br />

Step 4: Getting People To Your Website<br />

There’s no point of having a website unless people actually see it! In this section we will show you how to get<br />

people to your website, show up in search results, and hopefully steer you clear of some common mistakes.<br />

| Introduction 8


Introduction<br />

What You are Going to Build<br />

You can build your website with a PC, Mac, or Linux computer. The website you are going to make will be<br />

responsive, which means the website will resize to work on any computer and also mobile devices like<br />

the iPhone, iPad, iPod, Android or any other handheld device you use to access the web.<br />

While learning about web development, you will simultaneously be building your website. You may<br />

need to tweak a few things to make the website yours, but you’ll be able to easily make changes.<br />

After acquiring your website name, hosting provider, and installing <strong>WordPress</strong>, feel free to jump around<br />

to mix and match features until you have the perfect website.<br />

Here are the different sections of a website that we will be building in this guide:<br />

Home<br />

This is what people are going to see when they<br />

first visit your website. It may not look exactly<br />

like what you want, but your website will be<br />

easy to change and customize.<br />

About Us<br />

We will also make an About Us page so that<br />

people can learn about you and your business.<br />

| Introduction 9


Introduction<br />

Services<br />

You may not need this section but we will show<br />

you a cool way to display your services.<br />

Gallery<br />

In this section we will show you how to make a<br />

photo gallery. Again, this section is optional.<br />

Contact<br />

Here we will show you how to make a contact<br />

form so people can get in touch with you, and<br />

you’ll have those messages sent straight to your<br />

email inbox.<br />

Ok, so you’re ready to go? Let’s get started by<br />

getting your domain name and hosting.<br />

| Introduction 10


CHAPTER 1<br />

Getting your<br />

Website Name<br />

and Hosting<br />

7 “Musts” When Choosing a Hosting Company<br />

Selecting Your Website Name and Hosting


Getting Your Website Name and Hosting 1<br />

Getting Your Website Name and Hosting<br />

There are thousands of companies on the web that offer domain names (www.your-website-here.com)<br />

and hosting (where you store your website information).<br />

We recommend using HostGator (hostgator.com). Not only do they satisfy the 7-Musts, but the<br />

screenshots in this guide are based on HostGator.<br />

Using HostGator is by far the easiest option for following this guide. We’ve also found HostGator’s<br />

support and service to be outstanding throughout the years.<br />

If, for whatever reason, you choose not to use HostGator, then be sure adhere to the following 7 Musts<br />

when choosing a hosting company. Also be advised that the screenshots and book lessons may be<br />

slightly different, so if you’re not going with HostGator, you’ll need to improvise on some sections.<br />

Below is a list of 7 Musts when choosing a web host:<br />

1 - They must backup your website so you never lose your website information.<br />

2 - They must have 99.9% uptime or more so your website is always online.<br />

3 - They must have a money back guarantee.<br />

4 - They must have a 1-click <strong>WordPress</strong> installation.<br />

5 - They must have great reviews online.<br />

6 - They must have free live chat 24-hours a day.<br />

7 - They must also offer phone support and email support just in case you need to speak to someone<br />

on the phone.<br />

Let’s move on and acquire your website name and secure hosting for your new website!<br />

Chapter 1 | Getting Your Website Name and Hosting 12


Getting Your Website Name and Hosting 1<br />

Selecting Your Website Name and Hosting<br />

1<br />

2<br />

3<br />

4<br />

http://www.youtube.com/watch?v=_uLi3fPXzKk<br />

Note:<br />

At the time of writing, HostGator<br />

only offers the following domain<br />

types: .com, .co, .net, .me, .org, .info<br />

and .biz.<br />

HostGator does not offer some of the more<br />

familiar domain types such as .co.uk, and<br />

other country-specific domains such as .ar,<br />

.us, .mx, .es, etc.<br />

If you can’t find the domain type you want<br />

at HostGator, skip now to Chapter 9: Buying<br />

A Domain Through GoDaddy and proceed<br />

from there.<br />

Go to www.hostgator.com.<br />

Click View Web Hosting Plans.<br />

Select a plan.<br />

We recommend the Baby Plan because<br />

it’s the least expensive while also allowing<br />

you to host as many websites as you want.<br />

Essentially, you could have 100 websites<br />

on this plan (a business website, a personal<br />

website, a website for your mom, your<br />

friends, your dog, etc.)<br />

If you know for sure that you only need one website, then go with the Hatchling Plan. You can<br />

always upgrade if you need to create another site.<br />

Select a billing cycle. We recommend paying monthly.<br />

HostGator allows different billing cycles. The longer you pay in advance, the less expensive it is. It<br />

doesn’t cost too much more to pay monthly and if HostGator one day doesn’t provide the excellent<br />

service it’s known for, you can switch to another hosting company without waiting a whole year.<br />

Chapter 1 | Getting Your Website Name and Hosting 13<br />

1<br />

2<br />

3<br />

4


Getting Your Website Name and Hosting 1<br />

Selecting Your Website Name and Hosting<br />

5<br />

6<br />

7<br />

8<br />

9<br />

Click Order Now.<br />

Type in your website name, also called<br />

a domain name, into the box. (If you<br />

came here from Chapter 9, select “I<br />

already own this domain”).<br />

Note:<br />

HostGator will let you know if your<br />

site is available or not. They’ll also<br />

suggest variations of your domain<br />

name, such as YourWebsite.net or<br />

YourWebsite.org.<br />

We recommend buying a .com unless<br />

someone has already purchased your<br />

domain name and it’s not available. If<br />

that’s the case, create a variation!<br />

Note:<br />

.com = commercial/business<br />

.net = network<br />

.org = recommended for non-profits<br />

.edu = school/university<br />

.gov = government<br />

Confirm you’ve selected the package<br />

and billing cycle that you want.<br />

<strong>Create</strong> a username and security PIN for<br />

HostGator.<br />

Enter your billing information (not the<br />

one in the screenshot!) If your country<br />

does not issue credit cards, you can pay<br />

with PayPal.<br />

Chapter 1 | Getting Your Website Name and Hosting 14<br />

7<br />

8<br />

9<br />

5<br />

6


Getting Your Website Name and Hosting 1<br />

Selecting Your Website Name and Hosting<br />

10<br />

11<br />

12<br />

13<br />

14<br />

HostGator has additional Add-ons<br />

available for purchase. You can read over<br />

them, but we generally recommend<br />

against them.<br />

Note:<br />

SiteLock is checked by default. We<br />

recommend unchecking it to save<br />

money, but you can read about it<br />

and decide what you want for your<br />

website.<br />

Next, enter a coupon code for a<br />

discount on your hosting. For 25% off,<br />

enter BookGator25 in the coupon<br />

code box.<br />

Note:<br />

Not only do you save an extra 5%,<br />

but HostGator also gives us credit,<br />

which allows us to continue making<br />

tutorials available online for free!<br />

Review all the information, note<br />

that you have: a 45-day money back<br />

guarantee, free phone support, free<br />

live chat and email support--and you’re<br />

getting 25% off instead of 20% off,<br />

right?<br />

Lastly, check the box: I have read and<br />

agree to the terms and conditions of<br />

use.<br />

Click <strong>Create</strong> Account.<br />

10<br />

Chapter 1 | Getting Your Website Name and Hosting 15<br />

12<br />

13<br />

14<br />

11


Getting Your Website Name and Hosting 1<br />

Selecting Your Website Name and Hosting<br />

The next page is a confirmation page: print or write down your confirmation number and close the page. You<br />

should get an email within 5 minutes (it’s usually sent right away) confirming your purchase.<br />

The email contains important information for setting up your site, so go to your email inbox and open the<br />

email.<br />

You’re now ready to move forward with creating your site!<br />

Chapter 1 | Getting Your Website Name and Hosting 16


CHAPTER 2<br />

Installing and Setting<br />

Up <strong>WordPress</strong><br />

Installing <strong>WordPress</strong><br />

Logging into <strong>WordPress</strong><br />

Changing Your Password<br />

Turning Off Caching


Installing & Setting Up <strong>WordPress</strong> 2<br />

Installing and Setting Up <strong>WordPress</strong><br />

In this chapter we are going to install <strong>WordPress</strong> and set it up so we can begin creating the website.<br />

By now you should have received an email from HostGator. The email you received contains important<br />

information, so print it out and keep it safe.<br />

Installing <strong>WordPress</strong><br />

1<br />

2<br />

3<br />

4<br />

5<br />

6<br />

http://www.youtube.com/watch?v=rhOcsagzBnA<br />

Login to your email inbox and find the<br />

email from HostGator.<br />

Print, copy, or write down your<br />

Username and Password.<br />

In the email, click the Your Control<br />

Panel link.<br />

Type in the Username from the email.<br />

Type in (or paste) the Password<br />

provided in the email.<br />

Click Log In.<br />

Chapter 2 | Installing & Setting Up <strong>WordPress</strong> 18<br />

2<br />

1<br />

4<br />

6<br />

3<br />

5


Installing & Setting Up <strong>WordPress</strong> 2<br />

Installing <strong>WordPress</strong><br />

7<br />

8<br />

9<br />

10<br />

11<br />

Scroll down until you see the Software/<br />

Services section.<br />

Click QuickInstall.<br />

Find the Blog Software section and click<br />

<strong>WordPress</strong>.<br />

Click Continue.<br />

Make sure that your website name is<br />

selected from the drop down list in the<br />

section called Install <strong>WordPress</strong>.<br />

Also make sure the box to the right of<br />

your website name is left blank—this is<br />

VERY important!<br />

Chapter 2 | Installing & Setting Up <strong>WordPress</strong> 19<br />

9<br />

10<br />

8<br />

7<br />

11


Installing & Setting Up <strong>WordPress</strong> 2<br />

Installing <strong>WordPress</strong><br />

12<br />

13<br />

14<br />

15<br />

Type in your details:<br />

• Leave Enable Auto Upgrades<br />

checked.<br />

• Type in your email address.<br />

• Type your Blog Title (probably your<br />

company name but don’t worry<br />

about this too much as we can<br />

change it later).<br />

• Choose an Admin User. This is the<br />

username you will use to login to<br />

<strong>WordPress</strong>. I am going to use my<br />

first name as my username, make<br />

sure to write it down.<br />

• Type in your First Name and Last Name.<br />

Click Install Now.<br />

Copy, write down or print your<br />

Username and Password. This should<br />

also be emailed to you, but in case they<br />

don’t send it, you’ll need a copy.<br />

Lastly, click the link to visit your website.<br />

Note:<br />

New websites take anywhere from 2 - 3 hours to start working so if you don’t see anything just<br />

leave the page open, take a break, and come back in a few hours and try again. Most of the time<br />

everything works out perfectly, but if you’ve been waiting more than 24 hours and you still can’t see<br />

your website, do a live chat, email, or call HostGator’s technical support.<br />

Once you’ve got your website online, it’s time to start making changes!<br />

Chapter 2 | Installing & Setting Up <strong>WordPress</strong> 20<br />

13<br />

12<br />

14<br />

15


Installing & Setting Up <strong>WordPress</strong> 2<br />

Logging Into <strong>WordPress</strong><br />

Before you login to your website, type your website address in your web browser and take a look at it.<br />

You should see a rather simple-looking sample website.<br />

Congratulations! You just made yourself a website and saved handfuls of money.<br />

But let’s not stop here… let’s make your website amazing! To do that, we need to login to the back end of<br />

the website where we can add pages, pictures, info and edit everything to make it nice. First, let’s login.<br />

1<br />

2<br />

http://www.youtube.com/watch?v=8tW6NQVxOC0<br />

To login, add /wp-admin to the end<br />

of your website address. (www.yourwebsite-here.com/wp-admin)<br />

Once you go to www.your-websitehere.com/wp-admin<br />

you will see a<br />

login page. Enter the Username and<br />

Password from the QuickInstall page<br />

(Step 14 in the last section).<br />

Note:<br />

If you’ve lost it, the Username and<br />

Password for your <strong>WordPress</strong> site<br />

should also be in an email sent to<br />

you.<br />

Chapter 2 | Installing & Setting Up <strong>WordPress</strong> 21<br />

1<br />

2


Installing & Setting Up <strong>WordPress</strong> 2<br />

Logging Into <strong>WordPress</strong><br />

3<br />

Ok… You’ve logged in! Now<br />

you’re looking at a page called the<br />

Dashboard. This is where the magic<br />

happens--it’s where you make all of the<br />

edits and changes to your website!<br />

Chapter 2 | Installing & Setting Up <strong>WordPress</strong> 22<br />

3


Installing & Setting Up <strong>WordPress</strong> 2<br />

Changing Your Password<br />

The password that you were given when you installed your website is hard to remember. Let’s change it<br />

to something more memorable.<br />

1<br />

2<br />

3<br />

4<br />

http://www.youtube.com/watch?v=LS1uVjtGzyo<br />

Click Users on the Admin Menu.<br />

Click on your Username.<br />

Enter your new password in both boxes.<br />

Write it down, memorize it, and stash it<br />

somewhere safe.<br />

Click Update Profile to save the changes.<br />

Great! When you go to www.yourwebsite-here.com/wp-admin<br />

(the<br />

Dashboard login page), use the new<br />

password, ok?<br />

Next, we need to make the website<br />

editing-friendly.<br />

Chapter 2 | Installing & Setting Up <strong>WordPress</strong> 23<br />

1<br />

3<br />

4<br />

2


Installing & Setting Up <strong>WordPress</strong> 2<br />

Turn Off Caching<br />

Caching helps your website load faster by saving a quick-loading version of your website. The bad thing<br />

about caching is that it hides your website’s recent changes.<br />

We turn off caching so that when we make edits we can see the changes immediately.<br />

As you edit, you’ll be bouncing between the actual website and the dashboard, so we want to be able to<br />

see changes on the site as we go.<br />

When we’re finished creating our website, we’ll turn caching on so that our website loads faster.<br />

1<br />

2<br />

3<br />

4<br />

5<br />

6<br />

7<br />

http://www.youtube.com/watch?v=lP8WtOGicv0#t=23m51s<br />

Click Settings<br />

Click WP Super Cache.<br />

Click the Easy tab.<br />

Click Caching Off.<br />

Click Update Status.<br />

Now all updates will be visible on<br />

your website! If you are still having<br />

problems going forward, disable caching<br />

completely by doing the following:<br />

Click Plugins.<br />

Find WP Super Cache and click<br />

Deactivate.<br />

Note:<br />

if you don’t see WP Super Cache in the<br />

Settings section don’t worry about<br />

turning off caching off!<br />

1<br />

Chapter 2 | Installing & Setting Up <strong>WordPress</strong> 24<br />

2<br />

6<br />

3<br />

7<br />

5<br />

4


CHAPTER 3<br />

Building your<br />

Website<br />

Installing Your Theme<br />

Adding Website Pages<br />

Editing Website Pages<br />

Deleting Your Comment Box<br />

Editing Your Homepage<br />

Changing Your Footer<br />

Changing Your Logo and Phone Number<br />

Deleting Pages


Building Your Website 3<br />

In this chapter you will be building your website. We will be editing your homepage, adding additional<br />

pages, adding your logo and putting your phone number and contact info onto the page. Before we do<br />

anything, however, we need to add a new theme.<br />

Installing Your Theme<br />

A theme is the design of your website. The great thing about <strong>WordPress</strong> is that there are 1000’s of free<br />

themes (designs) to choose from. This is what makes <strong>WordPress</strong> very user-friendly because we no longer<br />

have to code sites from scratch!<br />

Each theme is slightly different so if you decide to go with another theme rather than the one I am<br />

choosing just know that some sections may be different.<br />

Because this tutorial is step-by-step, we will be leading you through installing a theme that works great.<br />

Just remember that you have access to thousands of themes, and once you install your first theme, you’ll<br />

be able to install just about any other theme!<br />

Once we change the theme, we immediately see that the overall design of the website will change<br />

completely from:<br />

Ready to push forward? Let’s install the new theme!<br />

To:<br />

Chapter 3 | Building Your Website 26


Building Your Website 3<br />

Installing Your Theme<br />

1<br />

2<br />

3<br />

4<br />

5<br />

6<br />

From the Dashboard, rollover<br />

Appearance and click Themes.<br />

Next, click the Install Themes tab.<br />

Type local business in the search box.<br />

Click Search.<br />

When you see the Local Business theme,<br />

click Install Now.<br />

Click Activate.<br />

Congratulations! You just installed your<br />

new theme! To checkout your site, type<br />

your site’s address (www.your-websitehere.com)<br />

into the address bar. It should<br />

look something like this:<br />

As you can see, you still have a home<br />

page and a sample page, but the<br />

overall design of your website has<br />

completely changed.<br />

Now let’s customize everything and<br />

make it look professional.<br />

Chapter 3 | Building Your Website 27<br />

1<br />

5<br />

2<br />

3 4<br />

6


Building Your Website 3<br />

Adding Website Pages<br />

Next we will add Pages to our website. We will create an About Page, a Services Page, and a Contact Page.<br />

If you need more or less pages, they are easy to create and delete as needed.<br />

For now we’ll simply add a blank page without content, and then we’ll customize it.<br />

1<br />

2<br />

3<br />

4<br />

http://www.youtube.com/watch?v=j2LteGnXT1o<br />

First let’s add an About Page.<br />

Click Pages on the Admin Menu.<br />

Click Add New.<br />

Enter a title for your page, we have titled<br />

our page About.<br />

Click Publish.<br />

Go to your website. Notice that the<br />

about page is now on the menu, but<br />

when clicking on the page, the page is<br />

mostly blank but for the title.<br />

Next, let’s add some content.<br />

Chapter 3 | Building Your Website 28<br />

2<br />

1<br />

3<br />

4


Building Your Website 3<br />

Editing Website Pages<br />

1<br />

2<br />

http://www.youtube.com/watch?v=j2LteGnXT1o<br />

Click Pages.<br />

Click About.<br />

Adding Text<br />

3<br />

4<br />

Click inside of the text box and begin<br />

typing. You create new paragraphs by<br />

hitting enter.<br />

Using this box, you can do most of the<br />

things that you’d do in Microsoft Word<br />

or any other word processing program.<br />

For the rest of the sections, make sure<br />

the Kitchen Sink button is selected.<br />

Use your mouse to rollover each button<br />

above the text box to find Kitchen Sink.<br />

1<br />

Chapter 3 | Building Your Website 29<br />

2<br />

3<br />

4


Building Your Website 3<br />

Adding Titles<br />

To breakup the text of your website, you may need to make different sections, or create titles. In geek<br />

speak, we call titles headings.<br />

The largest heading is Heading 1 and the smallest heading is Heading 6.<br />

To add a title or heading on the page:<br />

5<br />

6<br />

Highlight the text you want to make<br />

a title.<br />

Click the drop down box that says<br />

Paragraph, select Heading 1 and<br />

update changes.<br />

Chapter 3 | Building Your Website 30<br />

6<br />

5


Building Your Website 3<br />

Adding Pictures<br />

7<br />

8<br />

9<br />

10<br />

http://www.youtube.com/watch?v=DkW-X-4BLcI<br />

Click your mouse wherever you’d like<br />

your picture to display. Here, I’ve clicked<br />

my mouse just before the Hello my<br />

name is Tyler sentence.<br />

Click the Add Media button.<br />

Click Select Files.<br />

Find the file on your computer you want<br />

to add, select it and click Open (it might<br />

say ok).<br />

Chapter 3 | Building Your Website 31<br />

7<br />

8<br />

9<br />

10


Building Your Website 3<br />

Adding Pictures<br />

11<br />

12<br />

13<br />

14<br />

Now we will change the settings for the<br />

picture you’ve just inserted.<br />

11a.) Where it says Alignment choose<br />

Left. This moves the image to<br />

the left of the text. You can also<br />

choose Right or Center.<br />

11b.) Where it says Link To, choose<br />

None. This is so when somebody<br />

clicks on the actual image it<br />

doesn’t link to another page.<br />

Note:<br />

By default, if someone clicks on the<br />

image it will go to a larger version<br />

of the image, but we don’t want<br />

that because we don’t want to lead<br />

visitors away from the page.<br />

11c.) For Size choose Medium -<br />

300 x 225.<br />

Click Insert into page.<br />

Click Update.<br />

Now click View Page to see your new<br />

page!<br />

Chapter 3 | Building Your Website 32<br />

14<br />

11<br />

12<br />

13


Building Your Website 3<br />

Adding More Options<br />

Similar to Microsoft Word, with<br />

<strong>WordPress</strong> you can add images, center<br />

text, add quotes, lists, spell check, bold<br />

and italic text, add colors, and much<br />

more.<br />

After playing with these options for a<br />

few minutes, I made this page:<br />

Adding Links<br />

15<br />

16<br />

17<br />

18<br />

You can make text clickable so that any<br />

word or phrase will link to another page.<br />

This feature is called a link. Adding a link<br />

is easy. Let’s add a link to the homepage:<br />

Highlight the text you want to link.<br />

Click the link button.<br />

On the pop-up, you’ll enter a URL to the<br />

page you want to link to. (http://www.<br />

Add-The-Website-To-Link-To-Here.com)<br />

Don’t forget to include the http:// part<br />

of the URL.<br />

Click Add Link and then click update.<br />

Now click view page and then click your<br />

link to surf back to the home page.<br />

Chapter 3 | Building Your Website 33<br />

16<br />

15<br />

17<br />

18


Building Your Website 3<br />

Deleting Your Comment Box<br />

When you create a new page in <strong>WordPress</strong>, it automatically includes a comment box. It’s good to know<br />

how to disable comments your pages.<br />

Naturally, you may not want visitors to comment on every page. Most of the sites that we build are<br />

100% comment-free (unless we make a blog… which we show you how to do later), so let’s disable the<br />

comment box now:<br />

Note:<br />

If you choose to allow comments on any of your pages, there can be a high amount of spam, so disabling<br />

comment boxes is highly recommended.<br />

1<br />

2<br />

http://www.youtube.com/watch?v=VxTlMfVkL0o<br />

First go to Pages and select the page<br />

you want to edit.<br />

On the top right of your screen click<br />

Screen Options.<br />

Next check off Discussion, which<br />

makes a new box appear below.<br />

Chapter 3 | Building Your Website 34<br />

2<br />

1


Building Your Website 3<br />

Deleting Your Comment Box<br />

3<br />

4<br />

Scroll down until you see the Discussion<br />

box and uncheck Allow comments and<br />

Allow trackbacks.<br />

Click Update.<br />

Now your page is comment-box free!<br />

Chapter 3 | Building Your Website 35<br />

3<br />

4


Building Your Website 3<br />

Editing Your Homepage<br />

Now we will edit the homepage so that it shows your content instead of the theme’s demo content. Let’s<br />

change the picture first and then move on to the footer and other elements.<br />

http://www.youtube.com/watch?v=lP8WtOGicv0#t=29m41s<br />

We’re going to be replacing the demo<br />

picture with our own, so we need our<br />

photo to fit. The easiest way to make it fit is<br />

to upload it to the Media Library and resize<br />

it using <strong>WordPress</strong>.<br />

On the computer, things are measured in<br />

pixels. The picture on your homepage is<br />

360 pixels wide by 280 pixels tall (360px by<br />

280px).<br />

Width comes before height. In order to<br />

get a picture on our homepage that is the<br />

perfect size for the space, first we need a<br />

picture. Got a good one?<br />

Let’s upload it to the homepage.<br />

Chapter 3 | Building Your Website 36


Building Your Website 3<br />

Uploading Pictures<br />

1<br />

2<br />

3<br />

4<br />

5<br />

On the left side of the admin menu,<br />

click Media.<br />

Click Add New.<br />

Click Select Files.<br />

Select the picture on your computer<br />

you want to upload.<br />

Click Open or Ok.<br />

Sweet. You just uploaded a picture<br />

from your computer to your website!<br />

Now let’s edit the picture so that it fits<br />

perfectly.<br />

Note:<br />

You only need to upload pictures<br />

in this way for your homepage. To<br />

upload a picture on any other page<br />

you would just upload it directly to<br />

the page.<br />

Chapter 3 | Building Your Website 37<br />

2<br />

1<br />

3<br />

3<br />

4<br />

5


Building Your Website 3<br />

Editing Your Picture<br />

6<br />

7<br />

8<br />

9<br />

10<br />

Click Media.<br />

Click on the picture you want to edit.<br />

Click the Edit Image button.<br />

Notice that the image dimensions are<br />

big (if you uploaded a big photo). Let’s<br />

make them smaller so that it will fit our<br />

page.<br />

Click Scale Image.<br />

Chapter 3 | Building Your Website 38<br />

6<br />

8<br />

3<br />

7<br />

9


Building Your Website 3<br />

Editing Your Picture<br />

11<br />

12<br />

13<br />

14<br />

15<br />

16<br />

Put 280 in the second box. This is for<br />

the height of the image.<br />

Click Scale.<br />

Now your image is smaller! But since<br />

the height is the only part that fits, let’s<br />

change the width by cutting off the<br />

sides of the image (cropping).<br />

On the picture, click and drag a<br />

selection with your mouse.<br />

Now adjust your selection until the<br />

width and height box says 360 : 280.<br />

Note:<br />

Sometimes the box will be 1 or 2<br />

pixels off, which is fine, just get as<br />

close to 360 : 280 as possible.<br />

Click the Crop button.<br />

Click Save.<br />

15<br />

Chapter 3 | Building Your Website 39<br />

16<br />

3<br />

11<br />

13<br />

12<br />

14


Building Your Website 3<br />

Editing Your Picture<br />

17<br />

18<br />

19<br />

Now we have saved a smaller version of<br />

your image that fits perfectly with the<br />

homepage. Next, we’ll post the updated<br />

picture on the homepage.<br />

Click Media.<br />

Click the picture you just edited.<br />

Where it says File URL, highlight it, then<br />

copy the entire file location.<br />

Now we are going to paste the image<br />

into the homepage.<br />

Chapter 3 | Building Your Website 40<br />

17<br />

3<br />

19<br />

18


Building Your Website 3<br />

Editing The Homepage<br />

20<br />

21<br />

22<br />

23<br />

24<br />

Click on Appearance.<br />

Click on Theme Options.<br />

Click on Home Page Top Settings.<br />

Paste the File URL in the box (the one<br />

that you copied in Step 19).<br />

Scroll all the way down and click Save<br />

All Changes.<br />

Note:<br />

When you go to your homepage you<br />

should now see your photo on the<br />

front of the page.<br />

Let’s change it now so that when we<br />

click the image, it will link to a page.<br />

21<br />

Chapter 3 | Building Your Website 41<br />

20<br />

22<br />

23<br />

24


Building Your Website 3<br />

Editing The Homepage<br />

25<br />

26<br />

27<br />

28<br />

29<br />

30<br />

Go to the Theme Options page. Click<br />

Top Feature Heading. In the section: Top<br />

Feature Image Link, type about (this will link<br />

the image to the about page, so that when<br />

visitors click the image it will direct them to<br />

the about page).<br />

Note:<br />

If you want the image to link to a<br />

different page, then type in that page<br />

name instead.<br />

Top Feature Heading is where your<br />

headline goes.<br />

Top Feature Description: Enter in your<br />

description text. It will appear to the<br />

right of the image.<br />

Note:<br />

Do you see the weird looking <br />

tag that I added? That tells the<br />

computer to create line spaces (or<br />

line breaks). Use them wherever you<br />

need to create space!<br />

Top Feature Button Text: What will your<br />

button say? We wrote: Learn More.<br />

Top Feature Link: What page will your<br />

button link to? We typed about to link it<br />

to the about page.<br />

Click Save All Changes.<br />

Your website should now look<br />

something like this:<br />

Chapter 3 | Building Your Website 42<br />

25<br />

28<br />

29<br />

26<br />

27<br />

30


Building Your Website 3<br />

Editing The Homepage<br />

31<br />

32<br />

33<br />

Next let’s change the lower sections of<br />

the homepage.<br />

Click Appearance.<br />

Click Theme Options.<br />

Click Homepage Feature Area.<br />

In this screenshot, we see the text area<br />

that corresponds with the location we’ll<br />

be editing on the homepage. 4<br />

Chapter 3 | Building Your Website 43<br />

32<br />

31<br />

33


Building Your Website 3<br />

Editing The Homepage<br />

34<br />

35<br />

Fill out the information, just like in the<br />

image, with the First Feature Heading as<br />

your title, your First Feature Description<br />

as the text below your title, and the First<br />

feature Link as the page you want it<br />

to link to when visitors click it. Then fill<br />

out the information for the Left Feature<br />

Heading and Left Feature Description.<br />

Click Save All Changes.<br />

Chapter 3 | Building Your Website 44<br />

34<br />

35


Building Your Website 3<br />

Editing The Homepage<br />

36<br />

37<br />

38<br />

39<br />

40<br />

41<br />

42<br />

43<br />

Next we are going to add a Youtube<br />

video for the Right Feature Section.<br />

Go to Youtube.com.<br />

Search for a video.<br />

Click on the video you like.<br />

Beneath the video, click share, then click<br />

Embed.<br />

Under Video size: choose Custom size<br />

and put 300 in the first box. The second<br />

box will change automatically.<br />

Highlight the code and copy it.<br />

Paste it into the Right Feature Section.<br />

Click Save All Changes.<br />

Chapter 3 | Building Your Website 45<br />

39<br />

42<br />

37<br />

40<br />

41<br />

43<br />

36<br />

38


Building Your Website 3<br />

Editing The Homepage<br />

Now your home page should look like<br />

this:<br />

Chapter 3 | Building Your Website 46


Building Your Website 3<br />

Changing Your Footer<br />

The footer of a website is at the very bottom (just like your feet). Most website footers include a message<br />

to your visitors, contact information, and a map. In this section we’ll create all three.<br />

Note: The footer shows up on every single page of your website.<br />

1<br />

2<br />

http://www.youtube.com/watch?v=lP8WtOGicv0#t=54m20s<br />

Ready to change your footer? Me too-lets<br />

do it!<br />

Click Appearance.<br />

Click Widgets.<br />

Chapter 3 | Building Your Website 47<br />

2<br />

1


Building Your Website 3<br />

Changing Your Footer<br />

3<br />

4<br />

5<br />

6<br />

7<br />

8<br />

9<br />

On the right side where it says First<br />

Footer Widget Area click the downarrow<br />

to the right.<br />

Next drag a text widget from the leftside<br />

Available Widgets box into the First<br />

Footer Widget Area.<br />

Note:<br />

You drag by clicking and holding<br />

the mouse down then moving your<br />

mouse and releasing to the desired<br />

location.<br />

Next a text box should open up. Enter<br />

a title here and write something in the<br />

area below.<br />

Note:<br />

If you don’t see the text box, click the<br />

small arrow on the widget to expand<br />

the box.<br />

Check the box marked Automatically<br />

add paragraphs so that <strong>WordPress</strong> will<br />

create paragraphs rather than bunching<br />

the text together.<br />

Click Save.<br />

Click Close.<br />

Repeat Steps 1 - 8 for the Second Footer<br />

Widget Area. In this part we entered<br />

our contact information.<br />

Note:<br />

Be sure to include Step 6 so your text<br />

is spaced correctly!<br />

Chapter 3 | Building Your Website 48<br />

4<br />

5<br />

6<br />

3<br />

7


Building Your Website 3<br />

Changing Your Footer<br />

10<br />

11<br />

12<br />

13<br />

14<br />

15<br />

16<br />

17<br />

Next let’s add a google map to our Third<br />

Footer Widget Area.<br />

Repeat Steps 1 - 4 for the Third Footer<br />

Widget Area, and then enter Location<br />

as a title.<br />

In your web browser, open a new page<br />

and go to: maps.google.com.<br />

Enter your location in the search bar and<br />

click search.<br />

Click the button that looks like a link<br />

(just like the one Wordpress uses).<br />

Click the Customize and preview<br />

embedded map link.<br />

Click the Custom button.<br />

Where it says Width enter 280, where it<br />

says Height enter 140.<br />

Note:<br />

You can also drag the map to center it<br />

or zoom in by clicking the + and – bar.<br />

Highlight the entire code and copy it.<br />

Chapter 3 | Building Your Website 49<br />

12<br />

15<br />

10<br />

11<br />

13<br />

16<br />

17<br />

14


Building Your Website 3<br />

Changing Your Footer<br />

18<br />

19<br />

20<br />

21<br />

Go back to your website Wordpress<br />

Widgets Area and paste the code into<br />

Third Footer Widget Area.<br />

Delete everything after the<br />

tag in the code.<br />

Note:<br />

This is like finding a needle in a<br />

haystack. The /iframe is midway down,<br />

you’ll need to really look for it… it<br />

is NOT the tag, it’s the tag!<br />

Click Save.<br />

Click Close.<br />

Now check out your website. It should<br />

have the footer widget areas complete<br />

and the map should be displaying on<br />

your site.<br />

Chapter 3 | Building Your Website 50<br />

18<br />

19<br />

21<br />

20


Building Your Website 3<br />

Changing Your Logo and Phone Number<br />

Next we are going to change the Logo and Phone number on the website. If you have not yet created<br />

a logo, don’t worry. We’ll be covering that in Chapter 6 where I’ll walk you through creating a logo from<br />

scratch.<br />

Let’s enter a logo now.<br />

1<br />

2<br />

3<br />

4<br />

5<br />

6<br />

http://www.youtube.com/watch?v=lP8WtOGicv0#t=51m37s<br />

Click Appearance.<br />

Click Theme Options.<br />

Click General Settings.<br />

Click Upload Image.<br />

Select the logo you want to upload.<br />

Click Open.<br />

Chapter 3 | Building Your Website 51<br />

2<br />

1<br />

3<br />

5<br />

4<br />

6


Building Your Website 3<br />

Changing Your Logo and Phone Number<br />

7<br />

8<br />

9<br />

Under Top Right Contact Details type:<br />

Call Me: (310) 743-3190 (hopefully you’ll<br />

use your phone number, not mine).<br />

Under Contact No. type your phone<br />

number, this is so that when people<br />

are using a mobile phone to view your<br />

webpage, it will call automatically from<br />

their phone.<br />

Scroll all the way down and click Save All<br />

Changes.<br />

Your website should now look like this:<br />

Pretty sweet huh?<br />

Chapter 3 | Building Your Website 52<br />

7<br />

8<br />

9


Building Your Website 3<br />

Deleting Pages<br />

You may have noticed the Sample Page on<br />

your website, just hanging out there on the<br />

menu.<br />

Let’s delete the Sample Page.<br />

Note: Follow these steps for any page you<br />

want to delete.<br />

1<br />

2<br />

http://www.youtube.com/<br />

watch?v=lP8WtOGicv0#t=1h02m25s<br />

Click Pages.<br />

Hover the mouse over the page you<br />

want to delete and then click Trash.<br />

Note:<br />

If you accidentally delete something<br />

you can go to the trash and restore it.<br />

Your website should now look like this:<br />

Notice the Sample Page is deleted from<br />

the menu.<br />

Chapter 3 | Building Your Website 53<br />

1<br />

2


CHAPTER 4<br />

The Sidebar<br />

Removing Sidebar Widgets<br />

Adding Content To Your Sidebar<br />

Adding Facebook To Your Sidebar<br />

Deleting Your Sidebar


The Sidebar 4<br />

The sidebar is on the side of your website. First, let’s create a new page and checkout the sidebar.<br />

Remember how to make a new page? (Go to Pages then Add New). Let’s title this page Contact and put<br />

some information on the page.<br />

Once that’s done, we’ll go ahead and edit the sidebar. The sidebar is highlighted here:<br />

Note:<br />

Make sure to Delete The Comment<br />

Box (Chapter 3) so that people can’t<br />

comment on your new page! (Unless<br />

you want to allow comments.)<br />

Chapter 4 | The Sidebar 55


The Sidebar 4<br />

Remove Sidebar Widgets<br />

Let’s clean up the sidebar and remove some of the widgets so that it doesn’t look so cluttered.<br />

1<br />

2<br />

3<br />

http://www.youtube.com/watch?v=C6zbFJTXtnE<br />

Click Appearance.<br />

Click Widgets.<br />

Note:<br />

You can drag widgets above and<br />

below each other to change the order<br />

on the page!<br />

Next we are going to remove all of the<br />

widgets except for the Search widget.<br />

Drag (holding the click) the Recent<br />

Posts from the right side to the center<br />

and drop it (releasing the mouse click),<br />

removing the widget from the sidebar.<br />

Chapter 4 | The Sidebar 56<br />

2<br />

1<br />

3


The Sidebar 4<br />

Remove Sidebar Widgets<br />

4<br />

Repeat Step 3 and remove the widgets<br />

that you don’t want. If you’ve removed<br />

the widgets like we did here, your<br />

sidebar should look like this: (only the<br />

Search widget is in place).<br />

Now go back to your page. (It should<br />

look like this page, everything gone but<br />

the Search widget that we left in place!)<br />

Chapter 4 | The Sidebar 57<br />

4


The Sidebar 4<br />

Adding Content To Your Sidebar<br />

Next we are going to add some text to our sidebar, later in Chapter 5 I will show you how to add pictures<br />

and more. But for now lets just add some text so we can see the process.<br />

1<br />

2<br />

3<br />

http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h12m19s<br />

Click Appearance.<br />

Click Widgets.<br />

Drag a Text widget from the left side to<br />

the Primary Widget Area.<br />

Chapter 4 | The Sidebar 58<br />

2<br />

1<br />

3


The Sidebar 4<br />

Remove Sidebar Widgets<br />

4<br />

5<br />

6<br />

Enter a title and some text in the box<br />

below.<br />

Click Save.<br />

Click Close.<br />

Now your website should look like this:<br />

Pretty cool right? Just wait till next<br />

section… we’re going to make the<br />

sidebar amazing!<br />

Chapter 4 | The Sidebar 59<br />

6<br />

4<br />

5


The Sidebar 4<br />

Adding Facebook To Your Sidebar<br />

In order to add a Facebook like box to your sidebar you need a facebook business page -- not just a<br />

regular page.<br />

Got a Facebook business page? Ok! Let’s get started!<br />

1<br />

2<br />

3<br />

4<br />

5<br />

6<br />

http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h15m46s<br />

In your browser, open a new window<br />

and go to www.google.com.<br />

Search for Facebook Like Box and click<br />

Search.<br />

Click on the first result.<br />

Where it says Facebook Page URL enter<br />

in your Facebook business page url.<br />

Uncheck Show stream, unless you want<br />

to show your stream (the latest posts<br />

from your wall)<br />

Click Get Code.<br />

1<br />

2<br />

3<br />

Chapter 4 | The Sidebar 60<br />

4<br />

5<br />

6


The Sidebar 4<br />

Adding Facebook To Your Sidebar<br />

7<br />

8<br />

9<br />

10<br />

11<br />

12<br />

13<br />

Click Iframe.<br />

Select all of the code and copy it.<br />

Click Okay.<br />

First repeat steps 1-3 of Adding Content<br />

To Your Sidebar, then go back to your<br />

widgets area and paste in the Facebook<br />

code.<br />

In the code, anywhere it says width<br />

change it to 280 and anywhere it says<br />

height, change it to 500. This will make it<br />

so that it fits perfectly on the page.<br />

Click Save.<br />

Click Close.<br />

Now your website should have a<br />

Facebook like box on it and should look<br />

something like this:<br />

Congratulations! You’re on your way to<br />

having a nice, professional website.<br />

Guess what? You’re also learning new<br />

skills AND you’re saving thousands<br />

of dollars. Don’t you feel good about<br />

that? Celebrate with a cup of coffee (or<br />

whatever you like) and get ready for<br />

more… Next, we’ll be learning about<br />

Plugins—and you’ll soon be making<br />

your site blast off!<br />

Chapter 4 | The Sidebar 61<br />

10<br />

11<br />

7<br />

13<br />

8<br />

12<br />

9


The Sidebar 4<br />

Deleting Your Sidebar<br />

<strong>WordPress</strong>, out of the box, includes a sidebar on the right side of your pages. The sidebar is highlighted<br />

here:<br />

When we disable the sidebar, it will only disappear for the actual page we are editing. Repeat these steps<br />

for each page that you don’t want to see a sidebar.<br />

1<br />

2<br />

http://www.youtube.com/watch?v=C6zbFJTXtnE<br />

To disable the sidebar, first go to Pages and select the page you want to edit.<br />

Under Templates select Full Width Page<br />

in the drop down box.<br />

Press Update.<br />

Go to your website and take a look at<br />

your page. It should now be a full width<br />

page without the sidebar!<br />

Note:<br />

You may need to edit the page again<br />

to make it look good. Without the<br />

sidebar, there’s more space and your<br />

page might look different.<br />

Chapter 4 | The Sidebar 62<br />

2<br />

1


CHAPTER 5<br />

Plugins<br />

Adding Content Visually To Your Sidebar<br />

Working With Social Media Icons<br />

Adding Your Twitter Feed<br />

Adding a Contact Form<br />

Adding a Price Table<br />

Adding a Photo Gallery<br />

Maintenance Mode


Plugins 5<br />

Plugins<br />

Plugins are features that you can add to your website that are not included in the initial <strong>WordPress</strong><br />

installation. <strong>WordPress</strong> is an open source platform, meaning people (developers) can freely add to<br />

<strong>WordPress</strong>, helping create things for it and making it better.<br />

You can install plugins for everything from contact forms, to slideshow galleries, to spellchecking, to<br />

pop-up ads.<br />

First, we will add a plugin that easily allows for adding pictures and links to the sidebar without any<br />

coding knowledge, then we’ll be installing social media plugins, a contact form, and checking out other<br />

amazing features available for our website. All for free!<br />

Adding Content Visually to Your Sidebar<br />

1<br />

This plugin allows for editing the<br />

sidebar to add pictures, text, headlines,<br />

links and more.<br />

From the Dashboard, use the mouse<br />

to rollover the Plugins section of the<br />

Admin Menu and then click Add New.<br />

In the search box, type Black Studio<br />

2<br />

TinyMCE and click Search Plugins.<br />

2<br />

Chapter 5 | Plugins 64<br />

1


Plugins 5<br />

Adding Content Visually to Your Sidebar<br />

3<br />

4<br />

5<br />

We now see a list of plugins. Find Black<br />

Studio TinyMCE (it should be the first<br />

one) and click on Install Now (click Ok<br />

on the pop-up).<br />

<strong>WordPress</strong> will now install the plugin<br />

on your server. Once it’s finished, click<br />

Activate Plugin.<br />

You should now see a plugin activated<br />

message.<br />

Scroll to the Admin Menu, rollover<br />

Appearances and then click Widgets.<br />

Chapter 5 | Plugins 65<br />

4<br />

5<br />

3


Plugins 5<br />

Adding Content Visually to Your Sidebar<br />

6<br />

7<br />

8<br />

On the widgets page, beneath Available<br />

Widgets, find the widget called<br />

Primary Widget Area. Drop it just<br />

above theBlack Studio TinyMCE. Click<br />

on it and hold the mouse click while<br />

dragging it into the Text: Hello widget.<br />

The widget options will then expand on<br />

your screen. Here you can create a title<br />

(mine says: Greetings!) and then click<br />

Add Media.<br />

Now click Select Files and choose a<br />

good photo from your computer to add.<br />

Chapter 5 | Plugins 66<br />

7<br />

6<br />

8


Plugins 5<br />

Adding Content Visually to Your Sidebar<br />

9<br />

10<br />

11<br />

Click Insert into post.<br />

Alright, now that the photo is in the<br />

post, click Save. (You’ll see a little wheel<br />

spin around and that’s it, it’s done!)<br />

Next, let’s see how it looks. Rollover your<br />

website’s name in the upper left hand<br />

corner and click Visit Site.<br />

Chapter 5 | Plugins 67<br />

11<br />

10<br />

9


Plugins 5<br />

Adding Content Visually to Your Sidebar<br />

12<br />

13<br />

Now click on the page titled Contact.<br />

Now we have added a visual element<br />

to our sidebar! Feel free to experiment<br />

with different photos, or combinations<br />

of photos and text to find the right fit<br />

for your page.<br />

Next, you’ll be integrating your social<br />

media accounts with your website!<br />

Chapter 5 | Plugins 68<br />

12<br />

13


Plugins 5<br />

Adding Social Media Icons<br />

1<br />

2<br />

3<br />

4<br />

5<br />

http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h15m46s<br />

Go to the Plugins section of the Admin<br />

Menu and click Add New.<br />

Type “Social” into the search bar and<br />

click Search Plugins.<br />

You should see a long list of available<br />

plugins.<br />

There are many social media plugins<br />

available on <strong>WordPress</strong>. Some are<br />

good and some don’t even work. The<br />

best way to find a great plugin is to<br />

rollover the stars. This rollover provides<br />

vital info—the number of reviews.<br />

Note:<br />

A plugin may have 5 stars, but only 3<br />

reviews--which could be that the guy<br />

developing it gave himself a 5-star<br />

review, then had his Mom and Dad<br />

throw him a couple 5-star reviews.<br />

You can’t expect a plugin to work well<br />

if it has less then 5 reviews.<br />

Note:<br />

Look for 3.5-star to 5-star plugins with<br />

at least 30 reviews. If thousands of<br />

people are using the plugin, you can<br />

rest assured it will function correctly!<br />

A solid social media plugin that we like<br />

is the Acurax Social Media plugin. On<br />

the list, locate the Acurax Social Media<br />

plugin.<br />

Beneath the plugin title, Click on Install<br />

Now.<br />

4<br />

Chapter 5 | Plugins 69<br />

1<br />

3<br />

5<br />

2


Plugins 5<br />

Adding Social Media Icons<br />

6<br />

7<br />

8<br />

9<br />

10<br />

<strong>WordPress</strong> will now install the plugin for<br />

you and tell you the plugin has been<br />

successfully installed.<br />

Click Activate Plugin.<br />

Ok! Look closely at your Admin Menu.<br />

You now have a new button named Acx<br />

Social Media Widget Settings. It’s usually<br />

located beneath the Settings tab.<br />

Found it? Click on it.<br />

We’re now looking at the settings<br />

page for our newly installed plugin.<br />

First, choose a Theme from the list<br />

(whichever style you like best—here I’ve<br />

chosen Theme 14) and set the Social<br />

Icon Size (the larger the size, the larger<br />

the icon).<br />

Next, Enter your Twitter Username,<br />

Facebook Page, Google Plus URL,<br />

Youtube and any other social media you<br />

have for yourself/business. If you don’t<br />

have one of the services, just leave that<br />

space blank.<br />

Note:<br />

Anything that asks for a URL, i.e.<br />

Youtube URL means that you’ll need<br />

to enter http://youtube.com/YOUR-<br />

NAME-HERE. Don’t forget the http://<br />

or it won’t work!<br />

Chapter 5 | Plugins 70<br />

8<br />

7<br />

6<br />

10<br />

9


Plugins 5<br />

Adding Social Media Icons<br />

11<br />

12<br />

13<br />

14<br />

After you’ve entered all of your social<br />

media pages, Click Update Acurax Social<br />

Icon<br />

<strong>WordPress</strong> let’s you know it’s saved your<br />

settings in a box at the top of the page,<br />

just below the banner advertisements.<br />

See it?<br />

Scroll back over to your Admin Menu<br />

and click Appearance – Widgets.<br />

Find the Acurax Social Media Widget<br />

in the left side box and drag into the<br />

Primary Widget Area. (Or any area you<br />

want to display your social media links).<br />

Chapter 5 | Plugins 71<br />

13<br />

11<br />

12<br />

14


Plugins 5<br />

Adding Social Media Icons<br />

15<br />

16<br />

17<br />

18<br />

Click on Icon Align and click Center, or<br />

leave it set to default if you want.<br />

Click Save (This time <strong>WordPress</strong> doesn’t<br />

tell you it has saved, you’ll just see a little<br />

wheel spin).<br />

On the widgets screen, find your<br />

website’s name in the top left corner,<br />

rollover it and then click Visit Site to go<br />

to the home page.<br />

We’re now looking at the site.<br />

Note:<br />

Icons will only show up on pages that<br />

are designated to display the sidebar/<br />

widgets feature!<br />

Chapter 5 | Plugins 72<br />

17<br />

18<br />

15<br />

16


Plugins 5<br />

Adding Social Media Icons<br />

19<br />

20<br />

Review your icons. Do you like the way<br />

it looks? If not, go back to Step 9 and<br />

change the icon theme or go back to<br />

Step 15 and change the icon size.<br />

Ok everything looks good, right? You’re<br />

cosmetically satisfied with your icons<br />

and your coffee is refilled. Now it’s time<br />

to make sure your links work!<br />

Click on each icon. They should magically<br />

transport you to the social media pages<br />

that you entered in Step 10.<br />

Note:<br />

If you find an error on any of these<br />

icons, go back to Step 10 and double<br />

check the spelling on the URLs. If<br />

just one letter is wrong it won’t link<br />

correctly to the page!<br />

Congratulations! Your social media<br />

plugin is now linking your social media<br />

sites to your website and you’re ready to<br />

move onward!<br />

Chapter 5 | Plugins 73<br />

19<br />

20


Plugins 5<br />

Adding Your Twitter Feed<br />

Note: This plugin was recently upgraded by the developer! Our old tutorial was out of date. This tutorial<br />

is current as of 7/1/2013.<br />

This step-by-step is assuming you have a twitter account. If you need one, go to twitter.com and signup.<br />

1<br />

2<br />

3<br />

http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h19m28s<br />

Rollover the Plugins section of the<br />

Admin panel.<br />

Click Add New.<br />

Type mini twitter into the search bar<br />

and click Search Plugins.<br />

Chapter 5 | Plugins 74<br />

1<br />

2<br />

3


Plugins 5<br />

Adding Your Twitter Feed<br />

4<br />

5<br />

6<br />

Find the Mini Twitter Feed plugin on the<br />

list and click Install Now.<br />

After the plugin is successfully installed,<br />

click Activate Plugin.<br />

Now click Appearances – Widgets.<br />

Chapter 5 | Plugins 75<br />

5<br />

6<br />

4


Plugins 5<br />

Adding Your Twitter Feed<br />

7<br />

8<br />

9<br />

Look in the Available Widgets box and<br />

find the miniTwitter widget. Found it?<br />

Click the arrow to open the Primary<br />

Widget Area. Drag the miniTwitter<br />

widget into the Primary Widget Area.<br />

Click the create-a-new-widget link to<br />

setup your Twitter Widget ID.<br />

Sign in to Twitter.<br />

9<br />

Chapter 5 | Plugins 76<br />

7<br />

8


Plugins 5<br />

Adding Your Twitter Feed<br />

10<br />

11<br />

12<br />

13<br />

14<br />

Click <strong>Create</strong> Widget.<br />

Find a piece of paper and a pen. Scroll<br />

through the code and look for: “datawidget-id”...<br />

write down the string of<br />

numbers after “data-widget-id=”<br />

That abnormally long string of numbers<br />

is your Twitter Widget ID. After you<br />

have it written down, go back to your<br />

<strong>WordPress</strong> Widgets page.<br />

Enter your Twitter Widget ID number<br />

from the piece of paper.<br />

Enter your Twitter username.<br />

Chapter 5 | Plugins 77<br />

10<br />

13<br />

11<br />

14


Plugins 5<br />

Adding Your Twitter Feed<br />

15<br />

16<br />

17<br />

18<br />

Limit is how many tweets you want to<br />

show, 5 works.<br />

Leave Query blank.<br />

Leave Height and Width blank.<br />

Click Save.<br />

Click Visit Site to confirm it’s working.<br />

Remember: it will only display on pages<br />

designated to show the sidebar... i.e., the<br />

Contact Page!<br />

Note:<br />

If it doesn’t work right away, double<br />

check to make absolutely sure you<br />

wrote down and entered the correct<br />

Twitter Widget ID. It’s a long number!<br />

Chapter 5 | Plugins 78<br />

15<br />

16<br />

17<br />

18


Plugins 5<br />

Adding a Contact Form<br />

Contact forms are great for business queries and lead generation. They also act as a shield from<br />

spammers looking to scour webpages for email addresses. It’s a way of allowing people to email you<br />

without you having to put your actual email address on your website.<br />

Basically a contact form allows visitors to fill out their email address, phone number, subject line or<br />

whatever else you desire. You can customize the form for your own needs.<br />

For example, let’s say you have a law firm. When new clients typically come into the office, you hand<br />

them an intake form with a series of questions that allow you to gage whether or not to take their case.<br />

With this plugin, you can essentially recreate that intake form and have visitors on your website fill out<br />

the form. The form is then sent directly to your email inbox.<br />

For now, we’ll keep it simple by installing a basic contact form that we can launch on our site right away.<br />

1<br />

2<br />

http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h21m41s<br />

Go to the Dashboard, click Plugins<br />

and click Add New.<br />

Type Contact Form 7 into the box and<br />

click Search Plugins.<br />

Chapter 5 | Plugins 79<br />

1<br />

2


Plugins 5<br />

Adding a Contact Form<br />

3<br />

4<br />

5<br />

6<br />

Find the Plugin titled Contact Form 7. (It<br />

should be the first one on the list).<br />

Click Install Now.<br />

Click Activate Plugin.<br />

We now have a new feature in our<br />

Admin Menu named Contact (It’s<br />

usually found between the Comments<br />

button and the Appearances button in<br />

the left-hand Menu).<br />

Click the Contact button.<br />

3<br />

Chapter 5 | Plugins 80<br />

4<br />

6<br />

5


Plugins 5<br />

Adding a Contact Form<br />

7<br />

8<br />

9<br />

10<br />

Ok, now we’re looking at the Contact<br />

Settings Page. This is where we can<br />

create different types of contact forms.<br />

We can essentially create as many as<br />

we want, but for now, we’ll just edit the<br />

sample form that was included with the<br />

plugin: Contact form 1 – Click on it.<br />

Scroll down to the box titled Mail on the<br />

page. Make sure your email address is<br />

correct in the To: section.<br />

Scroll back to the top of the page and<br />

highlight the code with your mouse.<br />

Right click your mouse and select Copy.<br />

(You can also use keyboard shortcut<br />

CTRL+C on Windows or Command+C<br />

on a Mac to copy the code)<br />

Click the Save button.<br />

Chapter 5 | Plugins 81<br />

7<br />

9<br />

8<br />

10


Plugins 5<br />

Adding a Contact Form<br />

11<br />

12<br />

13<br />

14<br />

Next, go over to the Admin Menu and<br />

Click on Pages.<br />

Now click on Contact.<br />

Note:<br />

If you haven’t created a Contact page,<br />

go ahead and create one now by<br />

clicking Add New.<br />

In the text area, right-click on the<br />

mouse and select Paste (You can<br />

also use keyboard shortcut CTRL+V or<br />

Command+V on a Mac).<br />

You should now see the code in the<br />

box. It’s the same code you copied from<br />

the Contact form 1 page in Step 11.<br />

13 14<br />

Chapter 5 | Plugins 82<br />

11<br />

12


Plugins 5<br />

Adding a Contact Form<br />

15<br />

Click Update. After the page updates,<br />

click on View page. The updated page<br />

will then load with your new contact<br />

form.<br />

15<br />

16<br />

First make sure the form is there. If it’s<br />

not, check to make sure the code was<br />

copied correctly. If it’s there, we need to<br />

test it and make sure it’s working.<br />

a) Fill out each area and click Send.<br />

b) Check your email (the one you<br />

entered in Step 8).<br />

Note:<br />

It is very common for Email services like Gmail, Yahoo and Hotmail to direct Contact Form messages directly<br />

to your Spam folder.<br />

If you can’t find the message in your inbox right away, click on Spam and see if it’s there. Is it in your Spam/<br />

Junk folder? If so, open it and click “This is Not Spam” (Gmail) or find a way to direct these messages to your<br />

inbox. I usually mark them as important too.<br />

If it did go to your spam folder, repeat Step 19-20 until you’re certain the form is sending directly to your<br />

inbox. The last thing you want is to miss an important message from your website!<br />

Chapter 5 | Plugins 83<br />

16


Plugins 5<br />

Adding a Price Table<br />

Price Tables are neat features that allow visitors to compare different services at different prices. They<br />

are helpful for promoting higher-end options and offering a side-by-side comparison of the different<br />

services a business might offer. Follow these steps for installing a professional-looking price table.<br />

1<br />

2<br />

http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h26m05s<br />

From the Dashboard, rollover Plugins<br />

and click Add New<br />

Type Price Table into the search box and<br />

then click Search Plugins<br />

Chapter 5 | Plugins 84<br />

1<br />

2


Plugins 5<br />

Adding a Price Table<br />

3<br />

4<br />

5<br />

6<br />

From the list, you can browse the<br />

different tables, but for now, let’s use the<br />

one titled Price Table.<br />

Click Install now.<br />

After the plugin is successfully installed,<br />

click Activate Plugin.<br />

This will now bring us to the setup page<br />

for the plugin. Let’s build our price table<br />

by clicking on Add New in the Price<br />

Tables Tab of the Admin Menu.<br />

Chapter 5 | Plugins 85<br />

4<br />

6<br />

3<br />

5


Plugins 5<br />

Adding a Price Table<br />

7<br />

8<br />

9<br />

10<br />

11<br />

12<br />

Note:<br />

First enter a Title for the table. For this<br />

example, We’re using Lessons but you’ll<br />

enter whatever it is you’re offering the<br />

world.<br />

Skip the text box where you’d usually<br />

enter text and click Add Column.<br />

For this example, let’s assume you’re<br />

teaching Typing. Click on Title and enter<br />

your first level of service, i.e. Typing<br />

Lessons.<br />

Enter a Price, i.e. $90/hr.<br />

Enter a Detail, i.e. Learn to Type Fast.<br />

Enter the URL for your contact page.<br />

A URL must contain the http:// prefix or it<br />

won’t work! I.e. http://learnhowtocreateawebsite.com/contact/<br />

9<br />

11<br />

Chapter 5 | Plugins 86<br />

8<br />

10<br />

12<br />

7


Plugins 5<br />

Adding a Price Table<br />

13<br />

14<br />

Next, enter a call-to-action in the space<br />

called Button Text i.e, Contact Me.<br />

Click on Features and add more info, as<br />

needed. You can create more Features<br />

below the first one by clicking Add. I’ve<br />

added one in this example.<br />

Note:<br />

Sometimes when you click Add, it will<br />

scroll to the top of the page. Don’t<br />

worry—your work is still there—just<br />

scroll back down to find it.<br />

Chapter 5 | Plugins 87<br />

13<br />

14


Plugins 5<br />

Adding a Price Table<br />

15<br />

16<br />

17<br />

18<br />

19<br />

Click on Add Column and repeat Steps<br />

9-15 for each service and price point<br />

you’re offering.<br />

Note:<br />

In this screenshot I’ve written three<br />

columns, each with different levels<br />

of service. We simply repeated Steps<br />

9-15 and now I’m good to go.<br />

Once you’ve filled out your columns,<br />

click on Recommend to select your<br />

favorite service. This is typically the best<br />

price for the visitor and the one that<br />

best benefits everyone involved.<br />

Scroll to the top of the page and click<br />

Publish.<br />

Next, use the mouse to highlight the<br />

shortcode. You’ll find it in a box under<br />

the publish button on the right side of<br />

the page.<br />

Highlight the code and right-click.<br />

Select Copy and copy the shortcode.<br />

Chapter 5 | Plugins 88<br />

15<br />

16<br />

18 19<br />

17


Plugins 5<br />

Adding a Price Table<br />

20<br />

21<br />

22<br />

23<br />

24<br />

Click on Pages in the Admin Menu.<br />

Select the Page you’d like to put your<br />

Price Table on. In this case, our page is<br />

called Services.<br />

Note:<br />

At this point you may want to create<br />

a new page for your price table. (See<br />

Chapter 2, Section 2: Adding Website<br />

Pages for help creating a new page).<br />

Ok, so you’ve clicked on the page where<br />

you’ll be displaying your price table. (In<br />

my case, it’s called Services. First, let’s<br />

give our box some space. In the text<br />

box, hit Enter once, then use the mouse<br />

to right-click and select Paste, to paste<br />

the shortcode into the box.<br />

Now click Update.<br />

After it updates, click View page.<br />

Chapter 5 | Plugins 89<br />

20<br />

22<br />

24<br />

21<br />

23


Plugins 5<br />

Adding a Price Table<br />

25<br />

26<br />

If you’ve done everything correctly, you<br />

should see a price table on your page!<br />

Click on each of the buttons to make<br />

sure they link to the correct page. In this<br />

case, each of the Contact Me buttons<br />

link to the Contact page of my website.<br />

Notes:<br />

You may need to go back and change<br />

the wording of your features in each<br />

column to get the buttons to line<br />

up. The length of the phrases on the<br />

Features area will alter the length<br />

of the columns. If you want the<br />

columns to line up, be sure to keep<br />

the character count of the features<br />

similar in each column.<br />

Chapter 5 | Plugins 90<br />

26<br />

25


Plugins 5<br />

Adding a Photo Gallery<br />

Having a nice photo gallery is a wonderful asset for any website. Pictures do indeed tell a thousand<br />

words. Let’s add a nice looking gallery to make our site look super sweet.<br />

1<br />

2<br />

3<br />

4<br />

http://www.youtube.com/watch?v=tUeQ-QUvRE4<br />

From the dashboard, click Plugins and<br />

Add New.<br />

In the box, type NextGen and click<br />

Search Plugins.<br />

Find the NextGen Gallery Plugin on the<br />

list.<br />

Click Install Now.<br />

Chapter 5 | Plugins 91<br />

1<br />

4<br />

3<br />

2


Plugins 5<br />

Adding a Photo Gallery<br />

5<br />

6<br />

7<br />

8<br />

After it has installed, click Activate<br />

Plugin<br />

You will now find a new feature on the<br />

Dashboard called Gallery.<br />

Click on Gallery and then Add Gallery<br />

/ Images<br />

<strong>Create</strong> a name for your Gallery and press<br />

Add Gallery.<br />

5<br />

Chapter 5 | Plugins 92<br />

7<br />

6<br />

8


Plugins 5<br />

Adding a Photo Gallery<br />

9<br />

10<br />

11<br />

12<br />

13<br />

On the next screen, click Select Files and<br />

choose the photos you want to upload<br />

from your computer.<br />

Note:<br />

by holding CTRL you can select<br />

multiple photos. Or you can Right-<br />

Click and Select All to highlight all of<br />

the photos for upload.<br />

Click on Choose Gallery and select the<br />

Gallery you created in Step 8.<br />

Click Upload Images. It may take a while<br />

to upload, depending on how many<br />

photos you’re uploading.<br />

Select the Page or Post where you’d like<br />

to publish your gallery.<br />

In this case, I’ll create a Page by clicking<br />

Pages and Add New. I’m naming my page<br />

Gallery. (See Chapter 2, Section 2:<br />

Adding Website Pages for help)<br />

In the Visual Editor of your page, click<br />

the NextGen Gallery box in the toolbar.<br />

The icon is just below the tab marked<br />

Visual.<br />

Chapter 5 | Plugins 93<br />

12<br />

11<br />

10<br />

13<br />

9


Plugins 5<br />

Adding a Photo Gallery<br />

14<br />

15<br />

16<br />

In the pop-up box, select the gallery<br />

you created in Step 8 and click Insert.<br />

A shortcode will now be automatically<br />

inserted into the text box. Now click<br />

Update (or Publish, if it’s a new page).<br />

After the page has been published, click on<br />

View Page to make sure the Gallery works.<br />

Congratulations! You now have a<br />

professional-looking gallery on your<br />

site… do you like the way it looks? If so,<br />

you can move on. If not, let’s change<br />

some options to alter the look of the<br />

gallery and make it look better.<br />

Chapter 5 | Plugins 94<br />

16<br />

14<br />

15


Plugins 5<br />

Adding a Photo Gallery<br />

17<br />

18<br />

19<br />

20<br />

First let’s make the thumbnails larger:<br />

Hit Back in your browser. In the Admin<br />

Menu, rollover Gallery and click<br />

Manage Gallery.<br />

Click on the gallery you created in Step 8.<br />

Find the checkbox above the ID marking<br />

and click it to select all photos in your<br />

gallery.<br />

Click on Bulk actions, select <strong>Create</strong> new<br />

thumbnails and press Apply.<br />

20<br />

Chapter 5 | Plugins 95<br />

19<br />

17<br />

18


Plugins 5<br />

Adding a Photo Gallery<br />

21<br />

22<br />

23<br />

24<br />

25<br />

26<br />

Change the dimensions to 175 by 125<br />

and click Ok.<br />

Note:<br />

Depending on how many photos you<br />

have, it may take a minute to create<br />

the new thumbnails.<br />

After <strong>WordPress</strong> is finished creating the<br />

new thumbnails, rollover your website’s<br />

name in the upper left and click Visit Site.<br />

Click on the Gallery page (be sure to<br />

hit Refresh to see your changes if it was<br />

open in another tab/window while you<br />

resized the thumbnails).<br />

Alright, so the thumbnails are now larger,<br />

the page looks better now, but let’s get<br />

rid of the View as slideshow text that<br />

displays at the top.<br />

Go back to your dashboard. Click on<br />

Gallery and then click Options.<br />

On the General Options page, click the<br />

Gallery tab.<br />

Find the box titled Integrate slideshow<br />

and uncheck it.<br />

Click Save Changes.<br />

Now go back to your Gallery page and<br />

that text will be gone.<br />

Note:<br />

There are many options available to<br />

make a highly customized gallery. Feel<br />

free to change the options as needed.<br />

Explore the options of the plugin to<br />

create a gallery that satisfies you!<br />

22<br />

Chapter 5 | Plugins 96<br />

24<br />

23<br />

25<br />

21<br />

26


Plugins 5<br />

Maintenance Mode<br />

A maintenance mode plugin displays a page that shows visitors that your site is currently being updated. It<br />

blocks access to your site’s pages, posts and content, and displays what web developers call a splash page.<br />

This plugin is handy for people who want to build their site from start-to-finish before anyone can actually<br />

view their site. It’s also useful for experimenting with plugins and other features that may not work correctly<br />

right away. Let’s install a maintenance mode plugin and run through its features.<br />

1<br />

2<br />

3<br />

From the Dashboard, rollover Plugins<br />

and then click Add New.<br />

In the search area, type Maintenance<br />

Mode and click Search Plugins.<br />

Locate the Maintenance Mode plugin<br />

from the list and click Install Now.<br />

Note:<br />

Remember that a good way to find a<br />

working plugin is to rollover the stars<br />

to see how many reviews it’s had--the<br />

higher the reviews and higher the<br />

stars the better.<br />

Chapter 5 | Plugins 97<br />

1<br />

3<br />

2


Plugins 5<br />

Maintenance Mode<br />

4<br />

5<br />

6<br />

7<br />

8<br />

After the plugin has been installed<br />

successfully, click Activate Plugin.<br />

Go to Settings and click Maintenance<br />

mode.<br />

Ok, we’re now looking at our settings page<br />

for the maintenance mode plugin. First<br />

click on the button that says: Activated.<br />

Next you’ll need to estimate how much<br />

time you’ll be in maintenance mode.<br />

Depending on how detailed your<br />

website is, go ahead and enter the time<br />

you think you’ll need to be finished.<br />

Here we’ve entered 3 days (You can<br />

always go back into the settings and<br />

change it).<br />

Scroll down to the bottom of the page<br />

and click Save Changes.<br />

Chapter 5 | Plugins 98<br />

8<br />

5<br />

4<br />

6 7


Plugins 5<br />

Maintenance Mode<br />

9<br />

10<br />

11<br />

After you’ve saved your settings, rollover<br />

the space that says Howdy, whateveryour-name-is<br />

and click Log Out.<br />

You’ll know the plugin is functioning<br />

correctly when it says Maintenance<br />

Mode is active.<br />

To see what visitors will see when<br />

they visit your site, type your website’s<br />

URL into the address bar of your web<br />

browser and hit Enter.<br />

11<br />

Chapter 5 | Plugins 99<br />

10<br />

9


Plugins 5<br />

Maintenance Mode<br />

12<br />

To continue working on your site, go<br />

back to the address bar and enter the<br />

URL for your WP Login. It’s simply www.<br />

your-website-name.com/wp-admin<br />

(See Chapter 2, Section 2 if you need<br />

help logging into your Wordpress<br />

dashboard)<br />

Note:<br />

A nice feature about this plugin is that<br />

when you’re in maintenance mode,<br />

the plugin will tell you it’s active on<br />

the Dashboard. When you’re ready<br />

to show the world your awesome<br />

website, be sure to click deactivate to<br />

take it out of maintenance mode.<br />

Congratulations! You can now put your<br />

site into maintenance mode while<br />

you make changes. Those web skills<br />

are getting sharp! Time to tackle more<br />

challenges. Let’s work on some logo<br />

design…<br />

Chapter 5 | Plugins 100<br />

12


CHAPTER 6<br />

Creating your logo<br />

Using pixlr.com<br />

Photoshop and Gimp


Creating Your Logo 6<br />

Creating Your Logo<br />

A good logo is an important part of any marketing campaign. Having a unique logo sets you apart from the<br />

competition, appeals to visitors, and gives your website a professional look. In this chapter, we’ll show you<br />

how to create a logo from scratch that fits seamlessly into your <strong>WordPress</strong> site.<br />

Note:<br />

The following steps are for the Local Business Theme, but the process is generally the same for other<br />

themes. In any case, you may need to improvise if you’re using a different theme. Custom logo sizes can<br />

vary from theme to theme, so be sure you find the logo’s dimensions in the theme you’re using before<br />

creating your logo!<br />

1<br />

2<br />

3<br />

http://www.youtube.com/<br />

watch?v=9H6Qu5BCpyc<br />

From the Dashboard, click on<br />

Appearance and then Theme<br />

Options.<br />

Look to the right of the Custom Logo<br />

box. Here, it says: Optimal size: 300px<br />

Wide by 90px Height.<br />

Note:<br />

Custom logo size may vary from<br />

theme-to-theme.<br />

Write 300px Wide by 90px High on a<br />

piece of paper and keep it nearby. You’ll<br />

need it soon.<br />

Chapter 6 | Creating Your Logo 102<br />

1<br />

2


Creating Your Logo 6<br />

Creating Your Logo<br />

4<br />

5<br />

6<br />

7<br />

Open a New Tab/Window in your web<br />

browser.<br />

Note:<br />

To quickly open a new tab, use<br />

CTRL+T on a PC or Command+T on<br />

a MAC.<br />

In the new window/tab type: pixlr.com<br />

and hit Enter.<br />

Click Open Pixlr editor (Advanced).<br />

Click <strong>Create</strong> New Image.<br />

Chapter 6 | Creating Your Logo 103<br />

6<br />

7<br />

5


Creating Your Logo 6<br />

Creating Your Logo<br />

8<br />

9<br />

10<br />

11<br />

12<br />

13<br />

In the box marked Name, create a name<br />

for your logo, here I’m titling mine Logo.<br />

Change the Width to the sizes you<br />

wrote down in Step 3. In this case,<br />

300px wide by 90px high.<br />

Click the box that says Transparent.<br />

Click Ok.<br />

Now we have a 300x90 blank canvas.<br />

See the checkers? That means “clear” or<br />

“transparent” in the design world. The<br />

checkers are telling us that our graphic<br />

will be see-through and any space that<br />

isn’t used by text or art will just display<br />

the background of our website.<br />

Ok, now it’s time to get creative! You<br />

have some options at this point. Maybe<br />

you work for a business that already has<br />

a logo. If so, you’ll need to integrate it<br />

into this box.<br />

I’m going to include extra steps now for<br />

people who don’t have a logo. If you<br />

have a logo designed and ready to go,<br />

you can skip to Step 19.<br />

In your web browser, open a New Tab<br />

or New Window (You can use keyboard<br />

shortcut CTRL+T or Command+T) and<br />

go to: dryicons.com.<br />

Chapter 6 | Creating Your Logo 104<br />

8<br />

10<br />

12<br />

9<br />

11<br />

13


Creating Your Logo 6<br />

Creating Your Logo<br />

14<br />

15<br />

16<br />

17<br />

Now click Free Icons in the site’s menu.<br />

So we’re now looking at a bunch of free<br />

icons that we can download. You’ll need<br />

to find one that suits you best. For this<br />

example, I’m going to use the beakerlooking<br />

image. Click on View/Download<br />

to see the image set.<br />

Now click on the icon to go to the<br />

image page.<br />

Move the mouse over the largest image<br />

(this one says 128 x 128 px) and rightclick.<br />

Select Save Image As… then save<br />

the image to your desktop.<br />

Chapter 6 | Creating Your Logo 105<br />

16<br />

14<br />

14


Creating Your Logo 6<br />

Creating Your Logo<br />

18<br />

19<br />

20<br />

21<br />

22<br />

23<br />

Ok, the image has downloaded and<br />

we’re ready to move on! Now close the<br />

dryicons.com window and go back to<br />

your Pixlr canvas.<br />

On the Pixlr canvas page, select File (not<br />

the web browser’s File, there’s two, Ok?)<br />

and then select Open Image.<br />

Refer to your desktop to find the file you<br />

downloaded in Step 17. Click Open.<br />

Click on the imported logo (you’ll know<br />

it’s selected when it shows up in the<br />

Navigator box in the upper right corner<br />

of the workspace).<br />

Select Edit and Select All in the Pixlr<br />

workspace menu. You’ll see a dotted<br />

line moving around the box when it’s<br />

selected.<br />

Click Edit (in Pixlr) and then click Copy.<br />

Chapter 6 | Creating Your Logo 106<br />

23<br />

19<br />

21<br />

18


Creating Your Logo 6<br />

Creating Your Logo<br />

24<br />

25<br />

26<br />

27<br />

a.) Now click on your blank canvas.<br />

b.) Click Edit and Paste.<br />

Ok, so the image is on our canvas, but it<br />

doesn’t fit correctly. To make it fit, scroll<br />

up to Edit and click Free Transform.<br />

The image will now have 6 blue<br />

squares. Hover the mouse over a corner<br />

square and hold down the Shift key<br />

while moving the mouse to size the<br />

image. (The shift key keeps the image<br />

proportional to its original shape, so<br />

don’t forget to hold shift!)<br />

After you’ve got the size right and position<br />

of the art, click on the canvas and then<br />

click Yes to confirm the changes.<br />

Chapter 6 | Creating Your Logo 107<br />

24<br />

25<br />

26


Creating Your Logo 6<br />

Creating Your Logo<br />

28<br />

29<br />

30<br />

31<br />

32<br />

33<br />

Next, we’ll add some text. Click on the A<br />

button in the box that titled Tools.<br />

Click on the canvas and type your<br />

business name. I’ve entered, Awesome<br />

Inc. You can change the text size, font<br />

and style here too. You can also move<br />

the text around to make it fit nicely.<br />

Click OK when you’re finished.<br />

Note:<br />

You can repeat Steps 28-30 to add text<br />

boxes for trademarks, slogans, etc.<br />

Ok, so you’ve spent some time making<br />

a good logo that suits your needs and<br />

you’re ready to publish it. Click File (the<br />

Pixlr File not the browser’s) and then<br />

click Save.<br />

Name the file Awesome-Logo.png or<br />

whatever filename you choose.<br />

Note:<br />

You may need to add .png to the end<br />

of the filename. Just double check<br />

the file and make sure it is your-filename.png<br />

and actually has the .png<br />

extension or <strong>WordPress</strong> may not<br />

accept it.<br />

Save the new logo to the desktop.<br />

Chapter 6 | Creating Your Logo 108<br />

28<br />

29<br />

31<br />

30<br />

33<br />

32


Creating Your Logo 6<br />

Creating Your Logo<br />

34<br />

35<br />

36<br />

37<br />

38<br />

39<br />

Ok, our logo is now ready to go<br />

onto our <strong>WordPress</strong> site. Click on<br />

Appearance and then Theme<br />

Options.<br />

Beneath the Custom Logo box, click<br />

Upload Image.<br />

Go to your desktop and find the logo<br />

file and click Open.<br />

The logo will upload and display<br />

beneath the Custom Logo box.<br />

Everything looks good right? Now scroll<br />

down and click Save All Changes.<br />

Alright! Now go to your website by<br />

rolling over your website’s name in the<br />

upper left corner and clicking Visit Site.<br />

Ok so we’re back on our site. I see<br />

that our logo is implemented into the<br />

header. So we’re all good. Remember,<br />

the logo is a beacon on the site, it’s<br />

prominently displaying on each page,<br />

so it’s important that you spend some<br />

quality time creating a good logo.<br />

Remember, if something doesn’t look<br />

right with your logo, repeat this stepby-step<br />

and make something that<br />

satisfies you. Experiment. But if you feel<br />

overwhelmed by design, don’t be afraid<br />

to reach out to a professional (we’ll be<br />

covering that later).<br />

Chapter 6 | Creating Your Logo 109<br />

38<br />

34<br />

35<br />

38<br />

37


Creating Your Logo 6<br />

Gimp<br />

Gimp is a free program (available via<br />

gimp.org) with so many features that<br />

it deserves its own step-by-step book.<br />

The good thing about Gimp is that it’s<br />

free. Gimp includes a painting feature<br />

that you can use to create graphics. It’s<br />

packed with additional features such as<br />

Brush, Airbrush, Pencil, etc., that you can<br />

also use to create graphics for free.<br />

Gimp is especially excellent for<br />

photographers and people looking<br />

to enhance their photos and art. Like<br />

its larger, more expensive cousin<br />

Photoshop, this program can do many<br />

things to make photos look amazing,<br />

create art, creaete a logo and carry out<br />

basic design.<br />

Gimp usually allows you to open an<br />

unlimited number of pictures at once,<br />

so it also makes bulk editing of art<br />

and photos smooth. Gimp features a<br />

very thorough step-by-step guide that<br />

is totally free and available on their<br />

website.<br />

Chapter 6 | Creating Your Logo 110


Creating Your Logo 6<br />

Adobe Photoshop<br />

Recently, Adobe has made giant strides<br />

to make its software available to a wider<br />

audience. What was once a $700-$900<br />

investment for design professionals has<br />

now become accessible to the everyday<br />

design enthusiast on a tight budget.<br />

As of this writing, Adobe offers access<br />

to its Creative Cloud for $49.99 a month.<br />

Creative Cloud goes beyond Photoshop<br />

and gives users access to all of their<br />

Adobe desktop programs. This is a huge<br />

value compared to what we once paid<br />

for these programs!<br />

Adobe’s products have been the<br />

industry standard for photo editing,<br />

illustration, video editing and print<br />

design for over 20 years. Almost every<br />

magazine, newspaper, billboard, bus<br />

stop advertisement, window display and<br />

just about every label on every product<br />

in the supermarket was designed using<br />

an Adobe program.<br />

That said, if you’re looking to make a life for yourself as a design professional<br />

or web developer--learning Adobe is an absolute must. If, however, you’re<br />

looking to keep it simple and D-I-Y, forking out the $50 a month probably<br />

isn’t the best way to go.<br />

Note:<br />

if you dive into learning Adobe Photoshop, you will be adding greatly to<br />

your bag of skills. <strong>WordPress</strong> and Photoshop knowledge can land you<br />

a decent job, if that’s something your heart desires. Companies do hire<br />

people with Abobe Photoshop and Illustrator knowledge.<br />

The other option is to hire a design professional to help you with your<br />

project. (See Chapter 9: Finding Help)<br />

Chapter 6 | Creating Your Logo 111


CHAPTER 7<br />

Getting People To<br />

your Website<br />

Social Media<br />

Opening a Gmail Account<br />

Tracking Visitors With<br />

Google Analytics<br />

Setting Up Your Blog<br />

Search Engine Optimization (SEO)<br />

Setting the SEO-friendly<br />

Permalink Structure<br />

Using Google’s Keyword Tool<br />

Downloading the SEO Plugin<br />

Writing SEO-Friendly Posts<br />

Setting Up Google Webmaster<br />

Tools<br />

Creating a Sitemap


Getting People To Your Website 7<br />

Creating Content<br />

The best and least expensive way to get people to your website is by creating content. Most people use the<br />

internet as a tool for getting information. If you have the best information on your website, youtube and<br />

facebook you will attract lots of people and your business will be profitable.<br />

If you don’t have anything to say or any useful information online then your website probably won’t be<br />

successful.<br />

There are other ways to get people to your website like building free tools online like a search engine or<br />

creating a social network but those things are extremely difficult to do. The easiest way to position yourself<br />

as an expert and get people to your website is to create content and that is what we are going to focus on<br />

in this book.<br />

Tools For Getting Clients<br />

Before we begin getting people to our website we have to install tools that will give us the information we need<br />

to track how many people come to our website. To do that we have to have a Google account. Then after we<br />

get a Google account we will install Google Analytics. What Google Analytics does is it shows you how many<br />

people are coming to your website and where they are coming from.<br />

After that we are going to setup a blog. There are many ways to build content and this is just one of them. If a<br />

blog isn’t right for you then you need to think of better ways to create content. You can also create content on<br />

social media websites. Here is a quick overview of the social media websites.<br />

Chapter 7 | Getting People To Your Website 113


Getting People To Your Website 7<br />

Social Media<br />

There are a number of Social Media outlets available today. Almost all of them are free. The only investment<br />

you’re making on these outlets is time.<br />

Social Media is a huge resource for marketing. And more importantly—it’s a great way to interact, inspire,<br />

engage and educate your customers.<br />

Newspaper circulation has dropped significantly and according to the Wall Street Journal, print advertising<br />

is expected to drop 18% over the next four years! So, where will you put your energy, time and money?<br />

Social media connects your audience directly. You can interact and engage your customers on Facebook.<br />

You can post an event on Twitter instantly. There’s no lag time, no waiting for print, and interaction is<br />

immediate, relevant and honest.<br />

Overview of Social<br />

Media Outlets:<br />

Facebook<br />

• 500 Million Users<br />

• Business friendly<br />

• Easy to Maintain a page and have multiple<br />

pages<br />

• Good photo and video integration<br />

• Excellent insights/stats similar to Google<br />

Analytics (for Pages only)<br />

• Link to your SEO/blog posts<br />

• Good for interacting and engaging<br />

customers<br />

• Mobile/Smartphone accessible<br />

Chapter 7 | Getting People To Your Website 114


Getting People To Your Website 7<br />

Overview of Social Media Outlets:<br />

Twitter<br />

• Quickly replacing CNN and major news<br />

outlets as the go-to place for breaking news.<br />

• 175 million users<br />

• Posts are short and to the point<br />

• Excellent for promoting your blog posts<br />

• Discover, follow and utilize relevant hashtags<br />

(#____) to reach a larger audience.<br />

YouTube<br />

• Fastest growing market in media (video).<br />

• Third most visited website on the internet<br />

(behind Google and Facebook)<br />

• Free service. Unregistered users can view<br />

content while registered users can post<br />

unlimited number of videos.<br />

• Amazing source for tutorials—users post<br />

how to make websites, plant gardens, fix<br />

cars, rebuild sewing machines (almost<br />

everything).<br />

LinkedIn<br />

• Excellent for professional networking<br />

• Resume/Job-based social site<br />

• Good forums and discussions among<br />

people in your field<br />

• Seek and offer advice/help specific to your<br />

field<br />

First lets get a Google account so we can install<br />

all the tools we need.<br />

Chapter 7 | Getting People To Your Website 115


Getting People To Your Website 7<br />

Opening a Gmail Account<br />

Already using Gmail? Awesome! You can skip this section. If not, you’ll need to open an account now. It’s<br />

free and is, by far, the best email service available. By signing up for Gmail, you’ll also have access to the rest<br />

of Google’s powerful free tools. Let’s get to it…<br />

1<br />

2<br />

3<br />

Click here to watch the video<br />

Go to gmail.com<br />

Click <strong>Create</strong> an Account.<br />

Fill out all of the required information<br />

(write your password down so you don’t<br />

forget) and then click Next step.<br />

Note:<br />

Google may ask to confirm your<br />

phone number.<br />

Chapter 7 | Getting People To Your Website 116<br />

1<br />

3<br />

2


Getting People To Your Website 7<br />

Opening a Gmail Account<br />

4<br />

5<br />

6<br />

On the page asking for a photo, click Next<br />

step (You can add one later).<br />

On the Welcome screen, click Continue to<br />

Gmail.<br />

Congratulations! You’ll be using this<br />

account to access some amazing tools<br />

that Google provides to web developers.<br />

Click Take Tour to learn all about your<br />

Gmail account. When you’re ready to<br />

move onwards, upwards and forward—<br />

let’s setup Google Analytics…<br />

Chapter 7 | Getting People To Your Website 117<br />

5<br />

6<br />

4


Getting People To Your Website 7<br />

Tracking Visitors With Google Analytics<br />

Google Analytics is a very powerful tool for gaining insight into the people who visit your website. It tells<br />

you the number of visitors to your website, what visitors click on, how long visitors stay on each page, what<br />

country they’re visiting from and their general location, what type of browser they’re using and whether or<br />

not they’re using a smartphone or a computer—and this is just the tip of the iceberg.<br />

Some of the most interesting data on Google Analytics is where people learned about your website<br />

from. This helps you see if your Facebook marketing is working better than your Youtube marketing or if<br />

your blog is by far bringing in the most amount of people. This helps you throw away what isn’t working<br />

and keep on doing what is working. Helping you bring more people to your website because you are<br />

marketing with data instead of just trying random stuff.<br />

This section will show you how to install a plugin that will integrate Google Analytics right into your<br />

<strong>WordPress</strong> dashboard.<br />

1<br />

2<br />

3<br />

4<br />

Click here to watch the video<br />

Go to google.com/analytics<br />

Click <strong>Create</strong> an Account.<br />

Sign in with your Gmail login and<br />

Password.<br />

On the pop-up, click Sign Up.<br />

Chapter 7 | Getting People To Your Website 118<br />

3<br />

2


Getting People To Your Website 7<br />

Tracking Visitors With Google Analytics<br />

5<br />

6<br />

7<br />

a.) Make sure you’ve selected Web site.<br />

b.) Select Universal Access.<br />

c.) Enter your Website Name.<br />

d.) Enter your Website’s URL.<br />

e.) Select an Industry Category.<br />

f.) Make sure your time-zone is set<br />

correctly.<br />

g.) Enter an Account Name.<br />

h.) Read over the options and leave the<br />

boxes check or uncheck them as<br />

needed. (I’ve unchecked them).<br />

Click Get Tracking ID.<br />

Read the Terms of Service and, if you<br />

agree, click I Agree.<br />

7<br />

Chapter 7 | Getting People To Your Website 119<br />

6<br />

5


Getting People To Your Website 7<br />

Tracking Visitors With Google Analytics<br />

8<br />

9<br />

10<br />

11<br />

You should now see a page that looks like<br />

this:<br />

Close the Google Analytics tab and go<br />

back to your <strong>WordPress</strong> dashboard.<br />

From your Dashboard, rollover Plugins<br />

and click Add New.<br />

In the search box, type analytics and click<br />

Search Plugins.<br />

Chapter 7 | Getting People To Your Website 120<br />

9<br />

10<br />

11<br />

8


Getting People To Your Website 7<br />

Tracking Visitors With Google Analytics<br />

12<br />

13<br />

14<br />

Find the plugin titled Google Analyticator<br />

and click Install Now.<br />

Note:<br />

At the time of writing, this plugin had<br />

recently been revamped and updated<br />

to the latest versions of <strong>WordPress</strong>. It<br />

wasn’t working for a while, but has<br />

recently been redesigned with the<br />

help of the Google Team. It’s currently<br />

the easiest to use, and probably the<br />

best Analytics plugin available.<br />

Click Activate Plugin.<br />

Once it’s activated, rollover the Settings<br />

tab in the Admin Menu and click Google<br />

Analytics.<br />

Chapter 7 | Getting People To Your Website 121<br />

13<br />

12<br />

14


Getting People To Your Website 7<br />

Tracking Visitors With Google Analytics<br />

15<br />

16<br />

17<br />

Follow the instructions on the page by<br />

clicking Click Here.<br />

Sign in with your Google Account (AKA<br />

Gmail account).<br />

After you’ve signed into your Google<br />

Account, there will be a pop-up<br />

requesting permission, click Allow access.<br />

Chapter 7 | Getting People To Your Website 122<br />

17<br />

15<br />

16


Getting People To Your Website 7<br />

Tracking Visitors With Google Analytics<br />

18<br />

19<br />

20<br />

21<br />

Copy the code by using your mouse to<br />

highlight the code, right-click on the<br />

mouse and select Copy from the list. Or hit<br />

CTRL+C (AppleSign+C on a Mac) to copy<br />

the code.<br />

On the the Activate Google Analyticator<br />

page, click on the box and hit CTRL+V to<br />

paste the code.<br />

Click Save & Continue.<br />

You can leave everything on the options<br />

page set to default. Your page should look<br />

something like this:<br />

Chapter 7 | Getting People To Your Website 123<br />

18<br />

19 20<br />

21


Getting People To Your Website 7<br />

Tracking Visitors With Google Analytics<br />

22<br />

Navigate back to your Dashboard page<br />

and check out the Google Analytics<br />

Summary for information about your<br />

latest visitors!<br />

Note:<br />

You’ll need to give it some time to<br />

track your visitors. Let it analyze for a<br />

couple days. Come back to it in a few<br />

days to make sure visitors are actually<br />

being tracked and everything works.<br />

You can also click on View Full Stat Report<br />

on the Google Analytics Summary tab<br />

and it will take you to your complete<br />

Google Analytics site.<br />

Congratulations! You’ve just installed a<br />

very powerful tool on your <strong>WordPress</strong> site<br />

and you’ll be gaining all kinds of vital data!<br />

Anytime you visit your dashboard page,<br />

you’ll be able to check in and see how<br />

many visitors you’ve had.<br />

Chapter 7 | Getting People To Your Website 124<br />

22


Getting People To Your Website 7<br />

Setting Up Your Blog<br />

To get people to your website a good strategy is to have really great content posted regularly to your website.<br />

What the search engines like Google want to do is provide people with the most valuable and helpful content.<br />

If you are a personal trainer you could have blog posts about nutrition, training and getting enough sleep.<br />

This would attract the right kind of people who would also want your products or services.<br />

A blog post is different than a page because a blog is updated regularly and are usually organized by date, so<br />

visitors see the newest posts first.<br />

Note:<br />

A blog is short for web log.<br />

Blogging became popular in the early 2000s, and has since become a household name by major media<br />

outlets like CNN. Blogging is one of the major ways to draw people to your website. Let’s get started…<br />

1<br />

2<br />

3<br />

4<br />

From your Dashboard, rollover the<br />

Pages tab and click Add New.<br />

Title your page Blog.<br />

Note:<br />

If you don’t like Blog as a title for your<br />

page, you can use something like:<br />

News, Happenings, Writings, Articles,<br />

Info, Rants, or whatever. You can<br />

change the name at any time.<br />

In Page Attributes click the box under<br />

Template and select Blog Page.<br />

Note:<br />

Sometimes themes do not have a<br />

blog template! If that is the case just<br />

follow steps 4 – 8.<br />

Click Publish.<br />

Note:<br />

Leave the text area blank.<br />

Chapter 7 | Getting People To Your Website 125<br />

1<br />

2<br />

4<br />

3


Getting People To Your Website 7<br />

Setting Up Your Blog<br />

5<br />

6<br />

7<br />

8<br />

9<br />

10<br />

11<br />

After you’ve published the page, rollover<br />

Settings and click on Reading.<br />

Here, we want the front page to display A<br />

Static Page.<br />

Set the front page to About and set your<br />

posts page to Blog (or whatever page you<br />

created in Step 2). Now anytime we create<br />

a post, it will publish to the Blog page!<br />

Click Save Changes.<br />

After saving, rollover the Posts tab and<br />

click All Posts.<br />

Rollover the Hello World post and click<br />

Trash.<br />

Next, click Add New.<br />

Chapter 7 | Getting People To Your Website 126<br />

6<br />

8<br />

10<br />

11<br />

5<br />

7


Getting People To Your Website 7<br />

Setting Up Your Blog<br />

12<br />

13<br />

14<br />

15<br />

16<br />

17<br />

18<br />

Ok, here is where we create our blog<br />

posts. <strong>Create</strong> a title for your post.<br />

Before typing, click The Kitchen Sink.<br />

Ok, now it’s time to get creative… this is<br />

where you’ll be creating magic. Feel free<br />

to explore the different options available.<br />

Need inspiration? Quote someone to get<br />

motivated! Find a good quote and use<br />

copy and paste to add it to the text box.<br />

14a.) Highlight the quote and click<br />

Blockquote.<br />

Note:<br />

You’ll need to click Blockquote again<br />

to turn off blockquotes.<br />

Add a photo by clicking Add media.<br />

Here you can select a photo from previous<br />

uploads, or drag and drop photos from<br />

your computer to upload a picture.<br />

Select the photo(s) you want add to the<br />

post.<br />

17a.) Next to Link To be sure to select<br />

None.<br />

17b.) Select the size you’d like to use.<br />

Click Insert into post.<br />

Chapter 7 | Getting People To Your Website 127<br />

15<br />

12<br />

14<br />

17<br />

13<br />

18<br />

16


Getting People To Your Website 7<br />

Setting Up Your Blog<br />

19<br />

20<br />

21<br />

22<br />

When you’ve finished creating your post,<br />

click Publish (or Update).<br />

After publishing, click View Post.<br />

Congratulations! You just published your<br />

first post! Let’s clean this page up, and get<br />

rid of the comment box.<br />

Rollover Your Website’s Name in the upper<br />

left corner and click Dashboard.<br />

Click Posts.<br />

Chapter 7 | Getting People To Your Website 128<br />

21<br />

22<br />

20<br />

19


Getting People To Your Website 7<br />

Setting Up Your Blog<br />

23<br />

24<br />

25<br />

Under your post, click Quick Edit.<br />

Uncheck the Allow comments and Allow<br />

pingbacks boxes and click Update.<br />

Under your new post, click View.<br />

Note:<br />

Ok, now our page looks cleaner and<br />

the comment box is gone! We’re<br />

almost done. Notice that our blog<br />

page isn’t automatically added to<br />

our site’s menu? We’ll need to add it<br />

manually so visitors can easily find it.<br />

Chapter 7 | Getting People To Your Website 129<br />

23<br />

25<br />

24


Getting People To Your Website 7<br />

Setting Up Your Blog<br />

26<br />

27<br />

28<br />

29<br />

Rollover Your Website’s Name in the upper<br />

left corner and click Dashboard.<br />

Rollover the Settings tab and click<br />

Menus.<br />

In the Pages box, find your Blog page (the<br />

one you created in Step 2), and click Add<br />

to Menu.<br />

Drag the page to the position you choose<br />

and click Save Menu.<br />

Chapter 7 | Getting People To Your Website 130<br />

26<br />

27<br />

29<br />

28


Getting People To Your Website 7<br />

Setting Up Your Blog<br />

30<br />

Click on Your Website’s Name in the upper<br />

left corner and checkout your new menu.<br />

Notice it includes a link to your blog page,<br />

which is where your posts will be posted.<br />

You’re becoming a blackbelt in <strong>WordPress</strong>!<br />

Following this book, you’ve setup your<br />

<strong>WordPress</strong> site to unlock a very powerful<br />

aspect of the <strong>WordPress</strong> platform: SEO.<br />

Ready to become a true <strong>WordPress</strong><br />

professional? Next, we’ll be implementing<br />

Search Engine Optimization.<br />

Chapter 7 | Getting People To Your Website 131


Getting People To Your Website 7<br />

Search Engine Optimization (SEO)<br />

What is SEO?<br />

SEO may sound fancy but it’s actually pretty simple. The overall goal is to get your site to the first page of a<br />

Google search (or Bing, or Yahoo, etc). When you search for something in a search engine like Google you<br />

want to be one of the first results because if you’re the 100th result no one is going to find you!<br />

Search Engine Optimization is the process of ranking your website high in the search engines so that<br />

people can find it and visit your website.<br />

SEO is concerned only with organic (un-paid) search engine rankings. It shouldn’t be confused with paid<br />

search engine advertising.<br />

Let’s assume that you own a sailboat and offer harbor cruises and boat tours. Your business is based in<br />

Newport Beach, CA and it’s called “SoCal Pirate Tours.”<br />

Ideally, if your site is optimized for SEO, anyone who searches: Pirate Tour, Pirate Boat Charters, Boat Charter<br />

Newport Beach, Pirate Tour Socal and variations of these search strings will see your site on the first page of<br />

the search results.<br />

At the time of writing, SEO is an $853 million dollar per year industry. People pay big bucks to show up on<br />

the first page of the search results. By following this section, you’ll not only be learning how to practice SEO<br />

(a valuable skill as you can see) but you’ll also be saving yourself thousands of dollars!<br />

You also have the potential of earning amazing amounts of business by following this guide.<br />

Excited? Let’s get started…<br />

Chapter 7 | Getting People To Your Website 132


Getting People To Your Website 7<br />

Setting the SEO-friendly Permalink Structure<br />

Most of the time your website will have the permalinks already setup properly. So this is just a check to<br />

make sure that it is actually setup properly.<br />

If you go to your about or contact page and the URL looks like this:<br />

www.Your-Website-Here.com/about<br />

Instead of this:<br />

www.Your-Website-Here.com/p=128<br />

Then you can skip this section!<br />

If your website has numbers and questions marks in the URL then that is not good for humans or for<br />

search engines and you need to follow this section to fix it.<br />

Out of the box, <strong>WordPress</strong> uses a default permalink structure that looks like this: http//yourwebsite.<br />

com/?p=128. The problem with the default structure is that it’s not search friendly. A far better choice is<br />

the postname setting. Using the postname structure is crucial to creating a website that easily readable<br />

by both humans and search engine robots.<br />

1<br />

2<br />

3<br />

From the Dashboard, rollover Settings<br />

and click Permalinks.<br />

Click the button selecting Post Name,<br />

then click Save Changes.<br />

After it has saved, click Save Changes<br />

again.<br />

Note:<br />

Sometimes you have to save the<br />

permalink structure twice, so save it<br />

twice to be safe!<br />

Chapter 7 | Getting People To Your Website 133<br />

2<br />

3<br />

1


Getting People To Your Website 7<br />

Using Google’s Keyword Tool<br />

SEO is all about keywords. Keywords are the words and phrases that people type into the search bar at<br />

google.com. In order to optimize your site, you need to gain insights into what exactly people are searching<br />

when they visit Google. Then you can tailor your posts to those keywords.<br />

Google’s Keyword Tool is a tremendously powerful tool, and we recommend using it to guide your next<br />

stage of SEO—writing blog posts. This step essentially gives the guidance needed for composing blog posts.<br />

Let’s find out what people are searching!<br />

1<br />

2<br />

3<br />

Open a new tab/window and go to<br />

adwords.google.com/keywordtool<br />

Think about your potential customers and<br />

what they’d search. Type a keyword or<br />

phrase that they would use to find your<br />

website. (Here, I’m helping my friend who<br />

operates a pirate-themed boat tour on<br />

their sailboat in Newport Beach. In this case,<br />

I’ve typed “newport harbor boat tour”).<br />

Click Search.<br />

Note:<br />

You may have to enter a code to<br />

prove you’re not a robot.<br />

Chapter 7 | Getting People To Your Website 134<br />

3<br />

1<br />

2


Getting People To Your Website 7<br />

Using Google’s Keyword Tool<br />

4<br />

Analyze the results. You’ll need to put your<br />

thinking cap on for this one, ok? Look for<br />

keywords with the highest Local Monthly<br />

Searches. There’s a catch, however—some<br />

of the higher-ranking keywords are simply<br />

too broad.<br />

For example, in these results, “Newport<br />

Beach Boat Tour” was searched 58 times<br />

in a month. That’s pretty low… but it’s<br />

accurate because that is the 58 people<br />

who would get on our friends’ boat tour.<br />

“Newport Beach, CA” was searched<br />

201,000 times in a month. There’s lots of<br />

people searching that one—but it’s too<br />

broad for us. Not everyone that searches<br />

Newport Beach, CA is going to jump on<br />

my friends’ pirate boat.<br />

Note:<br />

Local Monthly Searches is the<br />

number of searches in your country.<br />

So for us, it’s the entire USA!<br />

Chapter 7 | Getting People To Your Website 135<br />

4


Getting People To Your Website 7<br />

Using Google’s Keyword Tool<br />

5<br />

6<br />

Find good keywords and write them<br />

down. Select keywords that aren’t too<br />

broad and that tap into your market. Here<br />

I’ve selected Newport boat tour, Newport<br />

harbor cruise, Newport boat cruises, and<br />

Newport boat ride.<br />

Ideally I want anyone that searches the<br />

Internet for a harbor cruise or boat ride in<br />

Newport Beach, CA to see my site. In order<br />

to cover all the keywords, I need to write<br />

one article per keyword. You’re basically<br />

using Google’s Keyword Tool to compile<br />

the titles to each of your SEO blog posts!<br />

Repeat Steps 2-5 to brainstorm titles and<br />

keywords to guide your SEO writing.<br />

Ready to write some solid SEO content<br />

and boost your site’s traffic? Get to writing<br />

those blog posts!<br />

Chapter 7 | Getting People To Your Website 136<br />

5


Getting People To Your Website 7<br />

Downloading the SEO Plugin<br />

1<br />

2<br />

3<br />

Go to your Dashboard. Rollover Plugins<br />

and click Add New.<br />

In the box, type <strong>WordPress</strong> SEO by Yoast<br />

and click Search Plugins.<br />

Find the Plugin titled <strong>WordPress</strong> SEO by<br />

Yoast and click Install Now.<br />

Chapter 7 | Getting People To Your Website 137<br />

1<br />

3<br />

2


Getting People To Your Website 7<br />

Downloading the SEO Plugin<br />

4<br />

After it has installed successfully, click<br />

4<br />

Activate Plugin.<br />

Chapter 7 | Getting People To Your Website 138


Getting People To Your Website 7<br />

Writing SEO-Friendly Posts<br />

SEO writing is an art. The key to writing SEO-friendly blog posts is to actually create relevant, engaging<br />

content based on the keywords you identified in the previous section.<br />

Repeating the keyword over and over while writing paragraphs that make no sense will actually hurt your<br />

Google rankings. You have to be honest about your content and ideally your content should inform and<br />

educate visitors.<br />

Break out that list of keywords you compiled in the last section, you’ll need it. This is where the magic<br />

happens… so let’s get to work!<br />

1<br />

Go to your Dashboard, rollover Posts<br />

and click <strong>Create</strong> New.<br />

Chapter 7 | Getting People To Your Website 139<br />

1


Getting People To Your Website 7<br />

Writing SEO-Friendly Posts<br />

2<br />

3<br />

4<br />

5<br />

6<br />

Scroll down to Focus Keyword and enter a<br />

keyword from your list.<br />

<strong>Create</strong> an SEO Title be sure to include all<br />

the words from your Focus Keyword.<br />

Write an interesting and engaging Meta<br />

Description. Be sure to include the focus<br />

keyword in the meta description.<br />

Compose your blog post. Be sure to<br />

include your focus keyword throughout<br />

your post. Use variations of the phrase and<br />

words to mix it up and give it a natural feel.<br />

When you’re satisfied with your post, hit<br />

Publish.<br />

Note:<br />

If you want to keep your post<br />

hidden until its perfect, scroll over to<br />

Visibility: Public, click Edit and select<br />

Private, then click Ok.<br />

5 6<br />

2<br />

3<br />

4<br />

Chapter 7 | Getting People To Your Website 140


Getting People To Your Website 7<br />

Writing SEO-Friendly Posts<br />

7<br />

When you publish your page, the SEO<br />

plugin will analyze your post and make<br />

recommendations on how to improve<br />

your ranking. Ratings are expressed by<br />

red, orange, yellow, or green buttons-<br />

-your goal is to get a green button for<br />

every post!<br />

Click on the Page Analysis tab and address<br />

any red and orange dots. A red dot is a<br />

critical issue that should be addressed<br />

immediately. Orange and yellow issues<br />

should also be addressed. You will find an<br />

overall rating in the Publish box beside<br />

the SEO table.<br />

Repeat Steps 1-7 for each keyword.<br />

This section is where the bulk of your time<br />

from now on should be dedicated.<br />

Time working on SEO writing is time well<br />

spent—imagine the amount of business<br />

you tap into by hitting that green button<br />

mark! (The keyword tool tells you) Bounce<br />

between the keyboard tool and this<br />

section regularly to guide you through the<br />

writing process.<br />

Set the goal to spend time on SEO writing every day. In 90 days you will see a sizable increase in traffic<br />

to your site (remember you’ll watch how many visitors come to your site since you’ve installed Google<br />

Analytics).<br />

Note: The more content you post—the better. Search engines love honest, informative and descriptive<br />

content. Put passion into your writing and you will be rewarded with visitors. Since you’ve put your heart<br />

into it, those visitors will then be excited, informed, educated and willing to give you business!<br />

Do your best on SEO writing and you’ll likely see big returns on your investment. Good luck!<br />

7<br />

Chapter 7 | Getting People To Your Website 141


CHAPTER 8<br />

Finding Help<br />

Tips For Searching Google<br />

<strong>WordPress</strong> Forum<br />

YouTube<br />

Elance.com<br />

Craigslist


Finding Help 8<br />

Tips for Searching Google<br />

You may be surprised to find that a few people have already asked your exact question about <strong>WordPress</strong>. But<br />

it is helpful to know how to ask questions in Google. You should always include <strong>WordPress</strong> in your search to<br />

help Google out. Here I am going to give you a few examples.<br />

If you are having a problem with your theme you should include your theme name in the search.<br />

Example: <strong>WordPress</strong> Responsive Theme Image Slider Homepage<br />

If you are having a issue with a plugin it is a good idea to tell Google your plugin name.<br />

Example: <strong>WordPress</strong> Contact Form 7 not Sending Emails<br />

Chapter 8 | Finding Help 143


Finding Help 8<br />

The <strong>WordPress</strong> Forum<br />

The <strong>WordPress</strong> forum is a lively, happening place. In any moment, posters from novice to professional will be<br />

creating topics, seeking help, asking questions, helping one another and giving advice.<br />

Here is the <strong>WordPress</strong> Forum URL: http://wordpress.org/<br />

support/<br />

Before asking anyone for help, go to the forum and search<br />

your question. You’ll probably find that others have asked<br />

your question. If you can’t find an answer, create a post in<br />

the How-To and Troubleshooting forum, and someone will<br />

reach out to you within a few hours.<br />

It is also advised that you spend some time here on the<br />

support pages simply reading about <strong>WordPress</strong>. Think of it<br />

as your continuing education after completing this book!<br />

Chapter 8 | Finding Help 144


Finding Help 8<br />

YouTube<br />

You may have discovered this book from YouTube. If so, you’re a testament to the power of How-to Videos on<br />

YouTube. YouTube is great for visual learning. Tutorials often walk viewers through exactly how to do something.<br />

Answers to questions are abundant on YouTube, and it’s highly advised to search YouTube for answers. Consult<br />

YouTube whenever you need to see how to do something.<br />

Chapter 8 | Finding Help 145


Finding Help 8<br />

Elance.com<br />

Elance is a hub where freelancers and the people hiring<br />

them interact. There are over 2 million registered workers<br />

from around the world bidding on everything from Legal<br />

writing to Graphic Design to Programming to Copyediting<br />

to Translation Services and more.<br />

If you need to hire an expert for your site, this is a great<br />

place to start. One benefit to using Elance is that you<br />

can hire people who live in other countries. If you have a<br />

problem and just can’t figure it out, someone might solve it<br />

and maybe for less expensive than you think.<br />

When you post a job on Elance you’ll begin receiving Job<br />

Proposals from various people and firms. You’ll need to sift<br />

through the proposals to find the best work at the best<br />

price.<br />

Try and be accurate about how much you’re willing to<br />

spend on your job, and don’t be afraid to spend a little<br />

more for quality work. A little extra goes a long way when<br />

hiring a freelancer!<br />

Chapter 8 | Finding Help 146


Finding Help 8<br />

Craigslist<br />

Craigslist is great for finding local help.<br />

Sometimes it’s better to meet someone<br />

face-to-face when establishing a working<br />

relationship. Don’t be afraid to turn to<br />

Craigslist when you need to hire help.<br />

Theme Developer<br />

Your theme that you are using is made by a<br />

person or company. Many times the theme<br />

developer has their own support forum<br />

and you can get more detailed customized<br />

support by going to their website.<br />

Chapter 8 | Finding Help 147


CHAPTER 9<br />

Bonus Topics<br />

Setting Up Email<br />

Security<br />

Creating Another Website<br />

Getting a Domain Name From GoDaddy<br />

Reinstalling <strong>WordPress</strong> (Starting Over)<br />

Homepage Missing / 404 Error<br />

Plugin Broke My Website<br />

Back that thing up


Bonus Topics 9<br />

Setting Up Email<br />

In this section I will to show you how to set up your email, i.e. yourname@yourwebsite.com and integrate<br />

it into your Google account. Having yourname@yourwebsite.com is regarded as being more professional,<br />

especially on business cards and when writing emails.<br />

1<br />

2<br />

3<br />

Click here to watch the video<br />

Go to your Cpanel (www.your-websitehere.com/cpanel).<br />

Login using your HostGator/cPanel<br />

login and password. (It was sent to you<br />

when you first setup Hosting).<br />

Click Email Accounts.<br />

Chapter 9 | Bonus Topics 149<br />

3<br />

1<br />

2


Bonus Topics 9<br />

Setting Up Email<br />

4<br />

5<br />

6<br />

7<br />

8<br />

9<br />

10<br />

11<br />

12<br />

Choose a name for your email address.<br />

(I’ve put my first name. You choose<br />

whatever name you want)<br />

Select your website from the drop<br />

down list. (If you have multiple domains<br />

be sure you’ve selected the correct<br />

domain)<br />

<strong>Create</strong> a password for logging into your<br />

account.<br />

Re-enter your password.<br />

Select Unlimited.<br />

Click <strong>Create</strong> Account.<br />

After it’s created, click Home.<br />

Go to the Mail section and click<br />

Forwarders.<br />

Note:<br />

It’s easier to forward your email to<br />

your Gmail account then having to<br />

log into cPanel each time you want to<br />

check messages.<br />

Click Add Forwarder.<br />

6<br />

4<br />

Chapter 9 | Bonus Topics 150<br />

10<br />

8<br />

9<br />

5<br />

7<br />

12<br />

11


Bonus Topics 9<br />

Setting Up Email<br />

13<br />

14<br />

15<br />

16<br />

17<br />

Enter the name you created in Step 4<br />

and select the correct domain.<br />

Click Forward to email address: and<br />

enter your Gmail address.<br />

Note:<br />

If you need help setting up a Google/<br />

Gmail account please see Chapter 8 –<br />

Opening a Gmail Account.<br />

Click Add Forwarder.<br />

You should see a confirmation like this:<br />

Open a new tab/window, go to Gmail,<br />

and log in.<br />

16<br />

Chapter 9 | Bonus Topics 151<br />

10<br />

15<br />

13<br />

14<br />

17


Bonus Topics 9<br />

Setting Up Email<br />

18<br />

19<br />

20<br />

21<br />

22<br />

23<br />

24<br />

Click Settings.<br />

Click Accounts.<br />

Click Add Another Email Address You<br />

Own.<br />

Enter your name.<br />

Enter the email address you just created.<br />

Be sure Treat as an alias is checked.<br />

Click Next Step.<br />

Chapter 9 | Bonus Topics 152<br />

21<br />

23<br />

19<br />

18<br />

22<br />

20<br />

24


Bonus Topics 9<br />

Setting Up Email<br />

25<br />

26<br />

27<br />

Leave Setup through Gmail selected.<br />

Click Next Step.<br />

Click Send Verification. Leave this screen<br />

open and go back to your inbox.<br />

Click on the confirmation email.<br />

Note:<br />

If you can’t find the email, reload the<br />

page. Still can’t find it? Check the<br />

Spam folder. (Mark it NOT SPAM if it’s<br />

in Spam!)<br />

Chapter 9 | Bonus Topics 153<br />

27<br />

25<br />

26


Bonus Topics 9<br />

Setting Up Email<br />

28<br />

29<br />

30<br />

31<br />

Use CTRL+C or (AppleSign+C on Mac)<br />

to copy the confirmation code.<br />

Go back to the verification page. Paste<br />

the code into the box.<br />

Click Verify.<br />

You should see this confirmation:<br />

Chapter 9 | Bonus Topics 154<br />

29<br />

28<br />

31<br />

30


Bonus Topics 9<br />

Setting Up Email<br />

32<br />

33<br />

34<br />

Go back to your Gmail inbox.<br />

Click compose.<br />

In the From section, you can now<br />

choose to send from the address you’ve<br />

just created.<br />

Ok! Your new email has been integrated<br />

into Gmail! Repeat this section to create<br />

email accounts for employees, or create<br />

secondary emails for departments.<br />

(sales@yourwebsite.com, info@<br />

yourwebsite.com, design@yourwebsite.<br />

com, etc.)<br />

Chapter 9 | Bonus Topics 155<br />

33<br />

34


Bonus Topics 9<br />

Security<br />

Keeping Everything Updated<br />

Your operating system should be up-to-date and the software on your computer should always be the latest<br />

version. Keeping both the software and operating system of your computer updated helps prevent breaches<br />

in security.<br />

Use the most recent version of <strong>WordPress</strong>, and update your plugins whenever new versions become<br />

available.<br />

Chapter 9 | Bonus Topics 156


Bonus Topics 9<br />

Using Strong Passwords<br />

Secure your <strong>WordPress</strong> site with a strong<br />

password when logging in.<br />

Tips for a strong password:<br />

• Don’t use your name, username, business name or name of your site.<br />

• Don’t use a word found in any dictionary, in any language.<br />

• The longer the password, the better<br />

• Don’t use all numbers, or all letters—combine both numbers and letters.<br />

Chapter 9 | Bonus Topics 157


Bonus Topics 9<br />

Limiting Login Attempts<br />

Websites can be breached by malicious software that repeatedly attempts to login by guessing the<br />

password on your /wp-admin page. This type of software is problematic for security reasons. An effective<br />

prevention to these types of attacks is to install a Plugin that limits login attempts.<br />

1<br />

2<br />

From the Dashboard, rollover Plugins<br />

and click Add New.<br />

Type Limit Login Attempts and click<br />

Search Plugins.<br />

Chapter 9 | Bonus Topics 158<br />

1<br />

2


Bonus Topics 9<br />

Limiting Login Attempts<br />

3<br />

4<br />

5<br />

Find the Limit Login Attempts plugin<br />

and click Install Now.<br />

Click Activate Plugin.<br />

Rollover Settings and click Limit Login<br />

Attempts.<br />

Chapter 9 | Bonus Topics 159<br />

4<br />

3<br />

5


Bonus Topics 9<br />

Limiting Login Attempts<br />

6<br />

If you like the defaults, you can leave it<br />

as is or edit the options as needed and<br />

click Change Options.<br />

Chapter 9 | Bonus Topics 160<br />

6


Bonus Topics 9<br />

Changing the Admin Account<br />

It’s important to change your Username from the default <strong>WordPress</strong> username: Admin. The reason for doing<br />

this is so that malicious people and programs can’t easily guess your password.<br />

1<br />

2<br />

3<br />

4<br />

5<br />

6<br />

7<br />

8<br />

9<br />

10<br />

From the Dashboard, rollover Users, and<br />

click Add New.<br />

<strong>Create</strong> a Username. This will be what you<br />

will use to sign into <strong>WordPress</strong>.<br />

Enter your Email address.<br />

Enter your First name.<br />

Enter your Last name.<br />

Next to Website, you’ll enter your current<br />

<strong>WordPress</strong> username. (It should be filled<br />

in by default).<br />

Enter your current <strong>WordPress</strong> Password.<br />

Set the Role to Administrator.<br />

Click Add New User.<br />

We now need to assign all of the posts to<br />

the new user. Click Posts.<br />

Chapter 9 | Bonus Topics 161<br />

10<br />

1<br />

9<br />

2<br />

4<br />

6<br />

8<br />

3<br />

5<br />

7


Bonus Topics 9<br />

Changing the Admin Account<br />

11<br />

12<br />

13<br />

14<br />

15<br />

16<br />

17<br />

Check the box to highlight all posts.<br />

On the dropdown menu, select Edit.<br />

Click Apply.<br />

Note:<br />

In this example, we only have 2 posts,<br />

but you may have more.<br />

Under Author, Select your new<br />

Username.<br />

Click Update.<br />

Double check to make sure your posts<br />

are correct in the author column.<br />

Click Users.<br />

12 13<br />

Chapter 9 | Bonus Topics 162<br />

17<br />

11<br />

16<br />

14<br />

15


Bonus Topics 9<br />

Changing the Admin Account<br />

18<br />

19<br />

20<br />

Beneath admin, click Delete.<br />

On the dropdown menu, select the new<br />

username, and attribute all posts to the<br />

new user.<br />

Click Confirm Deletion.<br />

The admin account has now been<br />

deleted and you’ll log into <strong>WordPress</strong><br />

using your new username from now on.<br />

Chapter 9 | Bonus Topics 163<br />

20<br />

18<br />

19


Bonus Topics 9<br />

Creating Another Website<br />

Ok, so you want to create another website. If you’ve worked through this guide, you’ve already done it<br />

and the more you do it—the easier it gets! This step-by-step is assuming you’re using HostGator. If you’re<br />

not using HostGator, you’ll need to apply these steps to whatever hosting company you’re using. (The<br />

instructions should be similar).<br />

Buying a Domain From GoDaddy<br />

You need to buy a second domain, or you need something other than the .com, .org, or .net domain names<br />

offered by HostGator. Follow this step-by-step to buy a domain from GoDaddy and set it up through your<br />

existing hosting account.<br />

http://www.youtube.com/<br />

watch?v=nXwlvjzTidI<br />

1<br />

2<br />

3<br />

4<br />

Open a new tab/window. Go to:<br />

godaddy.com and click: Find Your<br />

Domain.<br />

Type in the domain you want to buy and<br />

click Go.<br />

Click Add.<br />

Click Continue to Checkout.<br />

Chapter 9 | Bonus Topics 164<br />

1<br />

2<br />

3<br />

4


Bonus Topics 9<br />

Buying a Domain From GoDaddy<br />

5<br />

6<br />

7<br />

8<br />

9<br />

10<br />

Change term to 1-year.<br />

Click Checkout.<br />

We don’t recommend buying any addons<br />

(or hosting), click Continue.<br />

Click Sign Up Now (if you have a<br />

GoDaddy account, log in).<br />

Enter your account holder information<br />

Click <strong>Create</strong> Account<br />

Chapter 9 | Bonus Topics 165<br />

5<br />

8<br />

9<br />

6


Bonus Topics 9<br />

Buying a Domain From GoDaddy<br />

11<br />

12<br />

13<br />

14<br />

Fill out your payment info and click<br />

Place Your Order<br />

After paying, click My Account<br />

Click Domains<br />

Next to your website, click Launch<br />

Chapter 9 | Bonus Topics 166<br />

12<br />

13<br />

11<br />

14


Bonus Topics 9<br />

Buying a Domain From GoDaddy<br />

15<br />

16<br />

17<br />

Click Quick View<br />

Rollover Nameservers. Click Set<br />

Nameservers<br />

Select: I have specific nameservers<br />

Chapter 9 | Bonus Topics 167<br />

16<br />

17<br />

15


Bonus Topics 9<br />

Buying a Domain From GoDaddy<br />

18<br />

19<br />

20<br />

21<br />

22<br />

Open a new tab/window. Go to your<br />

HostGator Cpanel (www.your-websitehere.com/cpanel).<br />

Login to cPanel.<br />

Click the Addon Domains Icon.<br />

Enter your new domain, leave the<br />

subdomain and document root settings<br />

as is, and create a password.<br />

Click Add Domain.<br />

Chapter 9 | Bonus Topics 168<br />

18<br />

22<br />

20<br />

21<br />

19


Bonus Topics 9<br />

Buying a Domain From GoDaddy<br />

23<br />

24<br />

25<br />

26<br />

27<br />

28<br />

29<br />

30<br />

You should see this confirmation<br />

message:<br />

Click the Home Icon.<br />

Scroll toward the bottom of the page<br />

and locate your nameservers.<br />

Highlight the first address and copy it<br />

(CTRL+C or Command+C on a Mac).<br />

Go back to the GoDaddy tab.<br />

Paste the address in the box.<br />

Repeat Step 26-28 for the second<br />

address.<br />

Click Ok.<br />

24<br />

Chapter 9 | Bonus Topics 169<br />

25<br />

28<br />

30<br />

23


Bonus Topics 9<br />

Buying a Domain From GoDaddy<br />

31<br />

You should see this page:<br />

You’ll repeat this section for any new websites that you want to buy/create. Proceed to Chapter 2 to install<br />

<strong>WordPress</strong> and create something amazing!<br />

Chapter 9 | Bonus Topics 170<br />

31


Bonus Topics 9<br />

Reinstalling Wordpress (Starting Over)<br />

For some reason you need to start over and reinstall <strong>WordPress</strong>. Follow this step-by-step, but take warning:<br />

you will be deleting EVERYTHING for this particular website.<br />

If you’ve written or created posts, pages, graphics, logos or anything else, you’ll be deleting it and starting<br />

over from scratch.<br />

1<br />

2<br />

3<br />

Click here to watch the video<br />

Open a new tab.<br />

Login to cPanel. (www.your-websitehere.com/cpanel)<br />

Click the QuickInstall Icon.<br />

Chapter 9 | Bonus Topics 171<br />

1<br />

3<br />

2


Bonus Topics 9<br />

Reinstalling Wordpress (Starting Over)<br />

4<br />

5<br />

6<br />

7<br />

Click the Red X next to the site you’re<br />

deleting.<br />

Click Uninstall.<br />

Click Wordpress.<br />

Click Continue.<br />

Chapter 9 | Bonus Topics 172<br />

6<br />

7<br />

5


Bonus Topics 9<br />

Reinstalling Wordpress (Starting Over)<br />

8<br />

9<br />

10<br />

11<br />

12<br />

Select the website you’re starting again.<br />

<strong>Create</strong> the admin account.<br />

Click Install Now!<br />

Click Back to cPanel<br />

Click Log out.<br />

Go to www.your-website-here.com/wp-admin and log in to start building! (Chapter 3)<br />

Chapter 9 | Bonus Topics 173<br />

8<br />

9<br />

11<br />

12


Bonus Topics 9<br />

Homepage Missing / 404 Error<br />

It is a common mistake to see a 404 Error when you haven’t created an actual home page. You also need to<br />

designate a home page in the settings reading settings of the admin menu.<br />

1<br />

2<br />

Click here to watch the video<br />

From the Dashboard, rollover Pages<br />

and click Add New.<br />

Title the page Home, select Default<br />

Template and click Publish.<br />

Note:<br />

Depending on the template, the<br />

template may be titled Homepage<br />

Template, Home Template or<br />

something else.<br />

You should be able to visit yoursite.com and see<br />

your homepage displaying correctly.<br />

Still doesn’t work?<br />

Chapter 9 | Bonus Topics 174<br />

1<br />

2


Bonus Topics 9<br />

Homepage Missing / 404 Error<br />

3<br />

4<br />

5<br />

6<br />

Still doesn’t work?<br />

Rollover Settings and click Reading.<br />

Select a static page and using the<br />

dropdown, select Home.<br />

Click Save Changes.<br />

You should be seeing something like<br />

this:<br />

Chapter 9 | Bonus Topics 175<br />

5<br />

3<br />

6<br />

4


Bonus Topics 9<br />

Plugin Broke My Website<br />

If after you install a plugin your website breaks, this section will show you how you can fix it. You’ll need to<br />

identify the problem as best you can and search for a fix. Sometimes all you need is simply uninstalling and<br />

then reinstalling the plugin that broke your site.<br />

The first thing to do is to uninstall and reinstall the plugin. Lots of times this fixes the problem but if the<br />

problem doesn’t fix or if you can’t access your website at all you will need to take additional steps.<br />

Another good starting point is your theme’s website. We’re using CyberChimps Business Lite, if you aren’t<br />

using Business Lite, you’ll need to adapt this step-by-step to whatever theme you’re using. (Search Google<br />

for your theme to find it.)<br />

1<br />

2<br />

Click here to watch the video<br />

Go to cPanel and login<br />

(your-website-here.com/cpanel).<br />

Click the File Manager Icon.<br />

Chapter 9 | Bonus Topics 176<br />

2<br />

1


Bonus Topics 9<br />

Plugin Broke My Website<br />

3<br />

4<br />

5<br />

Double click on the folder to the left of<br />

your website’s name.<br />

Double click on the folder to the left of<br />

wp-content.<br />

Double click on the folder to the left of<br />

plugins.<br />

Chapter 9 | Bonus Topics 177<br />

4<br />

5<br />

3


Bonus Topics 9<br />

Plugin Broke My Website<br />

6<br />

7<br />

8<br />

Click on the plugin folder to highlight it.<br />

Click Delete.<br />

Click Delete File(s)<br />

Go back to your website and see if the<br />

problem has been fixed.<br />

Chapter 9 | Bonus Topics 178<br />

6<br />

7<br />

8


Bonus Topics 9<br />

Back That Thing Up<br />

It’s important to backup your <strong>WordPress</strong> site. If you’re using <strong>WordPress</strong>, you’ll inevitably need to backup<br />

your site. <strong>WordPress</strong> occasionally releases upgrades, and in order to keep up-to-date, you’ll need to backup<br />

your <strong>WordPress</strong> site and its database.<br />

The easiest way to backup is by using a backup plugin.<br />

1<br />

2<br />

Click here to watch the video<br />

From the dashboard, rollover Plugins and<br />

click Add New.<br />

Type BackWpUp and click Search Plugins.<br />

Chapter 9 | Bonus Topics 179<br />

1<br />

2


Bonus Topics 9<br />

Back That Thing Up<br />

3<br />

4<br />

5<br />

Beneath BackWpUp, click Install Now..<br />

Click Activate Plugin.<br />

Click <strong>Create</strong> a Job.<br />

Chapter 9 | Bonus Topics 180<br />

3<br />

4<br />

5


Bonus Topics 9<br />

Back That Thing Up<br />

6<br />

7<br />

8<br />

9<br />

10<br />

Select Back Up to Folder.<br />

Enter your Email Address<br />

Click Save Changes.<br />

Click Run Now.<br />

On the Admin Menu, beneath<br />

backWPup, click Backups.<br />

Chapter 9 | Bonus Topics 181<br />

10<br />

8<br />

9<br />

7<br />

6


Bonus Topics 9<br />

Back That Thing Up<br />

11<br />

12<br />

Beneath the file, click Download.<br />

Save the file to your desktop.<br />

You can now rest assured your site is<br />

backed up!<br />

Note:<br />

Use the schedule feature to regularly<br />

backup your site (daily, weekly, etc.)<br />

Chapter 9 | Bonus Topics 182<br />

11


<strong>Create</strong> your own<br />

Wordpress<br />

Website Today!<br />

In this book you will learn how to create a<br />

professional website step by step with no<br />

step skipped. The lessons are so easy to<br />

follow people as young as 9 and as old as<br />

81 have successfully built a website using<br />

these instructions. even though it is easy<br />

to create a website it is also extremely<br />

professional. you will be using the same<br />

platform as professional web developers,<br />

fortune 500 companies, and celebrities<br />

like Jay Z and Katy Perry.<br />

over two millions lessons have been<br />

delivered in 210 countries with more<br />

than 10,000 people per day using the<br />

lessons to create their own website.<br />

Many chapters are accompanied by video<br />

tutorials to help you if you ever get stuck<br />

(but you won’t).<br />

About the Author<br />

Tyler Moore has been<br />

creating websites for<br />

over 14 years. Evolving<br />

changes in the economy<br />

and the job market has<br />

encouraged people to<br />

start their own business,<br />

learn how to make their<br />

own website, and become<br />

self-reliant.<br />

“I felt completely overwhelmed just<br />

thinking about building a website. BUT<br />

Tyler’s lessons had me building my own<br />

website in minutes and feeling totally<br />

empowered. THANK yoU!”<br />

Susannah Skye<br />

“By learning Tyler’s lessons he has just<br />

changed my life! They are a springboard for<br />

me; and now I feel confident enough to make<br />

this business idea I’ve always had a reality,<br />

thanks to his comprehensive website tutorials”<br />

Julie Trikoulis<br />

“I am so thankful that Tyler is creating these<br />

website lessons step by step. I follow<br />

along and I GeT IT. Thank you! I am using<br />

<strong>WordPress</strong> to practice and talk about loving<br />

what you do, I am enjoying every minute of it.”<br />

Quita Gulley

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!