Setting up a static front page
By default, the main page of your WordPress site shows a running list of your latest posts. While this is perfectly acceptable for a personal blog, an e-commerce site typically takes a more static approach so as not to confuse any first-time visitors.
Fortunately, configuring a static front page is simple. We first, need to create a new page that will become the default front page. In your WordPress Dashboard, navigate to Pages and select Add New, as shown in the following screenshot:
Add any variety of information that you would like first-time visitors to see, such as a logo, a welcome message, a breakdown of product categories, or whatever you would like.
When you've finished, go ahead and publish your page. The page we created for our music shop is titled Welcome. Now let's set it as the default front page. Back in the WordPress Dashboard, browse to Settings and click on the Reading option, as shown in the following screenshot:
Underneath Reading Settings, select the option to display a static front page. Be sure to choose the title of the desired static page from the drop-down list. Note that we chose Welcome, the same page that we just added. The following screenshot shows the Reading Settings options:
Another good option for a static front page is to directly choose the Products Page from the drop-down list. The Products Page is automatically created when you activate the e-Commerce plugin for the first time, and is essentially the gateway to your e-commerce shop. If you want customers to first see your products when they visit your site, choose this option.
Also known as "sidebar accessories", widgets are one of the slickest and easiest ways to vary the content of your WordPress sidebars. With widgets, you can elegantly add text, images, gadgets, HTML, or any other design elements to one or more sidebars on your site. A growing number of plugins for WordPress also come with additional widget features, including the WP e-Commerce plugin.
To get started with widgets, navigate to Appearance in your Dashboard and click on Widgets, as shown in the following screenshot:
Feast your eyes on the number of Available Widgets. The following screenshot shows the different widgets available:
Adding a widget to your desired sidebar is a simple, click-and-drag affair. You can add as many widgets as you like to the sidebar, and re-arranging them is as easy as dragging and dropping them.
Here are the three widgets that we added to our music shop: a Search box, a Text Widget, and the Shopping Cart. The Shopping Cart widget is shown in the following screenshot:
Creating text widgets
For an e-commerce site, a text widget is like a Swiss Army Knife since it's one simple tool that can serve a variety of purposes. Here are a few tasks that text widgets can accomplish:
- Create a "Featured Product" widget and rotate the contents every few days or weeks
- Add a custom image that links to a specific product category, such as "Albums" or "Singles"
- Create an HTML drop-down list with links to all product categories
- Add notices about sales or special discounts
Here's an example: let's say we want to let our customers know about a special coupon code for our shop that is valid during the month of April. A text widget is the perfect way to let all visitors know about the sale.
Drag-and-drop an empty text widget and place it in the sidebar. It should expand automatically, and now we can type all of the necessary text and HTML.
In the following screenshot, we've added some text and a little HTML. The Title of the text widget is now April Sale! The <p> tags simply format the text into paragraphs, and the <strong> tag makes the coupon code show up in bold text. The usage of these tags is shown in the following screenshot:
Be sure to save all of the changes once you have created the text widget. If we now take a look at the front page of our music shop, we can see the widget layout and the sale information in the WordPress sidebar, as shown in the following screenshot:
Though the WP e-Commerce plugin is the focal point of this book, there are a number of other plugins that can greatly augment the functionality of your site. They include:
- All in One SEO Pack
- Google XML sitemaps
The Akismet plugin comes with WordPress by default, but if for some reason you do not have it, download it from the link http://akismet.com/download/. What does Akismet do? It essentially eradicates comment spam, which is a true bane to anyone running a blog with comments enabled. Granted, if you already disabled comments, your site has no need for an anti-spam plugin. For the rest of us, Akismet (or a similar plugin) is mandatory. After all, you wouldn't want your business blog flooded with rogue, distasteful comments would you?
The Akismet plugin is free for personal or hobby use. If your online store is a full-fledged commercial venture, they ask you to purchase a commercial license.
A similar free plugin is WordPress SpamFree. For more information, refer to: http://bit.ly/wp-spamfree.
All in One SEO Pack
Download link: http://bit.ly/wp-seo-pack
The SEO pack for WordPress is designed to help your site rank higher in search engines. While the effectiveness of the SEO pack is determined by a large number of factors, especially the content of your site, using this plugin certainly doesn't hurt. Just understand that installing and activating it is not likely to rocket you to the top of Google overnight.
All in One SEO Pack specializes in allowing you to set your own titles, descriptions, and keywords, both for your site's front page and individual posts. You can see it in action in the following sample music shop screenshot:
Google XML sitemaps
Download link: http://bit.ly/google-sitemaps
In conjunction with the All in One SEO Pack, the Google XML sitemaps plugin is designed to make it easier for major search engines to crawl and index your site. Activating the plugin will create a sitemap (compatible with http://www.sitemaps.org) that major search engines such as Ask.com, Google, MSN, and Yahoo! understand.
The following screenshot shows the Google XML Sitemaps plugin in action. Adding or updating a post will automatically rebuild the sitemap.
The ideal end result is that if the search engines understand and index your site in a better way, new visitors will find your store more easily.
Download link: http://bit.ly/db-backup.
WP-DB-Backup has one single purpose: it exports a backup of your WordPress database that you can restore later in case of an emergency. Upon installation, you will find a Backup option underneath the Tools menu in the Dashboard, as shown in the following screenshot:
It's better to be safe than sorry, so please don't overlook this plugin. The last thing you want is to find out that your server got hacked and you have no database backup to restore. Ouch!
Download link: http://bit.ly/wp-polls
WP-Polls provide an easy way to add interactive polls to your site, either on an individual post, a page, or embedded within the sidebar via a widget. Once installed, the Polls menu shows up in the WordPress Dashboard.
You can create as many answers as you like for each poll, plus add automatic closing times. Since we're building a music shop, how about asking our visitors about their favorite music genre? This also directly helps us learn more about our customers. Notice the poll embedded within our WordPress sidebar in the following screenshot:
Adding a contact form
No e-commerce site is complete without providing a way for customers to contact the shop owner(s). Fortunately, this is an easy task to accomplish. Some themes for WordPress already contain a "Contact" page template. If your theme does not, there are a multitude of plugins that can bolt on that functionality with only a click or two. Here are three options:
- WordPress SpamFree contact form
- Contact Form 7
- cforms II
WordPress SpamFree contact form
Download link: http://bit.ly/wp-spamfree
If you opted to use the aforementioned WordPress SpamFree plugin, then rejoice! A simple, yet functional contact form is already included. To add it, first create a new page (not a post), switch to the HTML editing tab, and add the following tag: <!--spamfree-contact-->, as shown in the following screenshot:
The WordPress SpamFree contact form doesn't have many bells and whistles, but if all you need is a simple form that customers can use to contact you, it suffices nicely.
Contact Form 7
Download link: http://bit.ly/contact-form-7
If you require more than a single contact form on your site, consider the Contact Form 7 plugin. It supports multiple forms, basic customization via simple markup language, CAPTCHA support, and spam filtering via Akismet.
Usage is similar to the WordPress SpamFree contact form. To add a new form, create a new page (not post) and add the following tag: [contact-form 1 "Contact form 1"].
Download link: http://bit.ly/cforms
The cforms II plugin offers a plethora of configuration options for your contact form. If you need ultimate control over the customization of your form(s), cforms II will not disappoint you. A small sample of the options are included here:
- Multiple forms
- AJAX-supported form submission
- File attachment support
- Timing and submission limits
- Widget support
Adding a business blog
Up to this point, we've worked hard to convert WordPress from a traditional blogging platform into a more appropriate business platform. However, we can't deny that blogging is ultimately the strength of WordPress. Business blogging is rapidly becoming more popular. Although you can certainly create a functional e-commerce site with WordPress using nothing but static pages and the WP e-Commerce plugin, the addition of dynamic content on a blog helps give your shop a personal element. It provides the customer with a sense of the face and personality behind the store. If nothing else, it can serve as a medium for communication between you, as a store owner, and your visitors.
Adding a business blog only takes a few clicks. As we created a static front page earlier, we first need to create an empty page that will serve as the placeholder for the blog. In your WordPress Dashboard, add a new Page. Give it a title, such as Blog. You don't need to add any content to the page.
Just like when we created a static front page, navigate to Settings and click on Reading. Underneath Reading Settings, click on the drop-down list next to Posts page and choose the Blog page that you created. The Reading Settings options are shown in the following screenshot:
What we have just done is select a default location for all of the new posts that we will create as part of our business blog. As our site uses a static front page, it will remain the same, but all new posts will show up on the Blog page.
See for yourself. If you write a new post, it now appears as part of our business blog. The following screenshot shows the Blog page:
Congratulations! You have now completed all of the basic prerequisites needed to prepare your WordPress site for use as an e-commerce platform. In this article, we covered:
Your store-in-progress should now look and act much more like a business platform and much less like a blog.
If you have read this article you may be interested to view :