Search This Blog

Hovertrx

Add URL

Translate

Monday, August 5, 2013

How to Build Your Own Business Website with WordPress

If you already have your WordPress site set up skip to Part 2 here »
What We Will Be Building: We will be putting together a basic, fully-finished, business website starting from scratch. I chose a fake company, Paulina’s Pet Grooming for this example. Which means, in this course I’ll show you how to:
  1. Pick and purchase a domain
  2. Set up hosting
  3. Install WordPress and a Theme
  4. Add content and set up your site (part2)
Who This Is For: This course is for the ultra-lean startup or small business who needs a basic website but cannot afford, and/or doesn’t have a lot of time to build a website.
There are some small costs involved with having any website. In order to have a domain like the one you’re currently visiting: tylerherman.com you have to pay a small yearly fee. There is also a fee for hosting your website. If you are on a budget you can get hosting and a domain for as little as $120 for a year. $120 for a website isn’t too bad in my opinion.
We won’t be building a website full of every bell and whistle you can think of and it might not be an award winning design, but it will be presentable, professional, and most importantly, have the content you want to make available for your customers.
Why WordPress?
I chose WordPress for this course because it was the easiest CMS I found that non-web savvy people could get installed and work with. There is lots of free web-site-o-matic software out there that let people build a website using their system. The problem being 1) it only works on their hosting so you don’t really have control of your own site and 2) when it comes time for you to have a designer come in and add to or improve the site, they won’t be able to use that software, and likely ask you to start over.
WordPress is one of the most widely used applications for building website and it isn’t difficult finding a developer/design comfortable working with it. So if you need help expanding or improving your site you can find it. Plus, WordPress has tons of Themes and Pluginsavailable so you can customize your site quite a bit without having to mess around with the code.
What Are the Requirements: You won’t need any coding or design skills for this. If you are able to make a purchase online or use an online app like Facebook or Flickr, you should have enough knowledge to finish this course.
You will also need access to an email address and be required to remember several user names and passwords, you will be creating during this process. Even if you have an email account already, I recommend creating a Gmail account with Google. It will come in handy.
A nice tool for storing passwords, which I use is LastPass. It is a cloud based services that stores your usernames and passwords securely and gives you easy access to them when you are online.

This video goes over the step I’ve outlined below. You can use one or both, whatever helps you learn easier.

Selecting a Domain

The first step in the process is choosing a domain. I’m sure you are pretty familiar with seeing these already. Some examples: amazon.com, whitehouse.gov, craigslist.org and so on. To obtain a domain name you have to purchase it from a domain registrar. You will essentially be leasing the domain for one or multiple years for a small fee ($4-$20 per year).
There are many Domain Registrars available. You may have seen the commercials for Godaddy.com. Feel free to register your domain with whatever company you wish but for this demonstration I’m going to register with Name.com. I like them because they make the process simple, and don’t try to upsell you with a bunch of additional products you don’t need.
Step 1: Create an Account
Start by heading to Name.com and create an account. Keep your username and password somewhere you won’t lose it as you will definitely need it later.
create an account an register domain name
Step 2: Select a Domain Name
Now use their search feature to locate the domain name you wish to purchase. You can purchase multiple if you’d like but only one is necessary. A general rule is to try to get a .com domain for your business but they are getting harder to come by. Some other popular suffixes for business sites are: .net, .co, and .biz.
search for and select a domain name to purchase
What if the domain name I want isn’t available? I wrote a quick guide to choosing a domain name which should help out.
Step 3: Purchase
Now that you have your domain name selected you just have to make the purchase. That was easy right?
Before leaving the site you may want to bookmark this page, or leave it open in a browser tab, as we will be coming back here shortly.

Setting up Hosting

Now that you have your domain you need to find a host for your website. A host is a company you pay to store your website on a server that is made available to the world. When someone types in your domain name into their browser, it will send a request to the host server and allows you to download the site to view on your desktop or smartphone or whatever you happen to be using.
There are literally thousands of hosting providers. For these sites I recommend Bluehost. They offer decent hosting at low prices and are one of the largest hosting providers around. They also have a pretty clean and simple website to navigate, making the process easier for you to set up your first website. And of course they have a 1 Click WordPress Install, which we’ll be using.
bluehosting for wordpress install
Step 1: Purchase a Plan
You will be both purchasing a hosting plan and creating an account in the step. The cheapest plan is all you will need to get started. You get a price break for purchasing multiple years of hosting up front. If you plan on the site being around take advantage of it.
Head to Bluehost and click on the green “Sign Up Now Button”.
bluehost signup button
Next under “I have a Domain” enter the domain name you registered earlier.
enter your domain name
Enter your contact information. Make sure to enter a valid email address. Bluehost will send you important information you will need for later steps.
enter your hosting contact information
In the package information select one of the cheap packages for the amount of time you want which are 12, 24, and 36 months. Make sure to uncheck the two check boxes below that: SiteLock Domain Security and Site Backup Pro. You don’t need either of them.
select your hosting package
Now just continue through until checkout.
Step 2: Point Your Domain at Your Host
It may take a little bit of time before your account is set up. You will receive a couple emails confirming your order and then later (2 to 24 hours), a new email will be sent to you with your Account information. This email will have all the information you’ll need to set up your site, including the name servers. So if you are at this step and waiting on your Account Email, you can take a break or start writing content for your site to kill time.

Pointing Your Site to Bluehost

Assuming you received your email from Bluehost, Open a new tab in your browser and head to Name.com.
Log in to your account and click on Accounts.
name.com account sign in
You will see the domain you registered earlier. Go ahead and click on it. In the top left corner you can see where you can enter the name server information. If you are hosting with Bluehost the names servers should be: NS1.BLUEHOST.COM and NS2.BLUEHOST.COM. You can double check this in your email.
setting up your name servers
Delete the current information and replace it with the name server information you received in your hosting email.
nameservers setup

Installing WordPress

We are going to use the 1 Click WordPress Install to get you up and running with your new website. That same email from Bluehost has the url to your Control Panel and the username and password. When you log into the control panel you might be a little overwhelmed. Don’t worry you won’t have to deal with 95% of this.
Find the Site Builder heading and click on the WordPress icon.
Site Builder on Bluehost
Under: Where would you like WordPress installed?, select your domain name.
Ignore the other steps and just click Complete at the bottom of the page. It may take a minute or two to install. You now have a WordPress website installed! There will be a link to your new website, a link to your Control Panel where you will make changes to your site and most important, your Control Panel username and password. Make sure to keep this somewhere safe, as you’ll need it every time you log into your website.
Well let’s get to it. Click the link to your Control Panel and enter your username and password.
WordPress Control Panel
You can now visit your website by typing your domain name into your browser. It will look like this:
the WordPress starter theme installed
There are lots of places we could start, but we’ll get going with choosing a Theme first.

Selecting a Design (Theme)

A theme is basically the design or skin that will lay over top of your site. This is a very important step.
There are many themes to choose from in a variety of styles but not every one will be ideal for your business site. WordPress was originally created as a blogging platform and many of the Themes are more for blogs than business sites.
Here is a list of some free WordPress Themes that work well for business sites.
There are also some Premium WordPress Themes that work well too. The premium themes tend to have more features and most have a pretty nice looking design. The costs tend to be around $25-$100 per theme. You don’t have to use a premium theme but I thought I’d give some examples if you were interested in purchasing one.


You can watch the video of me going over the steps or keep reading. I go over the same steps in both places although in the video I select a different theme.
Selecting a Theme: The left hand side for your WordPress Control Panel has a navigation menu where your site is configured. Look underAppearance > Themes to select a Theme.
how to change your WordPress theme
At the top of the page there will be a Current Theme (what the site is using) and Available Themes below (those installed but not being used currently).
To install a new theme just click the tab called Install Themes. Just below that there is a set of blue links. Click on Featured to see a list of some Themes to choose from.
Find a theme to install
If you find a theme you like, click Install. When it is installed, click Activate and it will now be the Theme your website is using.
For this example we are going to stick to the default theme, TwentyTen. If the video I choose the Responsive Theme. Both themes are slightly different, as will be any thing you select, but the basic setup should be the same.

Setting Up Your Website

In the next part we will be setting up your pages, the Setup for the Theme, installing Plugins and using Widgets, adding content and basically turning an empty shell into a website.
If you’ve found this tutorial helpful and know some other small business owners who need a website be sure to share it with them.

Setting Up Your Website

I know you want to give your site some personality and put your mark on it, but first we have to do a few little Setup tasks to get this site in order. At the very bottom of the menu on the left, select Setting and then click General.
Enter a Site Title and Tagline. Then click Save Changes at the bottom.
Add a site title and tagline under general WP settings
Next, visit Settings > Permalinks. Check the radio button next to Post Name and hit Save Changes at the bottom. This gives the URLs for your pages and posts a nice user friendly name.
Setting up friendly URLs

Plugins

One last thing before we start to add content. We are going to install a Plugin. Plugins are basically little programs that you can install to give added functionality to your WordPress site. Stuff it cannot do out of the box. There are tons of Plugins out there. Because we are trying to keep this simple we are only going to install a couple free Plugins what will be necessary for the site.


So on the left navigation bar of your WordPress Dashboard click on Plugins and then Add New.
adding new plugins in WordPress
Just like with the Themes, there are lots of free Plugins you can install quickly and easily.
Some Plugins I’ve Installed include:
  1. WordPress SEO by Yoast - A nice little SEO Plugin that shouldn’t take much setup
  2. Jet Pack - A bunch of additions in one pack, made by WordPress that will come with your installation
  3. CKEditor for WordPress - A better text editor
  4. Black Studio TinyMCE Widget - Allows you to create widgets with a TinyMCE editor, not just plain text
  5. Display Widgets - Always you to show different Widgets on different pages
Lets start with the WordPress SEO by Yoast plugin. So in the search field on the Add New Plugin, search for… “WordPress SEO” or just “Yoast”. If you don’t know exactly what you need you can click one of the tags and see a list of Plugins that follow under that general category.
Click Install Now below it’s title.
Installing our first plugin - WordPress SEO by Yoast
You’ll get a prompt, click OK. It will take you to a new page. Just like with installing a Theme , click Activate.
There is a ton more we can do with Plugins but for now lets move on to the good stuff. If you want to know more here is a list of WordPress Plugins that may be useful.

Adding Pages and Menus


Ok now it is time to get down to business. Before just randomly adding content to the site, make a list of the content your site is going to need to have and what pages it will appear on. For this site example we are creating a pet grooming company site Paulina’s Pet Grooming. So here are the pages I feel the site needs. Your site may need more or less.
  1. Home - Basic information about the site: Who, What, Where, Why.
  2. About - Something personal about the owners/employees and their love for animals.
  3. Services - People want to know what it is you do and how much it costs before they contact you. Lay it out for them.
  4. Gallery - Well it will actually be more of a blog with before and after photos of the animals after they are all cleaned up.
  5. Contact - You will have your contact information in multiple locations but this is just one more way they can reach you.
So now that we know what are pages are going to be, lets start building them.
In your WP Dashboard click Pages and then Add New.
Start by creating a home page. Give it a title of Home and in the big field below it you can add your homepage content. You can come back to this later and update it as much as you’d like so don’t feel you have to get it perfect now. When ready click the blue Publish button on the right site of the screen.
adding WordPress Pages
Please note that some Themes will have a custom homepage and not be set up this same way.
Again click Add Page and follow the same steps for the About, Services, Gallery and Contact pages.
Any time you want to make a change to one of these pages, simply click All Pages to bring up a list of all the pages you’ve created. Hover your mouse over one of the page titles and you’ll see a list of options appear.
edit or remove pages
You can edit all of your pages this way. Also, go ahead and Trash the Sample Page that was in your installation by default. Be careful, when you Trash a page, it is gone.
Adding Navigation
When visitors come to your site they need to be able to get from page to page. So creating a main navigation bar will make that possible. In your WordPress Dashboard on the left hand menu click on Appearance and then Menus.
adding a WordPress menu
I named my menu Main Menu since it has the primary navigation for the site.
primary navigation created
After adding the menu, in the left hand box titled Theme Locations, select your menu (it should be the only one on the list). This is how you display your menu on your website, so make sure not to skip this step.
theme locations
As you can see there are four areas where you can assign a menu. Some Themes are different but generally they will use these same areas. Header Menu tends to be the primary menu for a website so we’ll select our Main Menu we just created and click Save.
Two boxes down there should be one titled Pages. We have created a menu but there are no links on it yet. So sdd a check next to Home, About, Services, Gallery, and Contact (pages we created in the previous step) and then hit the Add to Menu button. You will now see your Pages listed in the Main area of the page.
organizing your menu in the order you want
The order probably won’t be what you want but that is easy to fix. You can click and drag the Pages to put them in a new order. You can also create subpages (the pages will appear indented) but we don’t want to do that right now.
Now just click the blue Save Menu button on the right side when you are ready to save your menu settings.
save your menu

Assigning a Homepage and the Blog

If you head visit your website now, you’ll notice your homepage doesn’t have your homepage content on it yet, and the Gallery page doesn’t look like what we want either. So we’ll fix that now.
In your WordPress Dashboard on the left hand menu click Appearance and then Themes. It should show the current theme we have selected, TwentyTen and there should be a Customize link, which I want you to click.
This will reveal your homepage and have a sidebar on the left with some new options.
Currently the site is set up to show blog posts on the homepage but we want a static homepage. So under Static Homepage select A Static Page. Under Homepage select Home and for Blog select Gallery.
setting a static homepage and a default page for the blog
Now hit the blue Save and Publish button to make those changes live. What we did was move the blog from the homepage to the Gallery, and we added a static homepage.
You’ve probably noticed there are a lot more things you can do on the Customize page to customize and brand your website.
Under Site Title and Tagline fill in the fields with the information you want, click the blue Save and Publish, and it will appear on your site.
Under Colors you can change the background color of the site.
An important one. Under Header Image you can replace that random image with one of your own. Just make sure the image is 940 pixels wide or else it will either be too small or too big for the space.

Widgets

WordPress Widgets allow you to add content blocks to different areas of your site, like say the footer or the sidebar. Different Themes come with different Widget areas. There are a number of widgets you can use by default but we are going to install one that isn’t. To do so, you actually have to install a plugin, Black Studio TinyMCE Widget. So go to Plugins > Add Plugin, and then search for the Plugin. Remember to click Install and then Activate.
Now head to the Appearance > Widgets page. You will see a bunch of different widgets in the center of the screen and a list of areas to place those widgets on the right.
WordPress Widgets
It is really just as simple as dragging the Widget you want into the Widget Area where you wish to display it. The one we will be using mainly is the Black Studio TinyMCE Widget which allows you to add content, images and links and style it with the WYSIWYG editor. If you aren’t sure where a Widget area is on your site just put a Text widget in it and give it a name like Widget 4. Save, and then see where it appears on your homepage.
What to use widgets for:
  1. Testimonials
  2. Promotions and advertisements
  3. Social media feeds
  4. Secondary navigation
  5. Text boxes and callouts
  6. Contact information
  7. Newsletter signups
  8. and so on…
As you can see there are tons of uses for widgets. Essentially anything that can fit in that area of the site is fair game.

Writing and Styling Website Content

The next part of this course will go into more of the details about how to write compelling content for your website. As well as how to style that content by adding links, images, and headings.

Building Your Own Business Website with WordPress (Part3)

In this part of the series I will be talking about writing compelling content for your website and how to style that content with images, headings, and lists to make it easier and more pleasurable to read.
If you haven’t started a website yet you should begin back on Part 1 or if you need to set up your pages and overall site, refer to Part 2.

Styling Your Content

Back in Part 2 we installed CKEditor for WordPress, which allows us to change font size, color and style inside our pages and posts.
CKEditor for WordPress
If you are familiar with a program like Microsoft Word you should be somewhat familiar with the formating options available. You can make text smaller or larger, make it bold or italic, change it’s color and so on.
Adding Links
To add a link click on the icon with two links in a chain with a world behind it.
adding a link in content
Then you just type in the URL you wish to link to and hit OK.

Dealing with Images

To add an image to a post or page click on the Upload/Insert button.
upload an image in WordPress
Drag the image you want into the dotted area or click Select Files. Find the image on your computer and upload it.
You will be met with a new list of options for that image.
options available for uploaded images
The Title will be displayed if you hover over the image. The Alterate Text is for accessibility. Screen readers cannot view images so the Alt Text serves as a description for the visually impaired. You should always add Alt text. Under that there is Alignment and Size. Alignment will center or move the image to the right or left of the screen. For size you can insert the original image or several different smaller images, like a Thumbnail.
Once you’ve gotten your setting correct, click the Insert Image button, and it will be added to your Post or Page.

Writing for the Web

Write for Your Audience - This is the single hardest thing for people to do.
You need to realize that people are selfish. They do not care about your company. They are looking for information, a product to fill a need, or to solve a problem. So give them what they want, and nothing more.
Don’t waste their time with a bunch of marketing speak about how great your company is. No one cares. Instead, demonstrate how you can solve the person’s problems and/or fulfill their needs.
Shorter is Better - People online are looking to find information as quickly as possible. Often only skimming or scanning a page for what they need. If they don’t find it they move on. So try to get the information your audience is looking for out to them in as short and concise a manner possible.
Try not to write long paragraphs of text when possible and use headings, images and lists to break up “walls of text” and to make finding specific content easier. More at that below.

Using the Blog

We’ve gotten this far without touching on one of the more prominent features in WordPress, creating the blog. In this case we are going to use it to highlight pets we have cleaned up and made to look shiny and new. In a previous step we assigned our blog to display on theGallery page. If you visit that page you will see I’ve added two entries. Creating entries is almost exactly like creating pages. You can do this under Posts &gt Add New.
add posts
Every time you create a new post it will be added to the Gallery page, or whatever one you assign to be your blog.

Creating a Contact Form

We want to create a fillable form on the contact page. To do this we’ll use the Contact Form 7 Plugin. Go to Plugins and search for this Plugin, then install it. Click on the settings for the Contact Form 7 plugin.
installing a contact form using Contact Form 7
There will be a contact form already created called Contact form 1 that you can use, or create your own.
Select and copy the text in the brown box. Now go to Pages and edit the page you wish to add the form to. Simply Paste that code where you want the form to appear.
adding the contact form to a page
add a contact form
Click in the body of your page where you want the form to go and then click the form Icon.




No comments:

Post a Comment

Followers