How to create a customized homepage for your store traffic site

When using WordPress for a store traffic site, I like to create a customized homepage in order to give people various information about my store, the categories in it, my shipping information, any specials I am offering, and also display my most recently published articles and product showcases.

The below image shows an example of a customized wordpress homepage using the Atahualpa theme (version 3.2).

Creating a page like the one displayed above is covered by this article. As you can see this particular layout has:

A link to the store

Setup as a home page kicker in atahualpa

A headline and introductory blurb

To give customers a bit of information about your store

A featured categories section

To list featured categories in your store

These can link directly to your store, to category showcases, or to category directories.

An incentives section

This can be used for anything, but in the above page it is used to show incentives for buying from that particular store.

A shipping information section

In this case it notes that shipping is combined on all orders, that all new packaging is used, and provides a link to the sites shipping details page

The most recent product showcases and articles on the site

These are shown automatically as they are posted on the right side of the page.

The number to show can be manually set.

If using my product showcase module, links to product showcases on the right also provide direct links to view the item on the store as well as the store category that the item is in.

Requirements for using the below homepage as is

If you want to be able to use this homepage without having to modify theme files, then you will need to be using the Atahualpa theme ( version 3.2 ). These instructions do not currently work for newer versions due to changes in the theme.

Of course, with a bit of work you can probably work it into any theme.

Note: All instructions below assume that:

You are running WordPress with the Atahualpa 3.2 theme activated.

These files will require some editing for other themes

You are hosting your files on Hostgator

For other hosts, they should be good enough as long as you are running on a linux server and/or using cpanel

Of course, some steps provided might not be exactly right, but they should be good enough to get things setup.

Step 1: Adding the customized homepages CSS entries

Before you place up the customized homepage and edit it, you should first add the styling sections to it.

Adding CSS Sections to Atahualpa

Copy the text in the below box

Click in the box

Select "Edit" → "Select All" from the file menu.

Select "Edit" → "Copy" from the file menu.

/* entire wrapper for home page */
table.pws-home-wrapper {
	border: none;
	background: #FFFFFF;
}

/* left side of home page (table) */
td.pws-home-left {
	border: none;
	background: #FFFFFF;
        width: 50%;
        vertical-align: top;
}

td.pws-home-left table {
	border: 1px solid #CCCCCC;
	background: #FFFFFF;
        width: 95%;
}

/* each item in left side of home page (table) */
.pws-home-lbone {

}

.pws-home-lbtwo {

}

.pws-home-lbthree {

}

/* right side of home page */
td.pws-home-right {
	border: none;
	background: #FFFFFF;
        vertical-align: top;
}
td.pws-home-right table {
	border: none;
	background: #FFFFFF;
}

/* tables containing post pieces in right side of home */
table.pws-home-item {
	border: 1px solid #CCCCCC;
	background: #EEEEEE;
}
/* title of each post */
.pws-home-itemhead {
	font-weight: bold;
        border: 1px solid #CCCCCC;
}
.pws-home-item td {
        border: 1px solid #CCCCCC;
}
.pws-home-item td a.more-link {
        float: right;
}

.pws-home-itembody img {
	width: 60px;
	height: 48px;
	float: left;
	margin-right: 0.5em;
	margin-bottom: 0.25em;
}

.pws-home-itemfoot {
	text-size: 85%;
}

Paste the copied text into Atahualpa’s CSS Inserts

To do so:

Log into wordpress

Select "Appearance" → "Atahualpa Theme Options" from the admin menu.

This will load the Atahualpa Theme Options page

Select "HTML/CSS Inserts" from under the Atahualpa Theme Options header

This will load the HTML/CSS Inserts page

Find the "CSS Inserts" box and paste the css into it

Scroll to the bottom of the box.

Put your cursor at the end of the last line of text.

Press enter on your keyboard to create a new line.

Select "Edit" → "Paste" to add the css entries.

Save your changes

Select the "Save Changes" box at the bottom of the page.

Now that you have your css entries added, it is time to get the homepage file, edit it, and place it on your site.

Step 2: Download the customized homepage file

Download my Atahualpa Customized Homepage One file

Save it somewhere that you will find it.

Extract the contents of atahualpa-customized-homepage-one.zip

The only file in it is home.php.

Most people can download zip files easier than php files.

See how to extract zip files on windows if you need help.

Step 3: Edit the contents of home.php

Now that you have the customized homepage downloaded and extracted, it is time to modify it for your site.

Open home.php in the editor of your choice.

Click it with your right mouse button and select "Edit" if you are using windows

Edit the headline for your page

Scroll down and find the section that has <!– Post Headline –> above it.

Edit the headline for your page

Replace HEADLINE-FOR-YOUR-PAGE with the headline you want for your homepage.

I recommend using at least one of your sites primary keywords in the title.

See Basic Keyword Research and Domain Keyword Research if needed.

Edit the Top Left Box

This box is designed to link to your category showcases, category directories, and store categories.

Edit the Box Header

Scroll down to the section that starts with <!–Left Box One–>.

Replace FEATURED CATEGORIES HERE with an appropriate header

If possible, keep it short and include one of your targeted site keywords.

Edit the Box Contents

The box contains both an introductory blurb and category links

Change the introductory blurb

This is located inside of <p> and </p> tags.

If you can make it sound natural, use at least one of your site targeted keywords in it.

Change the links

For each link:

• Replace CATEGORY-SHOWCASE-LINK with a link to a category showcase, category directory, or category on your store.
• Replace CATEGORY-TITLE with a short, descriptive title for the link.
• Replace CATEGORY NAME with the name of the category to link to.

If you need more links:

Add new <li><a href=""></a></li> lines among those that are there and edit them.

Edit the link to your store

Replace the URL displayed with the URL to your store.

• Bonanzle sellers just need to replace BOOTH-NAME with the name of their Bonanzle booth

Replace BOOTH-TITLE with a short descriptive title for your store

Edit the 2nd Left Box

By default, the second box on the left side is used to display incentives and/or reasons to buy from you rather than someone else. Of course, you can use it for whatever you want.

To start editing it for your site, scroll down and find <!–Left Box Two–>

Edit the Box Title

Find BUYING-FROM-US-OR-INCENTIVES-TITLE.

Replace it with the title you want for the box.

If you can think of a good, short phrase which contains one of your main site keywords, do so…but don’t sweat it.

Something like "Why by from (storename)" or "Reasons to shop with" might be decent.

Edit the Box Contents

This box contains a short preface followed by a few links.

If you don’t want links, remove the <a href="LINK-HERE"> and </a> tags from around an item.

Replace the "When you buy from us…" blurb

Keep the P tags around it.

Use at least one broad site keyword if you can make it sound natural to do so.

Add any links or pieces of information you want displayed

You can create posts and link them here.

You can link pages on your site or store.

For each link:

• Replace LINK-HERE with the URL of the page you want to link to.
• Replace LINK-TITLE with a quick introductory title to the item being linked.
• Replace NAME-FOR-LINK-HERE with the name you want for the link.

Update or remove the blurb after the links

If you want more information after the links, edit the line after them that is between <p> and </p> tags.

If you don’t want information after the links, delete everything from the line <!–second section–> to <!–end second section–>

Edit the 3rd Left Box

The third box on the left is intended to give people quick information related to shipping, handling, packaging, etc.

Of course, you can put anything you want in the box.

Edit the Box Title

Replace SHIPPING-PACKING-OR-WHATEVER-TITLE with the title you want.

Something like YourStoreName Shipping Details might be good.

Edit the Box Contents

This box contains a short preface followed by a bulleted list then another short informational blurb.

Replace the intro blurb

I recommend leaving the <p> and </p> tags in and only updating the text between them.

Edit the list items

Each list item is between <li> and </li> tags.

You can add more items by copying a line and placing it in with the others.

You can remove items by deleting an entire line

Edit the second blurb

If you have a shipping details page, place the URL to it between the quotes after href=

If you want a shipping details page, create a new page for shipping details

If you don’t want a shipping details page, remove and/or replace everything between the <p> and </p> tags in the second blurb.

Adding more boxes on the left

If you want more boxes on the left side, you can create a new table before, between, or after the existing boxes.

The base of the table should look like:

<table class="pws-l-default">

<tr><td>

YOUR CONTENT HERE

</td></tr>

</table>

When entering information in the box, I recommend enclosing text which is not part of a list inside of <p> and </p> tags to make it display nicely.

You could have whatever you want in these boxes. Some ideas:

• Your picture with a brief biography linking to your about page
• Lists of good articles related to what you sell
• Offers for magazines, books, or other items related to what you sell
• Free ebooks related to the items you sell

When finished making changes, save this file

Select "File" → "Save" from the file menu.

Step 4: Prepare your posts for your modified home page

Your home page will look quite funny if you include entire posts in it.

Before you place your homepage up, you should go through all of your existing posts and be sure to place a <!–more–> tag after the first sentence or two.

The more tag tells WordPress to only show the content before it on post which make use of it when displaying them on archival pages…or this customized home page.

Step 5: Modifying Atahualpa Theme Options

To get posts on your front page to show properly, you should alter the more tag settings within atahualpa theme options.

Make sure Posts or Excerpts on Home page is set to "Full Posts"

Select "Appearance" → "Atahualpa Theme Options" in the admin menu

Select "Posts or Excerpts" under the Atahualpa Theme Options header

Next to "Posts or excerpts on HOME page?", make sure that Full Posts is selected.

Make sure that "Show the first X posts…" is greater than zero. It should be set to the number of posts you want displayed on your home page. If you get an empty right side on your home page, this is the problem.

If you changed it, select "Save Changes" at the bottom of the page.

You should also be sure that the right sidebar is not displayed on your homepage

Disable the right sidebar on your homepage.

To do this:

• Select "Appearance" → "Atahualpa Theme Options"
• Select "Sidebars" from under the Atahualpa Theme Options header.
• In the "Right Sidebar: Display on" section, uncheck "Homepage"
• Save your changes

Step 6: Upload your custom home.php page

Now that everything is prepared, upload your home.php file

Upload home.php to the atahualpa theme directory on your server

This should be /public_html/wp-content/themes/atahualpa if you are using hostgator and have installed wordpress on the root of your website.

Review your customized home page

If you see any posts on the right side with a large amount of text, you probably forgot to add a <!–more–> tag to such posts. You will know it needs such a tag for sure if there is no "Read more →" link at the bottom of the post.

If you want to make further changes, you can either use the built in editor or edit home.php locally and re-upload the file.

If there are serious problems which you cannot fix immediately, delete the home.php file you uploaded off of the server and things should return to normal.

Step 7: Adding Special Sections (Atahualpa Only)

If you are using Atahualpa, each post and page is made of five parts:

• A Kicker (displayed above the headline)
• The Headline (you create this for each post or page)
• A Byline (displayed between the header and the body)
• The Body (you create this for each post or page)
• A Footer (displayed under the body)

For this theme, I recommend setting up your home page kicker and your home page byline.

Creating your homepage Kicker

This will be displayed above the title on your home page.

Go to Post/Page Info Items in Atahualpa Theme Options

Select "Appearance" → "Atahualpa Theme Options"

Select "Post/Page Info Items" under the Atahualpa Theme Options header

Edit KICKER: Homepage

I recommend a link to your store.

<a href="STORE-LINK" title="DESC">LINK-NAME</a>

You might have it read Visit the (link) today!

Edit BYLINE: Homepage

I recommend an introductory blurb for your site.

This will be placed between the header and the rest of the page.

Save your changes

Select "Save Changes" from the bottom of the page

Reload your home page and you should now display your kicker and byline.

Similar Posts:

• How to create category showcases for your store traffic site
• How to create category directories for your store traffic site
• Setting up kickers, bylines, and footers for Atahualpa themed sites