How to Build Your WordPress Ecommerce Site

Why WordPress?

WordPress is the most popular blogging platform on the net - for good reason. It is easy to learn and to use, extensible, and can be put to use as most any sort of website you need. In fact, even though it is a blogging platform, you can set it up as a static website with no blog at all, although I don't recommend that for an e-commerce site.

An added bonus is that you can use it for free. Not only that but you can actually build a full blown e-commerce site with a shopping cart connected to PayPal, all the pages you'd expect to see (About Us, Shipping & Returns, etc), a blog section and the ability for your customers to give you feedback on your products.

Coming up we'll be building a site together, but for now let's address some WordPress basics:

Installing WordPress

The installation is very simple and straightforward, so long as you have chosen a host that uses CPanel and Fantastico Deluxe. CPanel is just your hosting dashboard, and provides access to the tools and functions you need to manage your website, such as a file manager and upload/download capabilities.

CPanel is also where you can set up additional domains and email accounts, and of course this is where Fantastico Deluxe is located. FD is simply a program which helps you to quickly and painlessly install other programs on your website.

Once you are logged into CPanel, scroll down until you see the Fantastico Deluxe button and hit it.

install wordpress

Follow the prompts - be sure to install in your root folder and not in a sub-domain folder. Note that Fantastico Deluxe does not always have the latest version of WordPress, so you may have to upgrade once you log into your WordPress install. Don't worry, this is painless too.

During the install, you'll be asked for an email address where all of the install info will be sent. When you get that email, make sure you file it somewhere safe. It will have your login info.

Now go to http://yourdomain.com/wp-admin to log in. Use the user name and password you provided during the install and you will be taken to the WordPress dashboard.

Once there, we can get started – click on Appearance in the menu on the left side of the window…

Building a Simple WordPress E-commerce Site

tip indicator

If you have never put together a WordPress site, you may want to build this one along with me. Please feel free to download the graphics from our demo site and use them, along with anything else you find there. Hey, I built it for you anyway.

Most people will put together a site “on the fly”. To some extent that is inevitable, but I want to encourage you to do this methodically. Try to have everything possible mapped out in advance. This means having a clear idea of your website’s final structure before you start.

For my first pass at a site, I usually draw on a whiteboard. We have two four ft. by three ft. whiteboards mounted side by side in the office and we use them all the time for brainstorming and design. Once I am comfortable with the website concept, I formalize it in Mind Mapping software as shown below.

If you have been moving through the book along with me you know that the first thing you do after you identify your market is to collect and develop content.

It is important to collect all the content you can before you start your website

The reason for this is that your content will drive your site configuration. Of course you will always be adding new content and even section, post types and categories to your site over time, but it is always easier to do as much of this ahead of time as you can.

tip indicator

It’s like baking a cake

Ever bake a cake? If you just open a cookbook and start, you will find yourself running all around your kitchen and pantry finding ingredients, utensils, bowls, etc. and you’ll be forever stopping and starting.

But if you read through the recipe and then gather all the ingredients, tools and other items before you start things tend to go much more smoothly.

Also, you won’t be sitting there in front of a huge bowl of eggs, flour, milk, butter and baking soda - only to realize that there is no baking powder in the house.

The site we’re going to put together is TheBestCoffeePot.com 

Why a site about a coffee pot? Well, I wanted to do something to show you how easy it is to put together a comprehensive blog/website for free or close to it and to do it on most any subject. And so long as I was going to put together an example site, I thought that I might as well do it on something I love. I love coffee, and I love my old coffee pot.

Is the site for real? Kind of. It has a real shopping cart and fake affiliate links. But I don’t actually expect to sell anything on it, so I’ve had a little fun with the design. Hope you don’t mind.

Passion & Parameters

This is a word we hear a lot lately in the IM (Internet marketing) world. Passion sites are by definition not supposed to make money, but sometimes they do. I think that happens because when you truly care about something, you take steps to make it as good as it can be. Your writing, research and design all end up being better. Quality will out. Cream does rise to the top. (That’s a coffee reference!)

When you rise to the top of the SERPS, you get traffic, and with traffic comes money (so long as you know how to monetize it).

In any event, this is my first ever passion site. I figured so long as I had to assemble something for the eBook, I might as well have fun with it. I also laid out some parameters:

  • Since this is supposed to be a demonstration of how to build an e-commerce site for next to nothing, I used free software whenever possible. With the exception of a little Photoshop work that could be duplicated with Gimp or other free software, I held to this.
  • This is a basic step by step tutorial. Experienced readers may want to just skim through this and build quickly. That’s fine.
  • In keeping with the spirit of a shoestring budget, I use the free Twenty Eleven theme that comes with WordPress. I have to say I was surprised and pleased to see just how much I could do with it. It’s a far cry from the old Kubrick default.
  • I wanted to show multiple monetization strategies, if possible.
  • Where the Twenty Eleven theme could not be tweaked to conform to my ideas of e-commerce site structure, I would not have custom design work done. Instead I would use these shortcomings as “teaching moments”. This would both be better for readers and save me time.

MindMapping Your Website

The first thing we need to do is plan out the site. I like to use MIndMeister, a free mind mapping tool for this. Here’s the mindmap for the site:

website mindmap

MindMeister lets you drag and drop all of the nodes of your map around, add notes to a node, and much more. I only use what I need to for each map. In this case, I wanted to highlight which category each part of the site was in, so I added icons to nodes.

You’ll notice first how much content we pulled out of the owner’s manual. Then if you look in the lower right, you can see that we’ll be monetizing this site three ways:

  • Direct product sales
  • Dropship products from DOBA
  • Amazon affiliate items

Note that at this point, with the site still under construction, we already have a 29 page site, not counting tag pages. That’s a good start. Let’s see how we get there from here…

Building the Skeleton

The first thing I like to do is to get the site framework up, so I don’t have to go back and add things later.

Theme

The theme is the basis for everything you are going to do later, so choose carefully. You can switch if you need to once you start building, but there always seems to be something that needs to be tweaked or changed. This site is going to run on the new default theme that comes with WordPress, Twenty Eleven.

Under the Dashboard men we select Appearance / Themes/TwentyEleven/Activate and we’re done.

wordpress themes

Pages

Before we can continue, we’re going to have to create some pages. The first will be called Home and will be our Home Page (duh). The second will be called Blog, and this is where our blog posts will live.

You’ll see that WordPress has created a page for you. Let’s delete that:

trash page

Hey, if you ever delete a post or page by accident, don’t worry. They just go into your Trash folder. You can see it above the Apply button you just clicked. You can click your Trash folder, and then select Restore from the dropdown menu, then apply. It’s back!

OK, now we can create our pages. We need to do this now so that we can tell WordPress what page to use for our Home page, and where to put our Blog. We also need a place to put our Contact Form, Shopping cart and other info.

Here’s how we do the Home page:

create a page

1) Click Add New in the Pages Menu

2) Give your page a name, in this case Home

3) Under Template at the right, select Showcase Template.
This is a special template that comes with Twenty Eleven to use on your Home page

4) Click Publish

Now let’s do our Blog page: It uses a different Template, but otherwise the process is identical.

1) Click Add New in the Pages Menu

2) Give your page a name, in this case Blog

3) Under Template at the right, select Sidebar Template.
This is a special template that comes with Twenty Eleven that will show our sidebar on this page

4) Click Publish

Next our Contact page:

1) Click Add New in the Pages Menu

2) Give your page a name, in this case Blog

3) Under Template at the right, select Sidebar Template.
This is a special template that comes with Twenty Eleven that will show our sidebar on this page

4) Click Publish

Continue adding pages using the Sidebar Template as above until your page list looks like this:

page list

Settings

Go to your Settings menu on the left and make these entries:

General Settings:

Site Title: The Best Coffee Pot
Tagline: "Without coffee, I would have no discernible personality"
Date Format
Time Format
Week starts on

Be sure to click “Save Changes” at the bottom and it’s off to

Writing

I always change the size of the post box to 30 lines. I like having room to work. I also check “Convert emoticons to graphics”.

Reading

Here’s where we put the pages we just created to work. Match my selections below.

 reading settings

Discussion Settings

You can let people post comments on your posts/pages if you like. Please be sure that if you allow comments, you also check “An administrator must always approve the comment”. Otherwise, you might get some content added to your site that you’d rather not have.

 discussion settings

The Default article settings at the top are important.

The first will let other webmasters know that you are linking to them. This can prompt a visit, and if you’re lucky the start of a relationship that can lead to some free links in return. The second will let you know who is linking to you. At least in the beginning I urge you to check the sites that link to you. This can be another way to expand your network. You can’t know too many people when it comes to site promotion.

Media Settings

This is where you set default sizes for the images on your site. We’ll use the following settings here:

media settings
tip indicator

Just a quick note: Use a graphics program to resize your photos before you upload them. Don’t just upload a huge file and use WordPress to change the displayed size of the image. Your host will still serve the large file, and this could affect your site speed.

Privacy

Just a choice: Let search engines see your site or not. I don’t usually let the engines on my sites until they are ready for launch. Why have them index a structure that may change shortly?

Permalinks

I use this for my format: /%postname%/ because it generates simple search engine friendly URLs: http://thebestcoffeepot.com/how-to-clean-coffee-maker/ Note that this is a visitor friendly URL as well. You can immediately tell what this page is about.

Plugins

Plugins are pieces of software that extend the capability of WordPress. You can find a plugin to do most anything you like. The plugins we’ll add to our demo site will add a customer contact form, install a shopping cart, and extend the capabilities of our theme, among other things.

In the left menu, click Plugins/Installed Plugins.

To start with, our plugins page will have two plugins: Akismet and Hello Dolly. Akismet is a spam blocker, and you want to set it up per the instructions shown. You can delete Hello Dolly.

delete hello dolly

Once you’re done with that, it’s time to install the plugins we’ll be using on our site. Installing plugins is a snap. It goes like this:

1) In the left menu, click Plugins/Add New

2) Select Search under the Install Plugins heading

3) Put the exact name of the plugin into the search box

4) When it pops up, click install. (WordPress will ask you if you really want to do this – yes, you do.)

5) Activate the plugin

6) Make any required changes to the plugin settings

It sounds like a lot, but it’s not. This will only take a few minutes. Here are the plugins I want you to find and install:

  • All in One SEO Pack  (Now replaced by Yoast SEO)
  • Contact Form 7
  • Simple Sitemap
  • WP Simple Paypal Shopping Cart
  • Twenty Eleven Theme Extensions
end of content

This is the end of the free content in this chapter. To read the rest, and finish building your own WordPress Ecommerce site, get the guide here...