Create Your Own Wordpress Website
Step by Step With No Step
Skipped! Tyler Moore & Sean Orfila
© 2013 Conutant Corp. All rights reserved. No part of this publication may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law. For permission requests, write to the publisher, addressed “Attention: Permissions Coordinator,” at the address below. 8644 Falmouth Ave, #12A Playa Del Rey, CA 90293
Contents INTRODUCTION: Building a Website What Can You Make? Overview Costs What You Are Going To Build
Chapter 1: Getting Your Website Name and Hosting 7 “Musts� When Choosing a Hosting Company Selecting Your Website Name and Hosting
Chapter 2: Installing & Setting Up Wordpress Installing Wordpress Logging into Wordpress Changing Your Password Turning Off Caching
Chapter 3: Building Your Website Installing Your Theme Adding Website Pages Editing Website Pages Deleting Your Comment Box Editing Your Homepage Changing Your Footer Changing Your Logo and Phone Number Deleting Pages
| Contents
3
Contents Chapter 4: The Sidebar Removing Sidebar Widgets Adding Content To The Sidebar Adding Facebook To The Sidebar Deleting The Sidebar
Chapter 5: Plugins Adding Content Visually To The Sidebar Working With Social Media Icons Adding Your Twitter Feed Adding a Contact Form Adding a Price Table Adding a Photo Gallery Maintenance Mode
Chapter 6: Creating Your Logo Using pixlr.com Photoshop and Gimp
Chapter 7: Website Success Tactics Tracking Visitors With Google Analytics Setting Up Your Blog Search Engine Optimization (SEO) Social Media
| Contents
4
Contents Chapter 8: Finding Help Tips For Searching Google Wordpress Forum YouTube Elance.com Craigslist
Chapter 9: Bonus Topics Setting Up Email Security Creating Another Website Getting a Domain Name From Godaddy Reinstalling Wordpress (Starting Over) Homepage Missing / 404 Error Plugin Broke My Website
| Contents
5
Introduction Building a Website
Introduction In this book we will show you how to create a website, step-by-step with no step skipped! You will be using the same technology to build your website as Fortune 500 companies, pop stars like Jay-Z and Katy Perry, and professional web developers. Following this guide, you will be creating a website from scratch without having to learn any code, fancy design programs or technical jargon. Our goal is to help as many people in the world create websites. We do this so people can build a business, start a non-profit, learn web development skills and get ahead in life. We have helped over 2 million people in more than 200 countries create websites from scratch! These lessons have helped people as young as 9 and as old as 81 create a website, start a business, and build something amazing.
What Kind of Websites Can You Make with this Guide? Following this course you can make many types of websites including business sites, blogs, photography websites, online stores, affiliate websites, membership websites and more. The possibilities are essentially limitless. Here are examples of the different websites you can build by following this step-bystep process:
| Introduction
8
Introduction Costs The total cost to start building a website is less than $25. This is absolutely amazing considering you could potentially reach millions of people online for less than the cost of dinner at a mediocre restaurant! Let’s say you were to hire a web developer to build your website: A decent developer will typically charge at least $1,500 for a basic website. It is not uncommon for businesses to spend from $2,000 to $10,000 on a website. You may be able to get a good deal with a special offer for $600, but what happens when you need updates in the middle of the night? This guide is going to make it so you don’t have to depend on a web developer, and it will save you money in the meantime. By following this guide, you’re saving yourself thousands of dollars! Not only are you saving money, you’re also teaching yourself a valuable life skill that will benefit you greatly in the future. It’s all up to you! Once you’re finished with this guide, you’ll have an in-demand tech skill under your belt. All of the costs in building a website are found in Step 1. After that, you won’t need any money—only time. Let’s break down your costs: You will register your website name (www.YourWebsite.com) so no one else can claim it. This costs about $15 per year.
Note: You will have to pay $15 each year to renew your website and keep it registered in your name. The next cost is hosting. Hosting is where you store your website information like pages, photos, logos and text. Without hosting, if you visited www.YourWebsite.com you wouldn’t see anything, it would just be a blank page. In order to have a website you need both a website name and hosting (a place to store all of your information). Hosting costs $10 per month.
Note: Hosting” is also known to as a “server” because it “serves” up a website to you. Your “website name” is also known as a “domain name”. In total: $15/per year for your website name and $10/per month for the hosting = $25 to get started! There are fancy designs and add-ons that you can purchase, but we don’t recommend them if you’re on a budget. Once your website is bringing in money, then you can step it up and spend on other tools.
| Introduction
9
Introduction Overview Before we begin, let’s make a game plan! Creating a website is a 4-step process. Everything covered in this guide is step-by-step, so I won’t leave you stuck wondering about anything. First let’s look at the steps and then we’ll go for it! Step 1: Acquiring a Website Name and Hosting First you’ll need to pick your website name (www.YourWebsite.com). Without a website name, there’s no website! If your website was about teaching people how to make websites, your website name might be www. LearnHowToCreateaWebsite.com, but most likely your website name is www.YourBusiness.com. The next thing we need to buy is hosting, remember hosting is where you store all your website’s information, like text and images.
Note: Text, images and videos are also known as content. Step 2: Installing Wordpress After we acquire our website name and hosting, the next step is installing Wordpress. Wordpress is the technology we will be using to create your website. Wordpress is a content management system (CMS), which is just a fancy way of saying it helps you manage your web content. Instead of having to learn computer code to make your website, all you have to do is add text, just like you would in Microsoft Word. WordPress has a 56.3% market share and is used by everyone from Jay-Z and Katy Perry to CNN to Forbes and many other Fortune 500 companies. Most professional web developers now also build their clients’ websites using Wordpress. Step 3: Building Your Website Next you will be building your website step-by-step. We will pick a design, add text and images, create photo galleries and more. This book is guided with screenshots, so we are going to show you how to make a specific website, but it’s easy to choose a different design and change the options as you see fit. Step 4: Getting People To Your Website There’s no point of having a website unless people actually see it! In this section we will show you how to drive traffic, show up in search results, and hopefully steer you clear of some common mistakes.
| Introduction
10
Introduction What You Will be Building You can build your website with a PC, Mac, or Linux computer. The website you are going to make will be responsive, which means the website will resize to fit on smart phones, and iPads. Because your website will be mobile friendly, it will display professionally on the iPhone, iPad, iPod, Android or any other handheld device you use to access the web. While learning about web development, you will simultaneously be building your website. You may need to tweak a few things to make the website yours, but you’ll be able to easily make changes. After acquiring your website name, hosting provider, and installing Wordpress, feel free to jump around to mix and match features until you have the perfect website. Here are the different sections of a website that we will be building in this guide:
Home This is what people are going to see when they first visit your website. It may not look exactly like what you want, but your website will be easy to change and customize to your discerning eye.
About Us We will also make an About Us page so that people can learn about you and your business.
| Introduction
11
Introduction Services You may not need this section but we will show you a cool way to display your services.
Gallery In this section we will show you how to make a photo gallery. Again, this section is optional.
Contact Here we will show you how to make a contact form so people can get in touch with you, and you’ll have those messages sent straight to your email inbox.
Ok, so you’re ready to go? Hopefully you’ve got a cup of coffee and you’re ready to teach yourself something amazing... Let’s get started by getting your domain and hosting.
| Introduction
12
CHAPTER 1 Acquiring Your Website Name and Hosting
7 “Musts” When Choosing a Hosting Company Selecting Your Website Name and Hosting
Acquiring Your Website Name and Hosting
1
Acquiring Your Website Name and Hosting There are thousands of companies on the web that offer domain names (www.your-domain-name.com) and hosting (where you store your website information). Below is a list of 7 Musts when choosing a web host: 1 - They must backup your website so you never lose your website information. 2 - They must have 99.9% uptime or more so your website is always online. 3 - They must have a money back guarantee. 4 - They must have a 1-click Wordpress installation. 5 - They must have great reviews online. 6 - They must have free live chat 24-hours a day. 7 - They must also offer phone support and email support just in case you need to speak to someone on the phone. We personally use HostGator (hostgator.com) and are recommending that you also use HostGator. Not only do they satisfy the 7-Musts, but the screenshots in this guide are based on HostGator. Using HostGator is by far the easiest option for following this guide. We’ve also found HostGator’s support and service to be outstanding throughout the years. If, for whatever reason, you choose not to use HostGator, then be sure adhere to the 7 Musts when choosing a hosting company. Also be advised that the screenshots and book lessons may be slightly different, so if you’re not going with HostGator, you’ll need to improvise on some sections. Let’s move on and acquire your website name and secure hosting for your new website!
Chapter 1 | Acquiring Your Website Name and Hosting
14
1
Acquiring Your Website Name and Hosting Selecting Your Website Name and Hosting http://www.youtube.com/watch?v=_uLi3fPXzKk
1
1
Go to hostgator.com.
2
Click Web Hosting.
3
Select a plan.
2
We recommend the Baby Plan because it’s the least expensive while also allowing you to host as many websites as you want. Essentially, you could have 100 websites on this plan (a business website, a personal website, a website for your mom, your friends, your dog, etc.) If you know for sure that you only need one website, then go with the Hatchling Plan. You can always upgrade if you need to create another site.
4
3
4
Select a billing cycle. We recommend paying monthly. HostGator allows different billing cycles. The longer you pay in advance, the less expensive it is. It doesn’t cost too much more to pay monthly and if HostGator one day doesn’t provide the excellent service it’s known for, you can switch to another hosting company without waiting a whole year.
5
Click Order Now.
5
Chapter 1 | Acquiring Your Website Name and Hosting
15
1
Acquiring Your Website Name and Hosting Selecting Your Website Name and Hosting 6
Next, type in your website name, also called a domain name, into the box.
Note:
6
HostGator will let you know if your site is available or not. They’ll also suggest variations of your domain name, such as YourWebsite.net or YourWebsite.org. We recommend buying a .com unless someone has already purchased your domain name and it’s not available. If that’s the case, create a variation!
Note: .com = commercial/business .net = network .org = recommended for non-profits .edu = school/university .gov = government
7
Confirm you’ve selected the plan and billing cycle that you want.
8
Create a username and security PIN for HostGator.
9
Enter your billing information (not the one in the screenshot!) If your country does not issue credit cards, you can pay with PayPal.
Chapter 1 | Acquiring Your Website Name and Hosting
7 8
9
16
Acquiring Your Website Name and Hosting
1
Selecting Your Website Name and Hosting 10
HostGator has additional Add-ons available for purchase. You can read over them, but we generally recommend against them.
Note:
10
SiteLock is checked by default. We recommend unchecking it to save money, but you can read about it and decide what you want for your website.
11
Next, enter a coupon code for a discount on your hosting. For 25% off, enter BookGator25 in the coupon code box.
Note: Not only do you save an extra 5%, but HostGator also gives us credit, which allows us to continue making tutorials available online for free!
12
Review all the information, note that you have: a 45-day money back guarantee, free phone support, free live chat and email support--and you’re getting 25% off instead of 20% off, right?
13
Lastly, check the box: I have read and agree to the terms and conditions of use.
14
Click Create Account.
Chapter 1 | Acquiring Your Website Name and Hosting
11
12
13 14
17
Acquiring Your Website Name and Hosting
1
Selecting Your Website Name and Hosting The next page is a confirmation page: print or write down your confirmation number and close the page. You should get an email within 5 minutes (it’s usually sent right away) confirming your purchase. The email contains important information for setting up your site, so go to your email inbox and open the email. You’re now ready to move forward with creating your site!
Chapter 1 | Acquiring Your Website Name and Hosting
18
CHAPTER 2
Installing & Setting Up Wordpress
Installing Wordpress Logging into Wordpress Changing Your Password Turning Off Caching
2
Installing & Setting Up Wordpress Installing and Setting Up WordPress In this chapter we are going to install Wordpress and set it up so we can begin creating the website.
By now you should have received an email from HostGator. The email you received contains important information, so print it out and keep is safe.
Installing Wordpress http://www.youtube.com/watch?v=rhOcsagzBnA
1
Login to your email inbox and find the email from HostGator.
2
Print, copy, or write down your Username and Password.
3
In the email, click the Your Control Panel link.
4
Type in the Username from the email.
5
Type in (or paste) the Password provided in the email.
3 2
4 5 6
6
Click Log In.
Chapter 2 | Installing & Setting Up Wordpress
20
2
Installing & Setting Up Wordpress Installing Wordpress 7
7
Scroll down until you see the Software/ Services section.
8
Click QuickInstall.
9
Find the Blog Software section and click Wordpress.
10
Click Continue.
11
8
9 10
Make sure that your website name is selected from the drop down list in the section called Install Wordpress. Also make sure the box to the right of your website name is left blank—this is VERY important!
Chapter 2 | Installing & Setting Up Wordpress
11
21
2
Installing & Setting Up Wordpress Installing Wordpress 12
Type in your details: • L eave Enable Auto Upgrades checked. • Type in your email address. • Type your Blog Title (probably your company name but don’t worry about this too much as we can change it later). • Choose an Admin User. This is the username you will use to login to WordPress. I am going to use my first name as my username, make sure to write it down. • Type in your First Name and Last Name.
13 14
15
12
13
Click Install Now. Copy, write down or print your Username and Password. This should also be emailed to you, but in case they don’t send it, you’ll need a copy.
14
15
Lastly, click the link to visit your website.
Note: New websites take anywhere from 2 - 3 hours to start working so if you don’t see anything just leave the page open, take a break, and come back in a few hours and try again. Most of the time everything works out perfectly, but if you’ve been waiting more than 24 hours and you still can’t see your website, do a live chat, email, or call HostGator’s technical support. Once you’ve got your website online, it’s time to start making changes!
Chapter 2 | Installing & Setting Up Wordpress
22
2
Installing & Setting Up Wordpress Logging Into Wordpress Before you login to your website, go to YourWebsite.com in your web browser and take a look. You should see a rather simple-looking sample website. Congratulations! You just made yourself a website and saved handfuls of money.
But let’s not stop here… let’s make your website amazing! To do that, we need to login to the back end of the website where we can add pages, pictures, info and edit everything to make it nice. First, let’s login.
http://www.youtube.com/watch?v=8tW6NQVxOC0
1
1
2
Go to www.YourWebsite.com/ wp-admin
Once you go to www.YourWebsite. com/wp-admin you will see a login page. Enter the Username and Password from the QuickInstall page (Step 14 in the last section).
Note:
2
If you’ve lost it, the Username and Password for your Wordpress site should also be in an email sent to you.
Chapter 2 | Installing & Setting Up Wordpress
23
2
Installing & Setting Up Wordpress Logging Into Wordpress
3
Ok… You’ve logged in! Now you’re looking at a page called the Dashboard. This is where the magic happens--it’s where you make all of the edits and changes to your website!
Chapter 2 | Installing & Setting Up Wordpress
3
24
2
Installing & Setting Up Wordpress Changing Your Password
The password that you were given when you installed your website is hard to remember. Let’s change it to something more memorable. http://www.youtube.com/watch?v=LS1uVjtGzyo
1
Click Users on the Admin Menu/Leftside tool bar.
2
Click on your Username.
3
Enter your new password in both boxes. Write it down, memorize it, and stash it somewhere safe.
4
Click Update Profile to save the changes. Great! When you go to YourWebsite. com/wp-admin (the Dashboard login page), use the new password, ok?
2
1
3 4
Next, we need to make the website editing-friendly.
Chapter 2 | Installing & Setting Up Wordpress
25
2
Installing & Setting Up Wordpress Turn Off Caching
Caching helps your website load faster by saving a quick-loading version of your website. The bad thing about caching is that it hides your website’s recent changes. We turn off caching so that when we make edits we can see the changes immediately. As you edit, you’ll be bouncing between the actual website and the Dashboard, so we want to be able to see changes on the site as we go. When we’re finished creating our website, we’ll turn caching on so that our website loads faster. http://www.youtube.com/watch?v=lP8WtOGicv0#t=23m51s
1
Click Settings
2
Click WP Super Cache.
3
Click the Easy tab.
4
Click Caching Off.
5
Click Update Status.
3 4 5 1 2
Now all updates will be visible on your website! If you are still having problems going forward, disable caching completely by doing the following:
6
Click Plugins
7
Find Wp Super Cache and click Deactivate.
Note: if you don’t see Wp Super Cache in the Settings section then you don’t need to worry about turning off caching because you don’t have a caching plugin (plugins are discussed in Chapter 5). If for some reason you are still having issues, delete the plugin. Chapter 2 | Installing & Setting Up Wordpress
6
7
26
CHAPTER 3 Building Your Website
Installing Your Theme Adding Website Pages Editing Website Pages Deleting Your Comment Box Editing Your Homepage Changing Your Footer Changing Your Logo and Phone Number Deleting Pages
3
Building Your Website Building Your Website
In this Chapter you will be building your website. We will be editing your homepage, adding additional pages, adding your logo and putting your phone number and contact info onto the page. Before we do anything, however, we need to add a new theme.
Installing Your Theme A theme is the design of your website. The great thing about WordPress is that there are 1000’s of free themes (designs) to choose from. This is what makes Wordpress very user-friendly because we no longer have to code sites from scratch! Because this tutorial is step-by-step, we will be leading you through installing a theme that works great. Just remember that you have access to thousands of themes, and once you install your first theme, you’ll be able to install just about any other theme! Once we change the theme, we immediately see that the overall design of the website will change completely from:
To:
Ready to push forward? Let’s install the new theme!
Chapter 3 | Building Your Website
28
3
Building Your Website Installing Your Theme 1
From the Dashboard, rollover Appearance and click Themes.
2
Next, click the Install Themes tab.
3
Type local business in the search box.
4
Click Search.
5
When you see the Local Business theme, click Install Now.
6
Click Activate.
2 3
4
1
5
6
Congratulations! You just installed your new theme! To checkout your site, type your site’s address (YourWebiste. com) into the address bar. It should look something like this: As you can see, you still have a home page and a sample page, but the overall design of your website has completely changed. Now let’s customize everything and make it look professional. Chapter 3 | Building Your Website
29
3
Building Your Website Adding Website Pages
Next we will add Pages to our website. We will create an About Page, a Services Page, and a Contact Page. If you need more or less pages, they are easy to create and delete as needed. For now we’ll simply add a blank page without content, and then we’ll customize it.
http://www.youtube.com/watch?v=j2LteGnXT1o First let’s add an About Page.
1 1
Click Pages on the Admin Menu.
2
Click Add New.
3
Enter a title for your page, we have titled our page About.
4
Click Publish. Go to YourWebsite.com and notice that the About page is on the Menu, but when clicking on the page, the page is mostly blank but for the title.
2
3
4
Next, let’s add some content.
Chapter 3 | Building Your Website
30
3
Building Your Website Editing Website Pages http://www.youtube.com/watch?v=j2LteGnXT1o
1
Click Pages.
2
Click About.
1
2
Adding Text 3
Click inside of the text box and begin typing. You create new paragraphs by hitting enter. Using this box, you can do most of the things that you’d do in Microsoft Word or any other word processing program.
4
For the rest of the sections, make sure the Kitchen Sink button is selected. Use your mouse to rollover each button above the text box to find Kitchen Sink.
Chapter 3 | Building Your Website
3
4
31
3
Building Your Website Adding Titles To breakup the text of your website, you may need to make different sections, or create titles. In geek speak, we call titles headings. The largest heading is Heading 1 and the smallest heading is Heading 6. To add a title or heading on the page:
5
Highlight the text you want to make a title.
6
Click the drop down box that says Paragraph and select Heading 1.
5
6
Chapter 3 | Building Your Website
32
3
Building Your Website Adding Pictures http://www.youtube.com/watch?v=DkW-X-4BLcI
7
Click your mouse wherever you’d like your picture to display. Here, I’ve clicked my mouse just before the Hello my name is Tyler sentence.
8
Click the Add Media button.
9
Click Select Files.
10
Find the file on your computer you want to add, select it and click Open (it might say ok).
8 7
9
10
Chapter 3 | Building Your Website
33
3
Building Your Website Adding Pictures 11
Now we will change the settings for the picture you’ve just inserted. 11a.) Where it says Alignment choose Left. This moves the image to the left of the text. You can also choose Right or Center. 11b.) W here it says Link To, choose None. This is so when somebody clicks on the actual image it doesn’t link to another page.
11 12
Note: By default, if someone clicks on the image it will go to a larger version of the image, but we don’t want that because we don’t want to lead visitors away from the page.
13
11c.) For Size choose Medium - 300 x 225.
12
Click Insert into page.
13
Click Update.
14
Now click View Page to see your new page!
Chapter 3 | Building Your Website
14
34
3
Building Your Website Adding More Options
Similar to Microsoft Word, with Wordpress you can add images, center text, add quotes, lists, spell check, bold and italic text, add colors, and much more. After playing with these options for a few minutes, I made this page:
Adding Links You can make text clickable so that any word or phrase will link to another page. This feature is called a link. Adding a link is easy. Let’s add a link to the homepage:
15
Highlight the text you want to link.
16
Click the link button.
17
On the pop-up, you’ll enter a URL to the page you want to link to. (http:// www.Add-The-Website-To-Link-To-Here. com) Don’t forget to include the http:// part of the URL.
18
Click Add Link and then click update. Now click view page and then click your link to surf back to the home page.
Chapter 3 | Building Your Website
16
15
17 18
35
3
Building Your Website Deleting The Comment Box
When you create a new page in Wordpress, it automatically includes a comment box. It’s good to know how to disable comments your pages. Naturally, you may not want visitors to comment on every page. Most of the sites that we build are 100% comment-free (unless we make a blog… which we show you how to do later), so let’s disable the comment box now: Note: If you choose to allow comments on any of your pages, there can be a high amount of spam, so disabling comment boxes is highly recommended. http://www.youtube.com/watch?v=VxTlMfVkL0o First go to Pages and select the page you want to edit.
1
1
On the top right of your screen click Screen Options.
2
2
Next check off Discussion, which makes a new box appear below.
Chapter 3 | Building Your Website
36
3
Building Your Website Deleting The Comment Box
3
Scroll down until you see the Discussion box and uncheck Allow comments and Allow trackbacks.
4
Click Update.
Now your page is comment-box free!
4
3
Chapter 3 | Building Your Website
37
3
Building Your Website Deleting The Sidebar
Wordpress, out of the box, includes a sidebar on the right side of your pages. The sidebar is highlighted here: When we disable the sidebar, it will only disappear for the actual page we are editing. Repeat these steps for each page that you don’t want to see a sidebar.
http://www.youtube.com/watch?v=C6zbFJTXtnE To disable the sidebar, first go to Pages and select the page you want to edit.
1
Under Templates select Full Width Page in the drop down box.
2
Press Update.
Go to your website and take a look at your page. It should now be a full width page without the sidebar!
Note: You may need to edit the page again to make it look good. Without the sidebar, there’s more space and your page might look different.
2
1
Chapter 3 | Building Your Website
38
Building Your Website
3
Editing Your Homepage Now we will edit the homepage so that it shows your content instead of the theme’s demo content. Let’s change the picture first and then move on to the footer and other elements.
http://www.youtube.com/watch?v=lP8WtOGicv0#t=29m41s
We’re going to be replacing the demo picture with our own, so we need our photo to fit. The easiest way to make it fit is to upload it to the Media Library and resize it using Wordpress. On the computer, things are measured in pixels. The picture on your homepage is 360 pixels wide by 280 pixels tall (360px by 280px). Width comes before height. In order to get a picture on our homepage that is the perfect size for the space, first we need a picture. Got a good one? Let’s upload it to the homepage.
Chapter 3 | Building Your Website
39
3
Building Your Website Uploading Pictures
1
On the left side of the admin menu, click Media.
2
Click Add New.
3
Click Select Files.
4
Select the picture on your computer you want to upload.
5
Click Open or Ok.
1 2
3
3 Sweet. You just uploaded a picture from your computer to your website! Now let’s edit the picture so that it fits perfectly.
4 5
Note: You only need to upload pictures in this way for your homepage. To upload a picture on any other page you would just upload it directly to the page.
Chapter 3 | Building Your Website
40
3
Building Your Website Editing Your Picture
6 6
Click Media.
7
Click on the picture you want to edit.
8
Click the Edit Image button.
7
3 8
9
Notice that the image dimensions are big (if you uploaded a big photo). Let’s make them smaller so that it will fit our page.
10
Click Scale Image.
Chapter 3 | Building Your Website
10
41
3
Building Your Website Editing Your Picture
11
Put 280 in the second box. This is for the height of the image.
12
Click Scale.
11
Now your image is smaller! But since the height is the only part that fits, let’s change the width by cutting off the sides of the image (cropping).
13
On the picture, click and drag a selection with your mouse.
14
Now adjust your selection until the width and height box says 360 : 280.
12
13 3
Note: Sometimes the box will be 1 or 2 pixels off, which is fine, just get as close to 360 : 280 as possible.
15
Click the Crop button.
16
Click Save.
14 15
16
Chapter 3 | Building Your Website
42
3
Building Your Website Editing Your Picture Now we have saved a smaller version of your image that fits perfectly with the homepage. Next, we’ll post the updated picture on the homepage.
17 17
Click Media.
18
Click the picture you just edited.
18
19 19
Where it says File URL, highlight it, then copy the entire file location.
3
Now we are going to paste the image into the homepage.
Chapter 3 | Building Your Website
43
3
Building Your Website Editing The Homepage 20
Click on Appearance.
21
Click on Theme Options.
22
Click on Home Page Top Settings.
23
Paste the File URL in the box (the one that you copied in Step 19).
24
Scroll all the way down and click Save All Changes.
20 23
21 22
24
Note: When you go to your homepage you should now see your photo on the front of the page.
Let’s change it now so that when we click the image, it will link to a page.
Chapter 3 | Building Your Website
44
3
Building Your Website Editing The Homepage 25
Go back to the Theme Options page. In the section: Top Feature Image Link, type about. This will link the image to the about page, so that when visitors click the image it will direct them to the about page.
Note: If you want the image to link to a different page, then type in that page name instead.
26 27
25 26
Top Feature Heading is where your headline goes. Top Feature Description: Enter in your description text. It will appear to the right of the image.
Note: Do you see the weird looking <br> tag that I added? That tells the computer to create line spaces (or line breaks). Use them wherever you need to create space!
28
Top Feature Button Text: What will your button say? We wrote: Learn More.
29
Top Feature Link: What page will your button link to? We typed about to link it to the about page.
30
Click Save All Changes.
27
28 29 30
Your website should now look something like this:
Chapter 3 | Building Your Website
45
3
Building Your Website Editing The Homepage Next letâ&#x20AC;&#x2122;s change the lower sections of the homepage.
31
Click Appearance.
32
Click Theme Options.
33
Click Homepage Feature Area.
31 32 33
In this screenshot, we see the text area that corresponds with the location weâ&#x20AC;&#x2122;ll be editing on the homepage.
Chapter 3 | Building Your Website
46
3
Building Your Website Editing The Homepage 34
35
Fill out the information, just like in the image, with the First Feature Heading as your title, your First Feature Description as the text below your title, and the First feature Link as the page you want it to link to when visitors click it. Then fill out the information for the Left Feature Heading and Left Feature Description.
34
Click Save All Changes.
35 Chapter 3 | Building Your Website
47
3
Building Your Website Editing The Homepage Next we are going to add a Youtube video for the Right Feature Section.
36
Go to Youtube.com.
37
Search for a video.
38
Click on the video you like.
39
Beneath the video, click Embed.
40
Under Video size: choose Custom size and put 300 in the first box. The second box will change automatically.
36
37
38
39 41
41
Highlight the code and copy it.
42
Paste it into the Right Feature Section.
43
Click Save All Changes.
40
42 43
Chapter 3 | Building Your Website
48
Building Your Website
3
Editing The Homepage Now your home page should look like this:
Chapter 3 | Building Your Website
49
3
Building Your Website Changing Your Footer
The footer of a website is at the very bottom (just like your feet). Most website footers include a message to your visitors, contact information, and a map. In this section weâ&#x20AC;&#x2122;ll create all three. Note: The footer shows up on every single page of your website.
http://www.youtube.com/watch?v=lP8WtOGicv0#t=54m20s Ready to change your footer? Me too-lets do it!
1
Click Appearance.
2
Click Widgets.
Chapter 3 | Building Your Website
1 2
50
3
Building Your Website Changing Your Footer 3
4
On the right side where it says First Footer Widget Area click the downarrow to the right. Next drag a text widget from the left-side Available Widgets box into the First Footer Widget Area.
Note: You drag by clicking and holding the mouse down then moving your mouse and releasing to the desired location.
5
Check the box marked Automatically add paragraphs so that Wordpress will create paragraphs rather then bunching the text together.
7
Click Save.
9
4
Next a text box should open up. Enter a title here and write something in the area below.
6
8
3
5
6
7
Click Close. Repeat Steps 1 - 8 for the Second Footer Widget Area. In this part we entered our contact information.
Note: Be sure to include Step 6 so your text is spaced correctly!
Chapter 3 | Building Your Website
51
3
Building Your Website Changing Your Footer Next letâ&#x20AC;&#x2122;s add a google map to our Third Footer Widget Area.
10 10
11
Repeat Steps 1 - 4 for the Third Footer Widget Area, and then enter Location as a title.
In your web browser, open a new page and go to: maps.google.com.
12
Enter your location in the search bar and click search.
13
Click the button that looks like a link (just like the one Wordpress uses).
11 12
13
14
Click the Customize and preview embedded map link.
15
Click the Custom button.
16
Where it says Width enter 280, where it says Height enter 140.
14
15 16
Note: You can also drag the map to center it or zoom in by clicking the + and â&#x20AC;&#x201C; bar.
17
Highlight the entire code and copy it.
17 Chapter 3 | Building Your Website
52
3
Building Your Website Changing Your Footer
18
19
Go back to your website Wordpress Widgets Area and paste the code into Third Footer Widget Area. Delete everything after the </ iframe> tag in the code.
18
19
20 Click Save. 21 Click Close.
21
20
Now check out your website. It should have the footer widget areas complete and the map should be displaying on your site.
Chapter 3 | Building Your Website
53
3
Building Your Website Changing Your Logo and Phone Number
Next we are going to change the Logo and Phone number on the website. If you have not yet created a logo, don’t worry. We’ll be covering that in Chapter 6 where I’ll walk you through creating a logo from scratch. Let’s enter a logo now.
http://www.youtube.com/watch?v=lP8WtOGicv0#t=51m37s
1 1
Click Appearance.
2
Click Theme Options.
3
Click General Settings.
4
Click Upload Image.
5
Select the logo you want to upload.
6
Click Open.
2
3
4
5
6
Chapter 3 | Building Your Website
54
3
Building Your Website Changing Your Logo and Phone Number 7
8
9
Under Top Right Contact Details type: Call Me: (310) 743-3190 (hopefully youâ&#x20AC;&#x2122;ll use your phone number, not mine).
7
Under Contact No. type your phone number, this is so that when people are using a mobile phone to view your webpage, it will call automatically from their phone.
8
Scroll all the way down and click Save All Changes.
9
Your website should now look like this: Pretty sweet huh?
Chapter 3 | Building Your Website
55
3
Building Your Website Deleting Pages You may have noticed the Sample Page on your website, just hanging out there on the menu. Letâ&#x20AC;&#x2122;s delete the Sample Page. Note: Follow these steps for any page you want to delete.
http://www.youtube.com/ watch?v=lP8WtOGicv0#t=1h02m25s
1
Click Pages.
2
Hover the mouse over the page you want to delete and then click Trash.
1
2
Note: If you accidentally delete something you can go to the trash and restore it.
Your website should now look like this: Notice the Sample Page is deleted from the menu.
Chapter 3 | Building Your Website
56
CHAPTER 4 The Sidebar
Removing Sidebar Widgets Adding Content To The Sidebar Adding Facebook To The Sidebar Deleting The Sidebar
The Sidebar
4
The sidebar is on the side of your website. First, let’s create a new page and checkout the sidebar. Remember how to make a new page? (Go to Pages then Add New). Let’s title this page Contact and put some information on the page. Once that’s done, we’ll go ahead and edit the sidebar. The sidebar is highlighted here: Note: Make sure to Delete The Comment Box (Chapter 3) so that people can’t comment on your new page! (Unless you want to allow comments.)
Chapter 4 | The Sidebar
58
4
The Sidebar Remove Sidebar Widgets Letâ&#x20AC;&#x2122;s clean up the sidebar and remove some of the widgets so that it doesnâ&#x20AC;&#x2122;t look so cluttered. http://www.youtube.com/watch?v=C6zbFJTXtnE
1 1
Click Appearance.
2
Click Widgets.
2
Note: You can drag widgets above and below each other to change the order on the page!
Next we are going to remove all of the widgets except for the Search widget.
3 3
Drag (holding the click) the Recent Posts from the right side to the center and drop it (releasing the mouse click), removing the widget from the sidebar.
Chapter 4 | The Sidebar
59
4
The Sidebar Remove Sidebar Widgets 4
Repeat Step 3 and remove the widgets that you donâ&#x20AC;&#x2122;t want. If youâ&#x20AC;&#x2122;ve removed the widgets like we did here, your sidebar should look like this: (only the Search widget is in place).
4
Now go back to your page. (It should look like this page, everything gone but the Search widget that we left in place!)
Chapter 4 | The Sidebar
60
4
The Sidebar Adding Content To Your Sidebar Next we are going to add some text to our sidebar, later in Chapter 5 I will show you how to add pictures and more. But for now lets just add some text so we can see the process.
http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h12m19s
1 1
Click Appearance.
2
Click Widgets.
2
3
3
Drag a Text widget from the left side to the Primary Widget Area.
Chapter 4 | The Sidebar
61
4
The Sidebar Remove Sidebar Widgets 4
Enter a title and some text in the box below.
5
Click Save.
6
Click Close.
4
6
5
Now your website should look like this: Pretty cool right? Just wait till next sectionâ&#x20AC;Ś weâ&#x20AC;&#x2122;re going to make the sidebar amazing!
Chapter 4 | The Sidebar
62
4
The Sidebar Adding Facebook To The Sidebar
In order to add a Facebook like box to your sidebar you need a facebook business page -- not just a regular page. Got a Facebook business page? Ok! Letâ&#x20AC;&#x2122;s get started!
http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h15m46s
1 1
In your browser, open a new window and go to www.google.com.
2
2
Search for Facebook Like Box and click Search.
3
3
Click on the first result.
4
Where it says Facebook Page URL enter in your Facebook business page url.
4
5
6
Uncheck Show stream, unless you want to show your stream (the latest posts from your wall)
5
Click Get Code.
6
Chapter 4 | The Sidebar
63
4
The Sidebar Adding Facebook To The Sidebar
7
Click Iframe.
8
Select all of the code and copy it.
9
Click Okay.
7
8
9 10 First repeat steps 1-3 of Adding Content To Your Sidebar, then go back to your widgets area and paste in the Facebook code. 11 In the code, anywhere it says width change it to 280 and anywhere it says height, change it to 500. This will make it so that it fits perfectly on the page.
10 11
12 Click Save. 13 Click Close. 13
12
Now your website should have a Facebook like box on it and should look something like this: Congratulations! You’re on your way to having a nice, professional website. Guess what? You’re also learning new skills AND you’re saving thousands of dollars. Don’t you feel good about that? Celebrate with a cup of coffee (or whatever you like) and get ready for more… Next, we’ll be learning about Plugins—and you’ll soon be making your site blast off! Chapter 4 | The Sidebar
64
CHAPTER 5 Plugins
Adding Content Visually To The Sidebar Working With Social Media Icons Adding Your Twitter Feed Adding a Contact Form Adding a Price Table Adding a Photo Gallery Maintenance Mode
5
Plugins Plugins Plugins are features that you can add to your website that are not included in the initial Wordpress installation. Wordpress is an open source platform, meaning people (developers) can freely add to Wordpress, helping create things for it and making it better. You can install plugins for everything from contact forms, to slideshow galleries, to spellchecking, to pop-up ads.
First, we will add a plugin that easily allows for adding pictures and links to the sidebar without any coding knowledge, then weâ&#x20AC;&#x2122;ll be installing social media plugins, a contact form, and checking out other amazing features available for our website. All for free!
Adding Content Visually to the Sidebar This plugin allows for editing the sidebar to add pictures, text, headlines, links and more.
1
2
From the Dashboard, use the mouse to rollover the Plugins section of the Admin Menu and then click Add New.
In the search box, type Black Studio TinyMCE and click Search Plugins.
Chapter 5 | Plugins
1
2
66
5
Plugins Adding Content Visually to the Sidebar
3
4
We now see a list of plugins. Find Black Studio TinyMCE (it should be the first one) and click on Install Now (click Ok on the pop-up).
Wordpress will now install the plugin on your server. Once itâ&#x20AC;&#x2122;s finished, click Activate Plugin. You should now see a plugin activated message.
5
3
Scroll to the Admin Menu, rollover Appearances and then click Widgets.
Chapter 5 | Plugins
4
5
67
5
Plugins Adding Content Visually to the Sidebar
6
7
8
On the widgets page, beneath Available Widgets, find the widget called Black Studio TinyMCE. Click on it and hold the mouse click while dragging it into the Primary Widget Area. Drop it just above the Text: Hello widget.
The widget options will then expand on your screen. Here you can create a title (mine says: Greetings!) and then click Add Media.
6
7
Now click Select Files and choose a good photo from your computer to add.
8
Chapter 5 | Plugins
68
5
Plugins Adding Content Visually to the Sidebar
9
Click Insert into post.
9
10
Alright, now that the photo is in the post, click Save. (You’ll see a little wheel spin around and that’s it, it’s done!)
10
11
11
Next, let’s see how it looks. Rollover your website’s name in the upper left hand corner and click Visit Site.
Chapter 5 | Plugins
69
5
Plugins Adding Content Visually to the Sidebar
12 12
Now click on the page titled Contact.
13
Now we have added a visual element to our sidebar! Feel free to experiment with different photos, or combinations of photos and text to find the right fit for your page.
13
Next, youâ&#x20AC;&#x2122;ll be integrating your social media accounts with your website!
Chapter 5 | Plugins
70
5
Plugins Adding Social Media Icons http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h15m46s
1
Go to the Plugins section of the Admin panel and click Add New.
2
Type Social into the search bar and click Search Plugins.
3
You should see a long list of available plugins.
2
1
There are many social media plugins available on Wordpress. Some are good and some don’t even work. The best way to find a great plugin is to rollover the stars. This rollover provides vital info—the number of reviews.
Note: 3
A plugin may have 5 stars, but only 3 reviews--which could be that the guy developing it gave himself a 5-star review, then had his Mom and Dad throw him a couple 5-star reviews. You can’t expect a plugin to work well if it has less then 5 reviews. Nerd Alert: Look for 3.5-star to 5-star plugins with at least 30 reviews. If thousands of people are using the plugin, you can rest assured it will function correctly!
4
5
A solid social media plugin that we like is the Acurax Social Media plugin. On the list, locate the Acurax Social Media plugin.
4
5
Beneath the plugin title, Click on Install Now.
Chapter 5 | Plugins
71
5
Plugins Adding Social Media Icons
6
7
Click Activate Plugin.
8
Ok! Look closely at your Admin Menu. You now have a new button named Acx Social Media Widget Settings. It’s usually located beneath the Settings tab. Found it? Click on it.
9
10
6
Wordpress will now install the plugin for you and tell you the plugin has been successfully installed.
We’re now looking at the settings page for our newly installed plugin. First, choose a Theme from the list (whichever style you like best—here I’ve chosen Theme 14) and set the Social Icon Size (the larger the size, the larger the icon).
7
9 8
Next, Enter your Twitter Username, Facebook Page, Google Plus URL, Youtube and any other social media you have for yourself/business. If you don’t have one of the services, just leave that space blank.
Note: Anything that asks for a URL, i.e. Youtube URL means that you’ll need to enter http://youtube.com/YOURNAME-HERE. Don’t forget the http:// or it won’t work! Chapter 5 | Plugins
10
72
deo
5
Plugins Adding Social Media Icons
11 11
After you’ve entered all of your social media pages, Click Update Acurax Social Icon
12
Wordpress let’s you know it’s saved your settings in a box at the top of the page, just below the banner advertisements. See it?
13
14
Scroll back over to your Admin panel and click Appearance – Widgets.
Find the Acurax Social Media Widget in the left side box and drag into the Primary Widget Area. (Or any area you want to display your social media links).
Chapter 5 | Plugins
12
13
14
73
5
Plugins Adding Social Media Icons
15
16
Click on Icon Align and click Center, or leave it set to default if you want.
15
Click Save (This time Wordpress doesn’t tell you it has saved, you’ll just see a little wheel spin).
16
17
17
On the widgets screen, find your website’s name in the top left corner, rollover it and then click Visit Site to go to the home page.
18 18
We’re now looking at the site.
Note: Icons will only show up on pages that are designated to display the sidebar/ widgets feature!
Chapter 5 | Plugins
74
5
Plugins Adding Social Media Icons
19
Review your icons. Do you like the way it looks? If not, go back to Step 9 and change the icon theme or go back to Step 15 and change the icon size.
20
Ok everything looks good, right? You’re cosmetically satisfied with your icons and your coffee is refilled. Now it’s time to make sure your links work! Click on each icon. They should magically transport you to the social media pages that you entered in Step 10.
19
20
Note: If you find an error on any of these icons, go back to Step 10 and double check the spelling on the URLs. If just one letter is wrong it won’t link correctly to the page!
Congratulations! Your social media plugin is now linking your social media sites to your website and you’re ready to move onward!
Chapter 5 | Plugins
75
5
Plugins Adding a Twitter Feed
The previous plugin provided users a link to our twitter page. The Twitter Feed plugin will actually add your latest tweets directly onto your website. With this feature, visitors will be able to read your most recent tweets without even leaving your site! This feature is great for people who use twitter regularly and want to keep visitors in the loop. It also adds up-to-the-moment content to your site.
http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h19m28s
1
Rollover the Plugins section of the Admin panel.
2
Click Add New.
3
Type mini twitter into the search bar and click Search Plugins.
Chapter 5 | Plugins
1
2
3
76
5
Plugins Adding a Twitter Feed
4
Find the Mini Twitter Feed plugin on the list and click Install Now.
5
After the plugin is successfully installed, click Activate Plugin.
4
5
6
6
Now click Appearances â&#x20AC;&#x201C; Widgets.
Chapter 5 | Plugins
77
5
Plugins Adding a Twitter Feed
7
Here we are again on the widgets page.
7
Look in the Available Widgets box and find the miniTwitter widget. Found it? Drag it into the Primary Widget Area.
8
In this example, I’ve placed it between the Acurax Social Media Widget and the Text:Hello area. Now let’s link your twitter account to the widget by entering your Username--mine is Conutant.
8
Note: entering “Conutant” in this space will add our twitter feed to your website, so please enter YOUR twitter username. Got it?
9
Click the next space down--the one that says Limit. This is the number of tweets you want to display on your page.
Note:
9
We’ve set the limit at 5 in this example, but if you want to include your last 10 tweets, enter 10. It’s up to you. Chapter 5 | Plugins
78
5
Plugins Adding a Twitter Feed
10
Leave the space for List and Query blank.
11
Next click Save, making sure that little wheel spins around.
12
13
12
10
Rollover your website’s name in the upper left hand corner of the screen and click Visit Site.
Ok, so we’re back on our home page. Notice there’s no twitter feed? That’s because our home page is not designated for displaying the sidebar! We did that on purpose.
11
13
Our Contact page, however, does display the sidebar, so let’s check our work by clicking Contact.
14
Your latest tweets should now be displaying in the widgetized area on your site. Notice that it’s below our Social Media widget and above our Hello text widget? (We learned about it in Chapter 4).
14
Congratulations! Your latest tweets are now integrated directly on your webpage! How easy was that? Send some tweets! Chapter 5 | Plugins
79
5
Plugins Adding a Contact Form Contact forms are great for business queries and lead generation. They also act as a shield from spammers looking to scour webpages for email addresses. It’s a way of allowing people to email you without you having to put your actual email address on your website. Basically a contact form allows visitors to fill out their email address, phone number, subject line or whatever else you desire. You can customize the form for your own needs.
For example, let’s say you have a law firm. When new clients typically come into the office, you hand them an intake form with a series of questions that allow you to gage whether or not to take their case. With this plugin, you can essentially recreate that intake form and have visitors on your website fill out the form. The form is then sent directly to your email inbox. For now, we’ll keep it simple by installing a basic contact form that we can launch on our site right away. http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h21m41s
1
Go to the Dashboard, click Plugins and click Add New.
2
Type Contact Form 7 into the box and click Search Plugins.
Chapter 5 | Plugins
1
2
80
5
Plugins Adding a Contact Form
3 3
Find the Plugin titled Contact Form 7. (It should be the first one on the list).
4
Click Install Now.
5
Click Activate Plugin.
4
5
6
We now have a new feature in our Admin Menu named Contact (Itâ&#x20AC;&#x2122;s usually found between the Comments button and the Appearances button in the left-hand Menu).
6
Click the Contact button.
Chapter 5 | Plugins
81
5
Plugins Adding a Contact Form
7
8
9
10
Ok, now we’re looking at the Contact Settings Page. This is where we can create different types of contact forms. We can essentially create as many as we want, but for now, we’ll just edit the sample form that was included with the plugin: Contact form 1 – Click on it.
7
Scroll down to the box titled Mail on the page. Make sure your email address is correct in the To: section.
Scroll back to the top of the page and highlight the code with your mouse. Right click your mouse and select Copy. (You can also use keyboard shortcut CTRL+C on Windows or Command+C on a Mac to copy the code)
8
9
10
Click the Save button.
Chapter 5 | Plugins
82
5
Plugins Adding a Contact Form
11 11
Next, go over to the Admin Menu and Click on Pages.
12
Now click on Contact.
12
Note: If you haven’t created a Contact page, go ahead and create one now by clicking Add New.
13
14
In the text area, right-click on the mouse and select Paste (You can also use keyboard shortcut CTRL+V or Command+V on a Mac). You should now see the code in the box. It’s the same code you copied from the Contact form 1 page in Step 11.
Chapter 5 | Plugins
13
14
83
5
Plugins Adding a Contact Form
15
Click Update. After the page updates, click on View page. The updated page will then load with your new contact form.
15
First make sure the form is there. If it’s not, check to make sure the code was copied correctly. If it’s there, we need to test it and make sure it’s working.
16
a) Fill out each area and click Send. b) Check your email (the one you entered in Step 8).
Note:
16
It is very common for Email services like Gmail, Yahoo and Hotmail to direct Contact Form messages directly to your Spam folder. 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/Junk folder? If so, open it and click “This is Not Spam” (Gmail) or find a way to direct these messages to your inbox. I usually mark them as important too. If it did go to your spam folder, repeat Step 19-20 until you’re certain the form is sending directly to your inbox. The last thing you want is to miss an important message from your website!
Chapter 5 | Plugins
84
5
Plugins Adding a Price Table Price Tables are neat features that allow visitors to compare different services at different prices. They are helpful for promoting higher-end options and offering a side-by-side comparison of the different services a business might offer. Follow these steps for installing a professional-looking price table. http://www.youtube.com/watch?v=lP8WtOGicv0#t=1h26m05s
1
From the Dashboard, rollover Plugins and click Add New
2
Type Price Table into the search box and then click Search Plugins
Chapter 5 | Plugins
1
2
85
5
Plugins Adding a Price Table
3
From the list, you can browse the different tables, but for now, letâ&#x20AC;&#x2122;s use the one titled Price Table.
4
Click Install now.
5
After the plugin is successfully installed, click Activate Plugin.
3
4
5
6
This will now bring us to the setup page for the plugin. Letâ&#x20AC;&#x2122;s build our price table by clicking on Add New in the Price Tables Tab of the Admin Toolbar.
Chapter 5 | Plugins
6
86
5
Plugins Adding a Price Table
7 7
8
First enter a Title for the table. For this example, We’re using Lessons but you’ll enter whatever it is you’re offering the world.
Skip the text box where you’d usually enter text and click Add Column.
8
9
For this example, let’s assume you’re teaching Typing. Click on Title and enter your first level of service, i.e. Typing Lessons.
10
Enter a Price, i.e. $90/hr.
11
Enter a Detail, i.e. Learn to Type Fast.
9
12
Enter the URL for your contact page.
11
10 12
Note: A URL must contain the http:// prefix or it won’t work! I.e. http://learnhowtocreateawebsite.com/contact/ Chapter 5 | Plugins
87
5
Plugins Adding a Price Table
13
Next, enter a call-to-action in the space called Button Text i.e, Contact Me.
14
Click on Features and add more info, as needed. You can create more Features below the first one by clicking Add. I’ve added one in this example.
Note:
13
14
Sometimes when you click Add, it will scroll to the top of the page. Don’t worry—your work is still there—just scroll back down to find it.
Chapter 5 | Plugins
88
5
Plugins Adding a Price Table 15
Click on Add Column and repeat Steps 9-15 for each service and price point you’re offering.
17
Note: In this screenshot I’ve written three columns, each with different levels of service. We simply repeated Steps 9-15 and now I’m good to go.
16
17
18
19
16
Once you’ve filled out your columns, click on Recommend to select your favorite service. This is typically the best price for the visitor and the one that best benefits everyone involved. Scroll to the top of the page and click Publish.
15
Next, use the mouse to highlight the shortcode. You’ll find it in a box under the publish button on the right side of the page. Highlight the code and right-click. Select Copy and copy the shortcode.
18
Chapter 5 | Plugins
19
89
5
Plugins Adding a Price Table 20
21
Click on Pages in the Admin Menu.
Select the Page you’d like to put your Price Table on. In this case, our page is called Services.
20
Note:
21
At this point you may want to create a new page for your price table. (See Chapter 2, Section 2: Adding Website Pages for help creating a new page).
22
Ok, so you’ve clicked on the page where you’ll be displaying your price table. (In my case, it’s called Services. First, let’s give our box some space. In the text box, hit Enter once, then use the mouse to right-click and select Paste, to paste the shortcode into the box.
24 23
Now click Update.
24
After it updates, click View page.
Chapter 5 | Plugins
22
23
90
5
Plugins Adding a Price Table
25 25
26
If youâ&#x20AC;&#x2122;ve done everything correctly, you should see a price table on your page!
Click on each of the buttons to make sure they link to the correct page. In this case, each of the Contact Me buttons link to the Contact page of my website.
26
Notes: You may need to go back and change the wording of your features in each column to get the buttons to line up. The length of the phrases on the Features area will alter the length of the columns. If you want the columns to line up, be sure to keep the character count of the features similar in each column.
Chapter 5 | Plugins
91
5
Plugins Adding a Photo Gallery Having a nice photo gallery is a wonderful asset for any website. Pictures do indeed tell a thousand words. Letâ&#x20AC;&#x2122;s add a nice looking gallery to make our site look super sweet.
http://www.youtube.com/watch?v=tUeQ-QUvRE4
1
2
From the dashboard, click Plugins and Add New.
1 2
In the box, type NextGen and click Search Plugins.
3
Find the NextGen Gallery Plugin on the list.
4
Click Install Now.
Chapter 5 | Plugins
3 4
92
5
Plugins Adding a Photo Gallery
5
After it has installed, click Activate Plugin
5
6 6
You will now find a new feature on the Dashboard called Gallery.
7
Click on Gallery and then Add Gallery / Images
8
Create a name for your Gallery and press Add Gallery.
Chapter 5 | Plugins
7
8
93
5
Plugins Adding a Photo Gallery 9
On the next screen, click Select Files and choose the photos you want to upload from your computer.
9
Note: by holding CTRL you can select multiple photos. Or you can RightClick and Select All to highlight all of the photos for upload.
10 11
12
11
Click on Choose Gallery and select the Gallery you created in Step 8. Click Upload Images. It may take a while to upload, depending on how many photos you’re uploading.
Select the Page or Post where you’d like to publish your gallery. In this case, I’ll create a Page by clicking Pages and Add New. I’m naming my page Gallery. (See Chapter 2, Section 2: Adding Website Pages for help)
13
10
12
13
In the Visual Editor of your page, click the NextGen Gallery box in the toolbar. The icon is just below the tab marked Visual.
Chapter 5 | Plugins
94
5
Plugins Adding a Photo Gallery
14
In the pop-up box, select the gallery you created in Step 8 and click Insert.
14
15
A shortcode will now be automatically inserted into the text box. Now click Update (or Publish, if it’s a new page).
15
16 16
After the page has been published, click on View Page to make sure the Gallery works. Congratulations! You now have a professional-looking gallery on your site… do you like the way it looks? If so, you can move on. If not, let’s change some options to alter the look of the gallery and make it look better.
Chapter 5 | Plugins
95
5
Plugins Adding a Photo Gallery
17
18
19
20
Hit Back in your browser. In the Admin Menu, rollover Gallery and click Manage Gallery.
17
18
Click on the gallery you created in Step 8.
Find the checkbox above the ID marking and click it to select all photos in your gallery. Click on Bulk actions, select Create new thumbnails and press Apply.
Chapter 5 | Plugins
20 19
96
5
Plugins Adding a Photo Gallery 21
Change the dimensions to 175 by 125 and click Ok.
Note: Depending on how many photos you have, it may take a minute to create the new thumbnails.
22
23
21
After Wordpress is finished creating the new thumbnails, rollover your websiteâ&#x20AC;&#x2122;s name in the upper left and click Visit Site. Click on the Gallery page (be sure to hit Refresh to see your changes if it was open in another tab/window while you resized the thumbnails).
22
Alright, so the thumbnails are now larger, the page looks better now, but letâ&#x20AC;&#x2122;s get rid of the View as slideshow text that displays at the top.
24
Go back to your dashboard. Click on Gallery and then click Options.
25
On the General Options page, click the Gallery tab.
26
Find the box titled Integrate slideshow and uncheck it.
27
Click Save Changes.
28
Now go back to your Gallery page and that text will be gone.
23
25
Note: There are many options available to make a highly customized gallery. Feel free to change the options as needed. Explore the options of the plugin to create a gallery that satisfies you! Chapter 5 | Plugins
26
24 97
5
Plugins Maintenance Mode
A maintenance mode plugin displays a page that shows visitors that your site is currently being updated. It blocks access to your site’s pages, posts and content, and displays what web developers call a splash page. This plugin is handy for people who want to build their site from start-to-finish before anyone can actually view their site. It’s also useful for experimenting with plugins and other features that may not work correctly right away. Let’s install a maintenance mode plugin and run through its features.
1
From the Dashboard, rollover Plugins and then click Add New.
2
In the search area, type Maintenance Mode and click Search Plugins.
3
Locate the Maintenance Mode plugin from the list and click Install Now.
2 1
Note: Remember that a good way to find a working plugin is to rollover the stars to see how many reviews it’s had--the higher the reviews and higher the stars the better.
4
3 4
After the plugin has been installed successfully, click Activate Plugin.
Chapter 5 | Plugins
98
5
Plugins Maintenance Mode
4
After the plugin has been installed successfully, click Activate Plugin.
5
Go to Settings and click Maintenance mode.
6
7
8
4
6
Ok, we’re now looking at our settings page for the maintenance mode plugin. First click on the button that says: Activated.
7
5
Next you’ll need to estimate how much time you’ll be in maintenance mode. Depending on how detailed your website is, go ahead and enter the time you think you’ll need to be finished. Here we’ve entered 3 days (You can always go back into the settings and change it). Scroll down to the bottom of the page and click Save Changes.
8 Chapter 5 | Plugins
99
5
Plugins Maintenance Mode
9 9
10
After you’ve saved your settings, rollover the space that says Howdy, whateveryour-name-is and click Log Out.
You’ll know the plugin is functioning correctly when it says Maintenance Mode is active.
10
11 11
To see what visitors will see when they visit your site, type your website’s URL into the address bar of your web browser and hit Enter.
Chapter 5 | Plugins
100
5
Plugins Maintenance Mode
12 12
To continue working on your site, go back to the address bar and enter the URL for your WP Login. It’s simply your website name with /wp-admin added to it: http://yourwebsite.com/wp-admin (See Chapter 2, Section 2 if you need help logging into your Wordpress dashboard)
Note: A nice feature about this plugin is that when you’re in maintenance mode, the plugin will tell you it’s active on the Dashboard. When you’re ready to show the world your awesome website, be sure to click deactivate to take it out of maintenance mode.
Congratulations! You can now put your site into maintenance mode while you make changes. Those web skills are getting sharp! Time to tackle more challenges. Let’s work on some logo design…
Chapter 5 | Plugins
101
CHAPTER 6
Creating Your Logo
Using pixlr.com Photoshop and Gimp
6
Creating Your Logo Creating Your Logo
A good logo is an important part of any marketing campaign. Having a unique logo sets you apart from the competition, appeals to visitors, and gives your website a professional look. In this chapter, we’ll show you how to create a logo from scratch that fits seamlessly into your Wordpress site. Note: The following steps are for the Local Business Theme, but the process is generally the same for other themes. In any case, you may need to improvise if you’re using a different theme. Custom logo sizes can vary from theme to theme, so be sure you find the logo’s dimensions in the theme you’re using before creating your logo! http://www.youtube.com/watch?v=9H6Qu5BCpyc
1
2
From the Admin Dashboard, click on Appearances and then Theme Options.
1
Look to the right of the Custom Logo box. Here, it says: Optimal size: 300px Wide by 90px Height.
Note: Custom logo size may vary from theme-to-theme.
2 3
Write 300px Wide by 90px High on a piece of paper and keep it nearby. You’ll need it soon.
Chapter 6 | Creating Your Logo
103
6
Creating Your Logo Creating Your Logo
4
Open a New Tab/Window in your web browser.
5
Note: To quickly open a new tab, use CTRL+T on a PC or Command+T on a MAC.
5
In the new window/tab type: pixlr.com and hit Enter.
6
Click Open Pixlr editor (Advanced).
6
7 7
Click Create New Image.
Chapter 6 | Creating Your Logo
104
6
Creating Your Logo Creating Your Logo 8 9
In the box marked Name, create a name for your logo, here I’m titling mine Logo. Change the Width to the sizes you wrote down in Step 3. In this case, 300px wide by 90px high.
10
Click the box that says Transparent.
11
Click Ok.
12
Now we have a 300x90 blank canvas. See the checkers? That means “clear” or “transparent” in the design world. The checkers are telling us that our graphic will be see-through and any space that isn’t used by text or art will just display the background of our website.
8 9 10 11
12
Ok, now it’s time to get creative! You have some options at this point. Maybe you work for a business that already has a logo. If so, you’ll need to integrate it into this box. I’m going to include extra steps now for people who don’t have a logo. If you have a logo designed and ready to go, you can skip to Step 19.
13
13
In your web browser, open a New Tab or New Window (You can use keyboard shortcut CTRL+T or Command+T) and go to: dryicons. com.
Chapter 6 | Creating Your Logo
105
6
Creating Your Logo Creating Your Logo
14 14
15
16
17
Now click Free Icons in the site’s menu.
So we’re now looking at a bunch of free icons that we can download. You’ll need to find one that suits you best. For this example, I’m going to use the beaker-looking image. Click on View/ Download to see the image set.
Now click on the icon to go to the image page.
14
16
Move the mouse over the largest image (this one says 128 x 128 px) and rightclick. Select Save Image As… then save the image to your desktop.
Chapter 6 | Creating Your Logo
106
6
Creating Your Logo Creating Your Logo
18
Ok, the image has downloaded and we’re ready to move on! Now close the dryicons.com window and go back to your Pixlr canvas.
19
18 19
20
21
22
23
On the Pixlr canvas page, select File (not the web browser’s File, there’s two, Ok?) and then select Open Image.
Refer to your desktop to find the file you downloaded in Step 17. Click Open.
21
Click on the imported logo (you’ll know it’s selected when it shows up in the Navigator box in the upper right corner of the workspace).
Select Edit and Select All in the Pixlr workspace menu. You’ll see a dotted line moving around the box when it’s selected.
23
Click Edit (in Pixlr) and then click Copy.
Chapter 6 | Creating Your Logo
107
6
Creating Your Logo Creating Your Logo
24
a.) Now click on your blank canvas.
24
b.) Click Edit and Paste.
25 25
26
27
Ok, so the image is on our canvas, but it doesn’t fit correctly. To make it fit, scroll up to Edit and click Free Transform.
The image will now have 6 blue squares. Hover the mouse over a corner square and hold down the Shift key while moving the mouse to size the image. (The shift key keeps the image proportional to its original shape, so don’t forget to hold shift!)
26
After you’ve got the size right and position of the art, click on the canvas and then click Yes to confirm the changes.
Chapter 6 | Creating Your Logo
108
6
Creating Your Logo Creating Your Logo
28
29
30
Next, we’ll add some text. Click on the A button in the box that titled Tools. Click on the canvas and type your business name. I’ve entered, Awesome Inc. You can change the text size, font and style here too. You can also move the text around to make it fit nicely.
29
28
30
Click OK when you’re finished.
Note: You can repeat Steps 28-30 to add text boxes for trademarks, slogans, etc.
31
32
31
Ok, so you’ve spent some time making a good logo that suits your needs and you’re ready to publish it. Click File (the Pixlr File not the browser’s) and then click Save.
Name the file Awesome-Logo.png or whatever filename you choose.
Note: You may need to add .png to the end of the filename. Just double check the file and make sure it is your-filename.png and actually has the .png extension or Wordpress may not accept it.
33
Save the new logo to the desktop.
Chapter 6 | Creating Your Logo
32
33
109
6
Creating Your Logo Creating Your Logo 34
Ok, our logo is now ready to go onto our Wordpress site. Click on Appearances and then Theme Options.
35
Beneath the Custom Logo box, click Upload Image.
36
Go to your desktop and find the logo file and click Open.
37
The logo will upload and display beneath the Custom Logo box. Everything looks good right? Now scroll down and click Save All Changes.
38
Alright! Now go to your website by rolling over your website’s name in the upper left corner and clicking Visit Site.
39
Ok so we’re back on our site. I see that our logo is implemented into the header. So we’re all good. Remember, the logo is a beacon on the site, it’s prominently displaying on each page, so it’s important that you spend some quality time creating a good logo.
38
34
35
37
38
Remember, if something doesn’t look right with your logo, repeat this stepby-step and make something that satisfies you. Experiment. But if you feel overwhelmed by design, don’t be afraid to reach out to a professional (we’ll be covering that later). Chapter 6 | Creating Your Logo
110
Creating Your Logo
6
Gimp
Gimp is a free program (available via gimp.org) with so many features that it deserves its own step-by-step book. The good thing about Gimp is that itâ&#x20AC;&#x2122;s free. Gimp includes a painting feature that you can use to create graphics. Itâ&#x20AC;&#x2122;s packed with additional features such as Brush, Airbrush, Pencil, etc., that you can also use to create graphics for free.
Gimp is especially excellent for photographers and people looking to enhance their photos and art. Like its larger, more expensive cousin Photoshop, this program can do many things to make photos look amazing, create art, creaete a logo and carry out basic design.
Gimp usually allows you to open an unlimited number of pictures at once, so it also makes bulk editing of art and photos smooth. Gimp features a very thorough step-by-step guide that is totally free and available on their website.
Chapter 6 | Creating Your Logo
111
Creating Your Logo
6
Adobe Photoshop Recently, Adobe has made giant strides to make its software available to a wider audience. What was once a $700-$900 investment for design professionals has now become accessible to the everyday design enthusiast on a tight budget. As of this writing, Adobe offers access to its Creative Cloud for $49.99 a month. Creative Cloud goes beyond Photoshop and gives users access to all of their Adobe desktop programs. This is a huge value compared to what we once paid for these programs! Adobe’s products have been the industry standard for photo editing, illustration, video editing and print design for over 20 years. Almost every magazine, newspaper, billboard, bus stop advertisement, window display and just about every label on every product in the supermarket was designed using an Adobe program. That said, if you’re looking to make a life for yourself as a design professional or web developer--learning Adobe is an absolute must. If, however, you’re looking to keep it simple and D-I-Y, forking out the $50 a month probably isn’t the best way to go. Note: if you dive into learning Adobe Photoshop, you will be adding greatly to your bag of skills. Wordpress and Photoshop knowledge can land you a decent job, if that’s something your heart desires. Companies do hire people with Abobe Photoshop and Illustrator knowledge. The other option is to hire a design professional to help you with your project. (See Chapter 9: Finding Help)
Chapter 6 | Creating Your Logo
112
CHAPTER 7
Website Success Tactics
Tracking Visitors With Google Analytics Setting Up Your Blog Search Engine Optimization (SEO) Social Media
7
Website Success Tactics Opening a Gmail Account
Already using Gmail? Awesome! You can skip this section. If not, you’ll need to open an account now. It’s free and is, by far, the best email service available. By signing up for Gmail, you’ll also have access to the rest of Google’s powerful free tools. Let’s get to it… Click here to watch the video
1
1
Go to gmail.com
2
2.) Click Create an Account.
3
Fill out all of the required information (write your password down so you don’t forget) and then click Next step.
2
3
Note: Google may ask to confirm your phone number.
Chapter 7 | Website Success Tactics
114
7
Website Success Tactics Opening a Gmail Account
4
4.) On the page asking for a photo, click Next step (You can add one later).
4
5
6
5.) On the Welcome screen, click Continue to Gmail.
Congratulations! You’ll be using this account to access some amazing tools that Google provides to web developers. Click Take Tour to learn all about your Gmail account. When you’re ready to move onwards, upwards and forward— let’s setup Google Analytics…
Chapter 7 | Website Success Tactics
5
6
115
7
Website Success Tactics Tracking Visitors With Google Analytics
Google Analytics is a very powerful tool for gaining insight into the people who visit your page. It tells you the number of visitors, what visitors click on which pages, how long visitors stay on each page, what country they’re visiting from and their general location, what type of browser they’re using and whether or not they’re using a smartphone or a computer—and this is just the tip of the iceberg. Google Analytics can crunch data and generate reports—and indeed there are teams of people who dedicate 40-hour work-weeks to analyzing this stuff. Most of us just need the basics, and this section will show you how to install a basic plugin that will integrate Google Analytics right into your Wordpress dashboard. Click here to watch the video
2 1
Go to google.com/analytics
2
Click Create an Account.
3
Sign in with your Gmail login and Password.
4
4.) On the pop-up, click Sign Up.
Chapter 7 | Website Success Tactics
3
116
7
Website Success Tactics Tracking Visitors With Google Analytics 5
a.) Make sure you’ve selected Web site. b.) Select Universal Access. c.) Enter your Website Name. d.) Enter your Website’s URL. e.) Select an Industry Category.
5
f.) Make sure your time-zone is set correctly. g.) Enter an Account Name. h.) Read over the options and leave the boxes check or uncheck them as needed. (I’ve unchecked them).
6
Click Get Tracking ID.
6
7
Read the Terms of Service and, if you agree, click I Agree.
7
Chapter 7 | Website Success Tactics
117
7
Website Success Tactics Tracking Visitors With Google Analytics 8
8
You should now see a page that looks like this:
9
Close the Google Analytics tab and go back to your Wordpress dashboard.
10
9
10
From your Dashboard, rollover Plugins and click Add New.
11 11
In the search box, type analytics and click Search Plugins.
Chapter 7 | Website Success Tactics
118
7
Website Success Tactics Tracking Visitors With Google Analytics 12
Find the plugin titled Google Analyticator and click Install Now.
Note: At the time of writing, this plugin had recently been revamped and updated to the latest versions of Wordpress. It wasn’t working for a while, but has recently been redesigned with the help of the Google Team. It’s currently the easiest to use, and probably the best Analytics plugin available.
13
14
Click Activate Plugin.
Once it’s activated, rollover the Settings tab in the Admin Menu and click Google Analytics.
Chapter 7 | Website Success Tactics
12
13
14
119
7
Website Success Tactics Tracking Visitors With Google Analytics
15
Follow the instructions on the page by clicking Click Here.
16
Sign in with your Google Account (AKA Gmail account).
17
15
16
After youâ&#x20AC;&#x2122;ve signed into your Google Account, there will be a pop-up requesting permission, click Allow access.
17
Chapter 7 | Website Success Tactics
120
7
Website Success Tactics Tracking Visitors With Google Analytics
18
Copy the code by using your mouse to highlight the code, right-click on the mouse and select Copy from the list. Or hit CTRL+C (AppleSign+C on a Mac) to copy the code.
19
On the the Activate Google Analyticator page, click on the box and hit CTRL+V to paste the code.
20
Click Save & Continue.
18
19
20
21
21
You can leave everything on the options page set to default. Your page should look something like this:
Chapter 7 | Website Success Tactics
121
7
Website Success Tactics Tracking Visitors With Google Analytics 22
Navigate back to your Dashboard page and check out the Google Analytics Summary for information about your latest visitors!
Note: You’ll need to give it some time to track your visitors. Let it analyze for a couple days. Come back to it in a few days to make sure visitors are actually being tracked and everything works. You can also click on View Full Stat Report on the Google Analytics Summary tab and it will take you to your complete Google Analytics site.
22
Congratulations! You’ve just installed a very powerful tool on your Wordpress site and you’ll be gaining all kinds of vital data! Anytime you visit your dashboard page, you’ll be able to check in and see how many visitors you’ve had.
Chapter 7 | Website Success Tactics
122
7
Website Success Tactics Setting Up Your Blog
Wordpress started out as a blog. A blog is different than a page because a blog is updated regularly with posts. A blog is usually about a specific subject. For example, a personal trainer would have a blog all about fitness training. Blogs are usually organized by date, so visitors see the newest posts first. Your blog should provide value to your visitors so people will be attracted to your blog, website, and business.
Note: A blog is short for web log. Blogging became popular in the early 2000s, and has since become a household name by major media outlets like CNN. Blogging is one of the major ways to draw people to your website. Let’s get started…
1 2
From your Dashboard, rollover the Pages tab and click Add New.
1
Title your page Blog.
Note: If you don’t like Blog as a title for your page, you can use something like: News, Happenings, Writings, Articles, Info, Rants, or whatever. You can change the name at any time.
3
In Page Attributes click the box under Template and select Blog Page.
2
Note: Sometimes themes do not have a blog template! If that is the case just follow steps 4 – 8.
4
Click Publish.
4
3
Note: Leave the text area blank. Chapter 7 | Website Success Tactics
123
7
Website Success Tactics Setting Up Your Blog
5
After youâ&#x20AC;&#x2122;ve published the page, rollover Settings and click on Reading.
5
6
7
Here, we want the front page to display A Static Page.
6
7
Set the front page to About and set your posts page to Blog (or whatever page you created in Step 2). Now anytime we create a post, it will publish to the Blog page!
8
Click Save Changes.
9
After saving, rollover the Posts tab and click All Posts.
8
11 10
Rollover the Hello World post and click Trash.
11
Next, click Add New.
Chapter 7 | Website Success Tactics
10
124
7
Website Success Tactics Setting Up Your Blog 12 13 14
Ok, here is where we create our blog posts. Create a title for your post. Before typing, click The Kitchen Sink. Ok, now it’s time to get creative… this is where you’ll be creating magic. Feel free to explore the different options available. Need inspiration? Quote someone to get motivated! Find a good quote and use copy and paste to add it to the text box.
12 15 13
14
14a.) Highlight the quote and click Blockquote.
Note: You’ll need to click “Blockquote” again to turn off blockquotes.
15
Add a photo by clicking Add media.
16
Here you can select a photo from previous uploads, or drag and drop photos from your computer to upload a picture.
17
16
Select the photo(s) you want add to the post. 17a.) Next to Link To be sure to select None. 17b.) Select the size you’d like to use.
18
Click Insert into post.
Chapter 7 | Website Success Tactics
17 18 125
7
Website Success Tactics Setting Up Your Blog
19 20
20
When you’ve finished creating your post, click Publish (or Update).
19
After publishing, click View Post.
21 Congratulations! You just published your first post! Let’s clean this page up, and get rid of the comment box.
21
Rollover Your Website’s Name in the upper left corner and click Dashboard.
22 22
Click Posts.
Chapter 7 | Website Success Tactics
126
7
Website Success Tactics Setting Up Your Blog
23
Under your post, click Quick Edit.
23
24
Uncheck the Allow comments and Allow pingbacks boxes and click Update.
25
Under your new post, click View.
Note:
24
25
Ok, now our page looks cleaner and the comment box is gone! We’re almost done. Notice that our blog page isn’t automatically added to our site’s menu? We’ll need to add it manually so visitors can easily find it. Chapter 7 | Website Success Tactics
127
7
Website Success Tactics Setting Up Your Blog
26
26
Rollover Your Websiteâ&#x20AC;&#x2122;s Name in the upper left corner and click Dashboard.
27
Rollover the Settings tab and click Menus.
27
29 28
29
In the Pages box, find your Blog page (the one you created in Step 2), and click Add to Menu. Drag the page to the position you choose and click Save Menu.
28 Chapter 7 | Website Success Tactics
128
Website Success Tactics
7
Setting Up Your Blog 30
Click on Your Website’s Name in the upper left corner and checkout your new menu. Notice it includes a link to your blog page, which is where your posts will be posted. You’re becoming a blackbelt in Wordpress! Following this book, you’ve setup your Wordpress site to unlock a very powerful aspect of the Wordpress platform: SEO. Ready to become a true Wordpress professional? Next, we’ll be implementing Search Engine Optimization.
Chapter 7 | Website Success Tactics
129
Website Success Tactics
7
Search Engine Optimization (SEO) What is SEO? SEO may sound fancy but it’s actually pretty simple. The overall goal is to get your site to the first page of a Google search (or Bing, or Yahoo, etc). When you search for something in a search engine like Google you want to be one of the first results because if you’re the 100th result no one is going to find you! Search Engine Optimization is the process of ranking your website high in the search engines so that people can find it and visit your website. SEO is concerned only with organic (AKA un-paid) search engine results. It shouldn’t be confused with paid search engine advertising. Let’s assume that you own a sailboat and offer harbor cruises and boat tours. Your business is based in Newport Beach, CA and it’s called “SoCal Pirate Tours.” Ideally, if your site is optimized for SEO, anyone who searches: Pirate Tour, Pirate Boat Charters, Boat Charter Newport Beach, Pirate Tour Socal and variations of these search strings will see your site on the first page of the search results. At the time of writing, SEO is an $853 million dollar per year industry. People pay big bucks to show up on the first page of the search results. By following this section, you’ll not only be learning how to practice SEO (a valuable skill as you can see) but you’ll also be saving yourself thousands of dollars! You also have the potential of earning amazing amounts of business by following this guide. Excited? Let’s get started…
Chapter 7 | Website Success Tactics
130
7
Website Success Tactics
Downloading the SEO Plugin and Optimizing Your Site
1
Go to your Dashboard. Rollover Plugins and click Add New.
2
In the box, type Wordpress SEO by Yoast and click Search Plugins.
3
Find the Plugin titled Wordpress SEO by Yoast and click Install Now.
Chapter 7 | Website Success Tactics
1
2
3
131
7
Website Success Tactics
Downloading the SEO Plugin and Optimizing Your Site
4
After it has installed successfully, click Activate Plugin.
Chapter 7 | Website Success Tactics
4
132
7
Website Success Tactics Setting the SEO-friendly Permalink Structure
A permalink is a fancy way of saying URL (http://yourwebsite.com/this-is-a-permalink) Out of the box, Wordpress uses a default permalink structure that looks like this: http//yourwebsite.com/?p=128. The problem with the default structure is that itâ&#x20AC;&#x2122;s not search friendly. A far better choice is the postname setting. Using the postname structure is crucial to creating a website that easily readable by both humans and search engine robots.
1
From the Dashboard, rollover Settings and click Permalinks.
1
2
Click the button selecting Post Name, then click Save Changes.
3
After it has saved, click Save Changes again.
2
Note: Sometimes you have to save the permalink structure twice, so save it twice to be safe!
Chapter 7 | Website Success Tactics
3
133
7
Website Success Tactics Writing SEO-Friendly Posts SEO writing is an art. The key to writing SEO-friendly blog posts is to actually create relevant, engaging content based on the keywords you identified in the previous section.
Repeating the keyword over and over while writing paragraphs that make no sense will actually hurt your Google rankings. You have to be honest about your content and ideally your content should inform and educate visitors. Break out that list of keywords you compiled in the last section, you’ll need it. This is where the magic happens… so let’s get to work!
1
Go to your Dashboard, rollover Posts and click Create New.
Chapter 7 | Website Success Tactics
1
134
7
Website Success Tactics Writing SEO-Friendly Posts 2
Scroll down to Focus Keyword and enter a keyword from your list.
3
Create an SEO Title be sure to include all the words from your Focus Keyword.
4
5
6
Write an interesting and engaging Meta Description. Be sure to include the focus keyword in the meta description.
5
6
Compose your blog post. Be sure to include your focus keyword throughout your post. Use variations of the phrase and words to mix it up and give it a natural feel. When youâ&#x20AC;&#x2122;re satisfied with your post, hit Publish.
Note: If you want to keep your post hidden until its perfect, scroll over to Visibility: Public, click Edit and select Private, then click Ok.
Chapter 7 | Website Success Tactics
2
3 4
135
7
Website Success Tactics Writing SEO-Friendly Posts When you publish your page, the SEO plugin will analyze your post and make recommendations on how to improve your ranking. Ratings are expressed by red, orange, yellow, or green buttons-your goal is to get a green button for every post!
7
Click on the Page Analysis tab and address any red and orange dots. A red dot is a critical issue that should be addressed immediately. Orange and yellow issues should also be addressed. You will find an overall rating in the Publish box beside the SEO table. Repeat Steps 1-7 for each keyword.
7
This section is where the bulk of your time from now on should be dedicated. Time working on SEO writing is time well spent—imagine the amount of business you tap into by hitting that green button mark! (The keyword tool tells you) Bounce between the keyboard tool and this section regularly to guide you through the writing process. Set the goal to spend time on SEO writing every day. In 90 days you will see a sizable increase in traffic to your site (remember you’ll watch how many visitors come to your site since you’ve installed Google Analytics). Note: The more content you post—the better. Search engines love honest, informative and descriptive content. Put passion into your writing and you will be rewarded with visitors. Since you’ve put your heart into it, those visitors will then be excited, informed, educated and willing to give you business! Do your best on SEO writing and you’ll likely see big returns on your investment. Good luck! Chapter 7 | Website Success Tactics
136
7
Website Success Tactics Setting Up Google Webmaster Tools
Setting up Webmaster Tools helps Google index your site. It allows for seamless indexing by “the robots” and helps your site display cleanly in search results. This section may seem technical, but stick to these steps and your site will begin displaying higher in the search results. Click here to watch the video
1 1
2
3
Open a new window/tab in your web browser. Go to: google.com/webmasters/tools
2
Sign in with your Gmail login and password.
Add your website’s address into the bar (without the http://) and click Add a Site.
3 3
Chapter 7 | Website Success Tactics
137
7
Website Success Tactics Setting Up Google Webmaster Tools
4
Now youâ&#x20AC;&#x2122;ll need to verify that you own the site. The simplest way to do this is to download the HTML file to your computer and then upload it. To do this, click on Alternate methods.
5
Find the option for HTML file upload and click the button beside it.
6
Click on this HTML verification file and download the file to your desktop.
5
4 6
7 7
8
Open a new tab/window in your browser and go to your Cpanel. (yourwebsite.com/cpanel) Log into your Cpanel using the login you used to install Wordpress in Chapter 2.
8
9
9
On the list, find the File Manager icon and click it.
Chapter 7 | Website Success Tactics
138
7
Website Success Tactics Setting Up Google Webmaster Tools
10
Find the folder containing your website. Itâ&#x20AC;&#x2122;s whatever your site is named--in my case, itâ&#x20AC;&#x2122;s LearnHowtoCreateaWebsite.com. Double click on the folder to open it in File Manager.
11
Click the Upload files icon.
12
Click Choose File and find the file you downloaded to the desktop in Step 6.
13
Go back to google.com/webmasters/ tools and click Verify now.
Chapter 7 | Website Success Tactics
10
11
13
139
7
Website Success Tactics Setting Up Google Webmaster Tools
14
Click Verify.
14
15
15
Great! Now you should be seeing something like this: 15a.) Click Continue
16 16
Click on Webmaster Tools.
Chapter 7 | Website Success Tactics
140
7
Website Success Tactics Setting Up Google Webmaster Tools
17 17
18
Click Add A Site.
Type the other variation of your website. In my case it’s www. learnhowtocreateawebsite.com I’ve chosen to leave out the www prefix, but I still need to verify ownership of the domain with the www)
18
Note:
19
When you buy a domain, you actually own both www.yoursite.com and yoursite.com. You must verify both versions through Google.
19
Click Continue.
20
Click Verify
Note: You don’t need to upload the file twice. It’s already uploaded! If Google recommends another verification method, click Alternate methods and select HTML file upload and click Verify. Chapter 7 | Website Success Tactics
20
141
7
Website Success Tactics Setting Up Google Webmaster Tools
21
You should now see this page:
21
Click Continue.
Ok, weâ&#x20AC;&#x2122;re almost there!
22
In the toolbar on the Webmaster Tools page, click Configuration and then click Settings.
23
Set the preferred domain to the one that matches your Wordpress site. (Mine is learnhowtocreateawebsite.com)
24
Click Save.
22
23 24
That little bit of work is going to go a long way in helping search engines easily find your site! We call it keeping the robots happy.
Chapter 7 | Website Success Tactics
142
7
Website Success Tactics Creating a Sitemap
A sitemap is just what the name implies. Sitemaps help visitors find their way around, but that’s not why we’re creating one. Search engines love sitemaps. It helps them organize the content of your site and index the text in your site. Creating a Sitemap and submitting it to Webmaster Tools will give Google a jump on how to index your site. Follow this step-by-step and you’ll be setting more groundwork for seeing excellent organic search results.
Click here to watch the video
1
Go to your Wordpress Dashboard.
2
Rollover the SEO tab in the Admin Menu and click XML Sitemaps.
3
Click on the XML Sitemap button.
2 1
3
3a.) Keep this page open.
Chapter 7 | Website Success Tactics
143
7
Website Success Tactics Creating a Sitemap
4
5
6
Open a new window/tab and go to: google.com/webmasters/tools
4
Sign in (You may be signed in already if you followed the last sectionâ&#x20AC;&#x2122;s step-bystep).
Click on your website (the site set to Wordpress settings). In my case itâ&#x20AC;&#x2122;s learnhowtocreateawebsite.com.
Chapter 7 | Website Success Tactics
6
144
7
Website Success Tactics Creating a Sitemap
7
7
Click Optimization and then Sitemaps.
8
You should see this page: Leave it open.
9
Go back to your XML Sitemap tab/ window. Highlight the section shown here and copy it to the clipboard (CTRL+C or Command+C on a Mac):
Chapter 7 | Website Success Tactics
8
9
145
7
Website Success Tactics Creating a Sitemap
10
Paste the code into the box (CTRL+V or Command+V on a Mac).
11
Click Submit Sitemap. Then click Refresh Sitemap List
12
Ok, your page should look like this and show that your sitemap is Pending. You can close the Webmaster Tools window now.
10 11
12
Note: It usually takes a few hours or sometimes a day or more to have your sitemap read by the robots. In the meantime, keep moving forward on your SEO goals.
Chapter 7 | Website Success Tactics
146
7
Website Success Tactics Using Google’s Keyword Tool SEO is all about keywords. Keywords are the words and phrases that people type into the search bar at google.com. In order to optimize your site, you need to gain insights into what exactly people are searching when they visit Google. Then you can tailor your posts to those keywords.
Google’s Keyword Tool is a tremendously powerful tool, and we use it to guide us during our next stage of SEO—writing blog posts. This step essentially gives us the guidance needed for the next section. Let’s find out what people are searching!
1
1
2
3
Open a new tab/window and go to adwords.google.com/keywordtool
Think about your potential customers and what they’d search. Type a keyword or phrase that they would use to find your website. (Here, I’m helping my friends’ who operate a pirate-themed boat tour on their sailboat in Newport Beach, CA. So I’ve typed “newport harbor boat tour”). Click Search.
2
3
Note: You may have to enter a code to prove you’re not a robot.
Chapter 7 | Website Success Tactics
147
7
Website Success Tactics Creating a Sitemap 4
Analyze the results. You’ll need to put your thinking cap on for this one, ok? Look for keywords with the highest Local Monthly Searches. There’s a catch, however—some of the higher-ranking keywords are simply too broad. For example, in these results, “Newport Beach Boat Tour” was searched 58 times in a month. That’s pretty low… but it’s accurate because that is the 58 people who would get on our friends’ boat tour.
4
“Newport Beach, CA” was searched 201,000 times in a month. There’s lots of people searching that one—but it’s too broad for us. Not everyone that searches Newport Beach, CA is going to jump on my friends’ pirate boat.
Note: Local Monthly Searches is the number of searches in your country. So for us, it’s the entire USA!
Chapter 7 | Website Success Tactics
148
7
Website Success Tactics Creating a Sitemap 5
Find good keywords and write them down. Select keywords that aren’t too broad and that tap into your market. Here I’ve selected Newport boat tour, Newport harbor cruise, Newport boat cruises, and Newport boat ride.
5
Ideally I want anyone that searches the Internet for a harbor cruise or boat ride in Newport Beach, CA to see my site. In order to cover all the keywords, I need to write one article per keyword. You’re basically using Google’s Keyword Tool to compile the titles to each of your SEO blog posts!
6
Repeat Steps 2-5 to brainstorm titles and keywords to guide your SEO writing.
Ready to write some solid SEO content and boost your site’s traffic? Let’s start writing blog posts!
Chapter 7 | Website Success Tactics
149
Website Success Tactics
7
Social Media There are a number of Social Media outlets available today. Almost all of them are free, and like SEO writing, the only investment you’re making on these outlets is time. Social Media is a huge resource for marketing. And more importantly—it’s a great way to interact, inspire, engage and educate your customers. Newspaper circulation has dropped significantly and according to the Wall Street Journal, print advertising is expected to drop 18% over the next four years! So, where will you put your energy, time and money? Social media connects your audience directly. You can interact and engage your customers on Facebook. You can post an event on Twitter and suddenly people are walking in the door. There’s no lag time, no waiting for print, and interaction is immediate, relevant and honest. Note: The key to social media is to stay relevant on the ‘stream’. A good goal to shoot for: update and post something every four hours. This will keep you front and center at all times!
Overview of Social Media Outlets: Facebook •
500 Million Users
•
Business friendly
•
E asy to Maintain a page and have multiple pages
•
Good photo and video integration
•
E xcellent insights/stats similar to Google Analytics (for Pages only)
•
Link to your SEO/blog posts
•
ood for interacting and engaging G customers
•
Mobile/Smartphone accessible
Chapter 7 | Website Success Tactics
150
Website Success Tactics
7
Overview of Social Media Outlets: Twitter •
uickly replacing CNN and major news Q outlets as the go-to place for breaking news.
•
175 million users
•
Posts are short and to the point
•
Excellent for promoting your blog posts
•
iscover, follow and utilize relevant hashtags D (#____) to reach a larger audience.
YouTube •
Fastest growing market in media (video).
•
Third most visited website on the internet (behind Google and Facebook)
•
F ree service. Unregistered users can view content while registered users can post unlimited number of videos.
•
mazing source for tutorials—users post A how to make websites, plant gardens, fix cars, rebuild sewing machines (almost everything).
LinkedIn •
Excellent for professional networking
•
Resume/Job-based social site
•
Good forums and discussions among people in your field
•
S eek and offer advice/help specific to your field
Chapter 7 | Website Success Tactics
151
CHAPTER 8 Finding Help
Tips For Searching Google Wordpress Forum YouTube Elance.com Craigslist
Finding Help
8
Tips for Searching Google Google is amazing. We live in a time when you can type virtually any question into Google and—with a little reading and clicking around, you’ll eventually find your answer. That wasn’t possible 20 years ago! If you ever have a question about, or are wondering how to do anything: first go to Google. Simply typing your question into Google is a great start. If you’re having trouble finding something, try using different keywords and variations of your question. More likely than not, somebody out there that has asked your question, and you’ll find that your issue has been solved.
If it’s a question regarding your Wordpress website, Google will typically display results from the Wordpress forum. The Wordpress forum is full of activity and used by thousands of people, so let’s explore the Wordpress Forum and how to use it. Chapter 8 | Finding Help
153
Finding Help
8
The Wordpress Forum The Wordpress forum is a lively, happening place. In any moment, posters from novice to professional will be creating topics, seeking help, asking questions, helping one another and giving advice.
Before asking anyone for help, go to the forum and search your question. Youâ&#x20AC;&#x2122;ll probably find that others have asked your question. If you canâ&#x20AC;&#x2122;t find an answer, create a post in the How-To and Troubleshooting forum, and someone will reach out to you within a few hours. It is also advised that you spend some time here on the Support pages simply reading about Wordpress. Think of it as your continuing education after completing this book!
Chapter 8 | Finding Help
154
Finding Help
8
YouTube You may have discovered this book from YouTube. If so, you’re a testament to the power of How-to Videos on YouTube. YouTube is great for visual learning. Tutorials often walk viewers through exactly how to do something. Answers to questions are abundant on YouTube, and it’s highly advised to search YouTube for answers. Consult YouTube whenever you need to see how to do something.
Chapter 8 | Finding Help
155
Finding Help
8
Elance.com Elance is a hub where freelancers and the people hiring them interact. There are over 2 million registered workers from around the world bidding on everything from Legal writing to Graphic Design to Programming to Copyediting to Translation Services and more. If you need to hire an expert for your site, this is a great place to start. One benefit to using Elance is that you can hire people who live in other countries. If you have a problem and just can’t figure it out, someone might solve it and maybe for less expensive than you think. When you post a job on Elance you’ll begin receiving Job Proposals from various people and firms. You’ll need to sift through the proposals to find the best work at the best price—not exactly an easy task. Try and be accurate about how much you’re willing to spend on your job, and don’t be afraid to spend a little more for quality work. A little extra goes a long way when hiring a freelancer! Elance is especially good for logo design, WordPress problems and graphic work. For graphics, freelancers will bid on your project by sending low-resolution proofs and you can choose your favorite design and buy it outright.
Chapter 8 | Finding Help
156
Finding Help
8
Craigslist Craigslist is great for finding local help. Sometimes it’s better to meet someone face-to-face when establishing a working relationship. Don’t be afraid to turn to Craigslist when you need to hire help. You do, however, need to be wary of scams involving money orders and things like that. Try your best to actually meet the people you’re hiring—or at least talk to them on the phone. The local coffee shop is always a nice neutral place to meet and collaborate on work.
Chapter 8 | Finding Help
157
CHAPTER 9 Bonus Topics
Setting Up Email Security Creating Another Website Getting a Domain Name From Godaddy Reinstalling Wordpress (Starting Over) Homepage Missing / 404 Error Plugin Broke My Website
9
Bonus Topics Setting Up Email
In this section I will to show you how to set up your email, i.e. yourname@yourwebsite.com and integrate it into your Google account. Having yourname@yourwebsite.com is regarded as being more professional, especially on business cards and when writing emails. Click here to watch the video
1
1
2
Go to your Cpanel (http://yourwebsite. com/cpanel).
2
Login using your HostGator/Cpanel login and password. (It was sent to you when you first setup Hosting).
3 3
Click Email Accounts.
Chapter 9 | Bonus Topics
159
9
Bonus Topics Setting Up Email 4
5
Choose a name for your email address. (I’ve put my first name. You choose whatever name you want) Select your website from the drop down list. (If you have multiple domains be sure you’ve selected the correct domain)
6
Create a password for logging into your account.
7
Re-enter your password.
8
Select Unlimited.
9
Click Create Account.
10
After it’s created, click Home.
11
Go to the Mail section and click Forwarders.
10
4
5
6
7 8
9
11
Note: It’s easier to forward your email to your Gmail account then having to log into cPanel each time you want to check messages.
12
Click Add Forwarder.
12 Chapter 9 | Bonus Topics
160
9
Bonus Topics Setting Up Email 13
Enter the name you created in Step 4 and select the correct domain.
14
Click Forward to email address: and enter your Gmail address.
10
13
Note:
14
If you need help setting up a Google/ Gmail account please see Chapter 8 â&#x20AC;&#x201C; Opening a Gmail Account.
15
Click Add Forwarder.
16
You should see a confirmation like this:
15
16
17
Open a new tab/window, go to Gmail, and log in.
17
Chapter 9 | Bonus Topics
161
9
Bonus Topics Setting Up Email
18 18
Click Settings.
19 19
Click Accounts.
20
Click Add Another Email Address You Own.
21
Enter your name.
22
Enter the email address you just created.
23
Be sure Treat as an alias is checked.
24
Click Next Step.
Chapter 9 | Bonus Topics
20
21 22 23 24
162
9
Bonus Topics Setting Up Email
25
Leave Setup through Gmail selected. Click Next Step.
26
Click Send Verification. Leave this screen open and go back to your inbox.
27
Click on the confirmation email.
25
26
27
Note: If you can’t find the email, reload the page. Still can’t find it? Check the Spam folder. (Mark it NOT SPAM if it’s in Spam!) Chapter 9 | Bonus Topics
163
9
Bonus Topics Setting Up Email
28
Use CTRL+C or (AppleSign+C on Mac) to copy the confirmation code.
28
29
Go back to the verification page. Paste the code into the box.
30
Click Verify.
29
30
31 31
You should see this confirmation:
Chapter 9 | Bonus Topics
164
9
Bonus Topics Setting Up Email 32
Go back to your Gmail inbox.
33
Click compose.
34
In the From section, you can now choose to send from the address youâ&#x20AC;&#x2122;ve just created.
33
34
Ok! Your new email has been integrated into Gmail! Repeat this section to create email accounts for employees, or create secondary emails for departments. (sales@yourwebsite. com, info@yourwebsite.com, design@ yourwebsite.com, etc.)
Chapter 9 | Bonus Topics
165
Bonus Topics
9
Security Keeping Everything Updated Your operating system should be up-to-date and the software on your computer should always be the latest version. Keeping both the software and operating system of your computer updated helps prevent breaches in security. Use the most recent version of Wordpress, and update your plugins whenever new versions become available.
Chapter 9 | Bonus Topics
166
Bonus Topics
9
Using Strong Passwords Secure your Wordpress site with a strong password when logging in.
Tips for a strong password: • Don’t use your name, username, business name or name of your site. • Don’t use a word found in any dictionary, in any language. • The longer the password, the better • Don’t use all numbers, or all letters—combine both numbers and letters.
Chapter 9 | Bonus Topics
167
9
Bonus Topics Limiting Login Attempts
Websites can be breached by malicious software that repeatedly attempts to login by guessing the password on your /wp-admin page. This type of software is problematic for security reasons. An effective prevention to these types of attacks is to install a Plugin that limits login attempts.
1
From the Dashboard, rollover Plugins and click Add New.
2
Type Limit Login Attempts and click Search Plugins.
Chapter 9 | Bonus Topics
1
2
168
9
Bonus Topics Limiting Login Attempts
3
Find the Limit Login Attempts plugin and click Install Now.
4
Click Activate Plugin.
3
4
5
Rollover Settings and click Limit Login Attempts.
Chapter 9 | Bonus Topics
5
169
9
Bonus Topics Limiting Login Attempts
6
If you like the defaults, you can leave it as is or edit the options as needed and click Change Options.
6
Chapter 9 | Bonus Topics
170
9
Bonus Topics Changing the Admin Account It’s important to change your Username from the default Wordpress username: Admin. The reason for doing this is so that malicious people and programs can’t easily guess your password.
1
From the Dashboard, rollover Users, and click Add New.
2
Create a Username. This will be what you will use to sign into Wordpress.
3
Enter your Email address.
4
Enter your First name.
5
Enter your Last name.
6
Next to Website, you’ll enter your current Wordpress username. (It should be filled in by default).
7
Enter your current Wordpress Password.
1
10
2 3
8
Set the Role to Administrator.
4
9
Click Add New User.
6
10
We now need to assign all of the posts to the new user. Click Posts.
5 7
8 9
Chapter 9 | Bonus Topics
171
9
Bonus Topics Changing the Admin Account
11
Check the box to highlight all posts.
12
On the dropdown menu, select Edit.
13
Click Apply.
12
13
11
Note: In this example, we only have 2 posts, but you may have more.
14
Under Author, Select your new Username.
15
Click Update.
14
15
16 16
Double check to make sure your posts are correct in the author column.
17
Click Users.
17
Chapter 9 | Bonus Topics
172
9
Bonus Topics Changing the Admin Account
18
Beneath admin, click Delete.
18
19
20
On the dropdown menu, select the new username, and attribute all posts to the new user.
19
Click Confirm Deletion. The admin account has now been deleted and youâ&#x20AC;&#x2122;ll log into Wordpress using your new username from now on.
Chapter 9 | Bonus Topics
20
173
9
Bonus Topics Creating Another Website
Ok, so you want to create another website. If you’ve worked through this guide, you’ve already done it and the more you do it—the easier it gets! This step-by-step is assuming you’re using HostGator. If you’re not using HostGator, you’ll need to apply these steps to whatever hosting company you’re using. (The instructions should be similar).
Buying a Domain From GoDaddy http://www.youtube.com/watch?v=nXwlvjzTidI
1 1
Open a new tab/window. Go to: godaddy.com and click: Find Your Domain.
2
Type in the domain you want to buy and click Go.
3
Click Add.
4
Click Continue to Checkout.
Chapter 9 | Bonus Topics
2
3 4
174
9
Bonus Topics Buying a Domain From GoDaddy
5
Change term to 1-year.
6
Click Checkout.
5 6
7
We donâ&#x20AC;&#x2122;t recommend buying any addons (or hosting), click Continue.
8
Click Sign Up Now (if you have a GoDaddy account, log in).
9
Enter your account holder information
10
Click Create Account
Chapter 9 | Bonus Topics
8
9
175
9
Bonus Topics Buying a Domain From GoDaddy
11
Fill out your payment info and click Place Your Order
11
12
After paying, click My Account
13
Click Domains
12 13
14
Next to your website, click Launch
14
Chapter 9 | Bonus Topics
176
9
Bonus Topics Buying a Domain From GoDaddy
15
Click Quick View
16
Rollover Nameservers. Click Set Nameservers
17
Select: I have specific nameservers
Chapter 9 | Bonus Topics
15
16
17
177
9
Bonus Topics Buying a Domain From GoDaddy
18 18
Open a new tab/window. Go to your HostGator Cpanel (yourwebsite.com/ cpanel).
19
Login to Cpanel
20
Click the Addon Domains Icon.
19
20
21
22
Enter your new domain, leave the subdomain and document root settings as is, and create a password. Click Add Domain.
21
22
Chapter 9 | Bonus Topics
178
9
Bonus Topics Buying a Domain From GoDaddy
24 23
You should see this confirmation message:
24
Click the Home Icon.
25
Scroll toward the bottom of the page and locate your nameservers.
26
Highlight the first address and copy it (CTRL+C or Command+C on a Mac).
27
Go back to the GoDaddy tab.
28
Paste the address in the box.
29
Repeat Step 26-28 for the second address.
30
Click Ok.
Chapter 9 | Bonus Topics
23
25
28 30
179
9
Bonus Topics Buying a Domain From GoDaddy
31
You should see this page:
31
Youâ&#x20AC;&#x2122;ll repeat this section for any new websites that you want to buy/create. Proceed to Chapter 2 to install Wordpress and create something amazing!
Chapter 9 | Bonus Topics
180
9
Bonus Topics Reinstalling Wordpress (Starting Over)
For some reason you need to start over and reinstall Wordpress. Follow this step-by-step, but take warning: you will be deleting EVERYTHING for this particular website. If youâ&#x20AC;&#x2122;ve written or created posts, pages, graphics, logos or anything else, youâ&#x20AC;&#x2122;ll be deleting it and starting over from scratch.
Click here to watch the video
1
1
Open a new tab.
2
Login to Cpanel. (yourwebsite.com/ cpanel)
2
3
Click the QuickInstall Icon.
Chapter 9 | Bonus Topics
3
181
9
Bonus Topics Reinstalling Wordpress (Starting Over)
4
Click the Red X next to the site youâ&#x20AC;&#x2122;re deleting.
5
Click Uninstall.
5
6
Click Wordpress.
7
Click Continue.
Chapter 9 | Bonus Topics
6
7
182
9
Bonus Topics Reinstalling Wordpress (Starting Over)
8
Select the website youâ&#x20AC;&#x2122;re starting again.
9
Create the admin account.
10
Click Install Now!
11
Click Back to cPanel
11 8 9
12
12
Click Log out.
Go to yourwebsite.com/wp-admin and log in to start building! (Chapter 3)
Chapter 9 | Bonus Topics
183
9
Bonus Topics Homepage Missing / 404 Error
It is a common mistake to see a 404 Error when you havenâ&#x20AC;&#x2122;t created an actual home page. You also need to designate a home page in the settings reading settings of the admin menu.
Click here to watch the video
1
From the Dashboard, rollover Pages and click Add New.
2
Title the page Home, select Default Template and click Publish.
1
2
Note: Depending on the template, the template may be titled Homepage Template, Home Template or something else.
You should be able to visit yoursite.com and see your homepage displaying correctly. Still doesnâ&#x20AC;&#x2122;t work?
Chapter 9 | Bonus Topics
184
9
Bonus Topics Homepage Missing / 404 Error Still doesnâ&#x20AC;&#x2122;t work?
3
Rollover Settings and click Reading.
3
4 4
Select a static page and using the dropdown, select Home.
5
Click Save Changes.
5
6
6
You should be seeing something like this:
Chapter 9 | Bonus Topics
185
9
Bonus Topics Plugin Broke My Website
If after you install a plugin your website breaks, this section will show you how you can fix it. You’ll need to identify the problem as best you can and search for a fix. Sometimes all you need is simply uninstalling and then reinstalling the plugin that broke your site. The first thing to do is to uninstall and reinstall the plugin. Lots of times this fixes the problem but if the problem doesn’t fix or if you can’t access your website at all you will need to take additional steps. Another good starting point is your theme’s website. We’re using CyberChimps Business Lite, if you aren’t using Bussiness Lite, you’ll need to adapt this step-by-step to whatever theme you’re using. (Search Google for your theme to find it.) Click here to watch the video
1
Go to cPanel and login (yourwebsite. com/cpanel).
2
Click the File Manager Icon.
Chapter 9 | Bonus Topics
1
2
186
9
Bonus Topics Plugin Broke My Website
3
Double click on the folder to the left of your websiteâ&#x20AC;&#x2122;s name.
4
Double click on the folder to the left of wp-content.
5
Double click on the folder to the left of plugins.
Chapter 9 | Bonus Topics
3
4
5
187
9
Bonus Topics Plugin Broke My Website
7 6
Click on the plugin folder to highlight it.
7
Click Delete.
6
8
Click Delete File(s)
8 Go back to your website and see if the problem has been fixed.
Chapter 9 | Bonus Topics
188
9
Bonus Topics Back That Thing Up
It’s important to backup your Wordpress site. If you’re using Wordpress, you’ll inevitably need to backup your site. Wordpress occasionally releases upgrades, and in order to keep up-to-date, you’ll need to backup your Wordpress site and its database. The easiest way to backup is by using a backup plugin.
Click here to watch the video
1
From the dashboard, rollover Plugins and click Add New.
1
2 2
Type BackWpUp and click Search Plugins.
Chapter 9 | Bonus Topics
189
9
Bonus Topics Back That Thing Up
3
Beneath BackWpUp, click Install Now.
3
4
Click Activate Plugin.
4
5
Click Create a Job.
5
Chapter 9 | Bonus Topics
190
9
Bonus Topics Back That Thing Up
6 6
Select Back Up to Folder.
7
Enter your Email Address
8
Click Save Changes.
7 8
9
Click Run Now.
10
On the Admin Menu, beneath backWPup, click Backups.
9
10
Chapter 9 | Bonus Topics
191
9
Bonus Topics Back That Thing Up
11
Beneath the file, click Download.
12
Save the file to your desktop.
11
You can now rest assured your site is backed up!
Note: Use the schedule feature to regularly backup your site (daily, weekly, etc.)
Chapter 9 | Bonus Topics
192
Create Your Own Wordpress
Website Today!
In this book you will learn how to create a professional website step by step with no step skipped. The lessons are so easy to follow people as young as 9 and as old as 81 have successfully built a website using these instructions. Even though it is easy to create a website it is also extremely professional. You will be using the same platform as professional web developers, fortune 500 companies, and celebrities like Jay Z and Katy Perry. Over two millions lessons have been delivered in 210 countries with more than 10,000 people per day using the lessons to create their own website. Many chapters are accompanied by video tutorials to help you if you ever get stuck (but you won’t).
About the Author Tyler Moore has been creating websites for over 14 years. Evolving changes in the economy and the job market has encouraged people to start their own business, learn how to make their own website, and become self-reliant.
“I felt completely overwhelmed just thinking about building a website. BUT Tyler’s lessons had me building my own website in minutes and feeling totally empowered. THANK YOU!” Susannah Skye “By learning Tyler’s lessons he has just changed my life! They are a springboard for me; and now I feel confident enough to make this business idea I’ve always had a reality, thanks to his comprehensive website tutorials” Julie Trikoulis “I am so thankful that Tyler is creating these website lessons step by step. I follow along and I GET IT. Thank you! I am using WordPress to practice and talk about loving what you do, I am enjoying every minute of it.” Quita Gulley