Privateer Web Solutions » atahualpa

Setting up kickers, bylines, and footers for Atahualpa themed sites

Privateer Web Solutions — Fri, 03 Jul 2009 06:31:53 +0000

If you are using the Atahualpa theme, be sure to consider using kickers, bylines, and footers for your pages.

Atahualpa pages and posts generally are made up of five parts:

The Kicker (displayed above the post or page title)
The Header (you enter this when you create content)
The Byline (displayed between the header and body)
The Body (you enter this when you create content)
The Footer (displayed after the body)

By default, the main one that is put to use is the footer, which shows the number of comments, tags, etc. for a post or page.

The Kicker, the Byline, and the Footer are shared between types of objects.

The Homepage

You can set a custom kicker, byline, and footer on your home page.

The header can be a good place to put a link to your store, while the byline makes a good spot for key links or a description of what you offer.

Multi-Post Pages

These are pages (such as category pages and archives) where multiple posts are displayed at a time.

Any kicker, byline, or footer you setup for Multi-Post pages will be shared by all of them and displayed for each post.

For a selling site, I prefer to place only the post date (in the byline), but you might want to display the author, tags, categories, or other information.

Single Post Pages

Kickers, bylines, and footers set for single post pages will be displayed on each individual post.

Some common uses for them are:

Displaying the date, author, tags, and/or categories for the post
Displaying site wide offers or informational links

Single Page Pages

Kickers, bylines, and footers set for "Page" pages are shared between them and displayed on each page.

Some common uses for them are:

Displaying the date and/or author for the page
Displaying banners, offers, widgets, or links

Customizing Kickers, Bylines, and Footers

Read the Post Info Items information: Log into WordPress; Select "Appearance" → "Atahualpa Theme Options"; Select "Post Info Items"; Read the information displayed there.

How to create a product showcase for your store traffic site

Privateer Web Solutions — Fri, 03 Jul 2009 03:28:59 +0000

You can create product showcases on your store traffic site to showcase various products that you offer.

Deciding on products to showcase

If you have only a few products, then it might make sense to create showcases for all of them.

If you have a lot of products, then you should consider showcasing a couple of products for each category showcase on your site.

When deciding which products to showcase, I recommend using the following guidelines:

Showcase your top selling products: I recommend your top selling products because they have a proven track record of selling to people who find them.; If you increase the number of people who find them, your sales will likely increase as well.
Showcase your top viewed products: Those which are getting the most views tend to have the most people looking for them.; However, if you are getting a lot of views but no buyers, you might want to take a look at such items and see if there are changes to their listings which could be made in order to increase the percentage of people who buy such items.
Showcase your most saught after products: If you are not sure what your top sellers are or which products are being viewed the most, you can do keyword research for various products and try to find those which there are the best mix of demand and competition for.; See my basic keyword research information.

Creating a Product Showcase Post

The instructions for creating a product showcase will typically be theme specific, though you can certainly use them to come up with ideas for creating your own showcase from scratch.

Note: The following instructions are for the Atahualpa Theme, v3.2.
These instructions will not work for newer Atahualpa versions!

Part 1: Create an images folder for your website

This step is entirely optional, but recommended as it will allow you to easily store images for your product showcases on your own server. There are plenty of other options out there, but if you do as these instructions show you will be able to enter the image name by itself to display images on your own server.

Part 1: Create an /images/products directory on your server

• Instructions for Hostgator w/ cpanel

Log into cpanel: Instructions for doing so are in your welcome email.
Open the file manager: Find the "File" section in cpanel; Select "File Manager" from it; If the "File Manager Directory Selection" box comes up, make sure that "show hidden files" is unchecked then select "Web Root" and "Go".
Browse to your web sites root directory: This should be /public_html/; Click the folder in the left panel that is labeled "public_html"
Create an "images" directory: Select "New Folder" from the top menu.; It looks like a folder with a green plus on it.; A dialogue box will come up.; Make sure that your root folder is displayed in "New folder will be created in"; Type images into the Folder Name box; Select OK to create the directory
Browse to the newly created images directory: Locate the new images folder under the public_html folder on the left.; Select the images folder; The main display where contents are shown should read "no records found" if you just created the images directory.
Create a "products" directory in the images directory: Select "New Folder" from the top menu; Make sure that "New folder will be create in" displays the images directory; It might read /public_html/images/.; Enter "products" for the name.; Select "OK" to create the directory.

You now have a place to upload images for your product showcases to without using the WordPress interface or relying on someone else to host images for you.

However, to make use of this you need to tell the web server not to allow wordpress to rewrite urls if they start with /images.

Part 2: Disable URL rewrites on /images

Open your root sites .htaccess file for editing

Log into cpanel

Open the File Manager

Select /public_html/ from the left menubar

Find .htaccess in the display on the right.

Check the box next to .htaccess

Select "Edit" from the top menu.

If a "Text Editor" warning box comes up, select "Edit"

Add a rewrite rule to disable rewriting /images and its subdirectories

If .htaccess currently contains only a section which starts with #BEGIN WordPress and ends with #END WordPress:

Create a new line before the #BEGIN WordPress block: Place your cursor at the start of the #BEGIN WordPress line.; Press enter on your keyboard to move it down a line.; Move your cursor to the beginning of the new line you created.
Add your new rewrite rule to prevent rewriting /images: WARNING:These are case sensitive! Enter exactly as shown.; Type the following lines in (or copy them) one per line:; RewriteEngine On; RewriteBase /; RewriteRule ^images/.*$ – [L]
Select "Save Changes" to save your changes

If .htaccess contains other information:

Look for a line which reads: This should not have #BEGIN WordPress above it!
Look for the following two lines inside of that block:: RewriteEngine On; RewriteBase /
If you find them, add the following line somewhere after them: RewriteRule ^images/.*$ – [L]
IMPORTANT: The above RewriteRule line should be within tags
Save your changes: Select "Save Changes" just above the file screen

Once you are done doing this, load your site and make sure that it still loads properly. If it does not, then undo the changes you made to .htaccess by editing it again and removing what you added.

If everything looks good, you now have a place to put images that you can reference directly with links like http://yourdomain/images/this.gif or http://yourdomain/images/products/that.gif

Part 3: Add necessary CSS styles to Atahualpa

Before creating a product showcase, it is good to add the CSS entries that it will use. This way your product showcase will display properly as soon as it is added.

The styles to be added can be copied from the box immediately below:

/* Product Showcase Table
	changes here alter everything in the product showcase
*/
.pws-sing-wrapper {

}

/* Product Showcase Top Section table data
	changes here alter everything in the top section
*/
.pws-sing-top-wrapper {

}

/* Product Showcase Top Internal Table data
	changes here alter things inside the top section
	not including the containing table data entry
*/
table.pws-sing-top-item {
	border: 1px solid #CCCCCC;
	width: 99%;
	vertical-align: top;
}
table.pws-sing-top-item tr th {
	background-color: #FFFFFF;
	border-top: 1px solid #DEDFDE;
	border-right: 1px solid #DEDFDE;
}
table.pws-sing-top-item tr th h1 {
	font-size: 100%;
	margin-top: 0.125em;
	margin-bottom: 0.125em;
}
table.pws-sing-top-item tr td {
	border: none;
}
/* The image for the product showcase */
.pws-sing-prod-image {
	width: 200px; margin-right: 5px;
}

/* Bottom left section of product showcase (special offers and related products) */
.pws-sing-left-wrapper {
	vertical-align: top;
}

/* Individual tables within bottom left section */
.pws-sing-left-item {
	margin-right: 5px;
	margin-top: 10px;
	width: 200px;
	border: 1px solid #CCCCCC;
}
.pws-sing-left-item tr th {
	border-right: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
}
.pws-sing-left-item tr td {
	border: none;
}
/* Main body information */
	.pws-sing-right {
}

/* ARCHIVE CUSTOM CSS MODS */
/* to alter the display of the archive thumbnails */
.pws-arch-thumb {
	float: left;
	margin-right: 0.25em;
}

/* makes the h1 look normal for product showcases
  - an ugly hack, but necessary */
table.pws-sing-top-item tr th {
	background-color: #FFFFFF;
	border-top: 1px solid #DEDFDE;
	border-right: 1px solid #DEDFDE;
}
table.pws-sing-top-item tr th h1 {
	font-size: 100%;
	margin-top: 0.125em;
	margin-bottom: 0.125em;
}

Copy the text from the box above: Click in the box; Select "Edit" → "Select All" from the file menu.; Select "Edit" → "Copy" from the file menu.
Log into WordPress
Add the copied text to the end of your CSS Inserts: Select "Appearance" → "Atahualpa Theme Options" from the wordpress admin menu.; Select "HTML/CSS Inserts" from under the Atahualpa Theme Options header on the right.; Scroll down and locate the "CSS Inserts" box.; Place your cursor in the last line of the box.; If needed, create a new line by placing your cursor at the end of the last line and pressing the Enter key on your keyboard.; Select "Edit" → "Paste" from the file menu.; Select "Save Changes" from the bottom of the page to save your changes.

Part 4: Change Atahualpa Settings

I recommend doing the following if you are going to use this product showcase:

Disable the Right Sidebar on single post pages

To do so:

Log into WordPress.
Select "Appearance" → "Atahualpa Theme Options".
Select "Sidebars" under the Atahualpa Theme Options header.
In the "Right Sidebar: Display on" section, uncheck "Single Posts"
Save your changes

Part 5: Add Files to Your Atahualpa Theme

Below are links to the various files that are needed by this product showcase modification.

Note: These files are intended for the Atahualpa theme version 3.2.
They will need modification if used with other themes or newer versions of Atahualpa!

How this modification works

By default, Atahualpa uses only index.php to display pages.

WordPress uses a hierarchy to decide what files to use when displaying particular types of items.

Because of this, this theme simply overrides default functionality for the display of single posts and archives by adding single.php and archive.php files to your existing atahualpa theme.

Since this makes no changes to existing Atahualpa files, you can disable this functionality by simply removing the added files.

Adding the product showcase files

Download the following file:: You may need to right click them and select "Save as" or "Save Target As"; atahualpa-product-showcase-one.zip; Updated 2009-07-08 – fixed minor errors to home.php
Extract product-showcase-one.zip: See Windows Zip Extraction Instructions for help extracting this file.
Upload these files to the atahualpa theme directory on your site: It should be something like /public_html/wp-content/themes/atahualpa/; See my article on how to upload files with FTP for instructions if needed.

Once the files are uploaded, you will want to make a few edits to them before creating a product showcase post.

Part 6: Editing product showcase files

Each of the files above, with the exception of single.php and archive.php are intended to be used in creating sections of product showcases.

To make them specific to your store and site, you will need to edit at least some of them.

You can use the WordPress theme editor to edit them once they are uploaded.

Opening a file in the WordPress theme editor: Log in to wordpress; Select "Appearance" → "Editor" from the wordpress menu; Once it loads, locate the file you want to edit on the right side of the editor; Select the file to load it.

Accepted Payment Types

The file ps-accepted-payments.php is used to display the accepted payments block seen in the product showcase at the top if this page.

If you offer non-standard payment methods, you might consider creating posts about them and making their names into links to your post.

If you do affiliate sales, you might also make links to any online payment methods as affiliate links.

Editing ps-accepted-payments.php

This file contains your list of accepted payments in html format.

You can add anything to it that you could add to normal html.

Update it to reflect the methods of payments you accept then save your changes.

Contact Us Link

This file contains the Contact Us link that is displayed in the line immediately underneath of the product title.

You can make it a link to wherever you want, but I recommend linking either to the contact page on your site or, if your store has one, the contact page on your store.

Editing ps-contact-link.php

Update the url in it to be that of your contact page then save your changes.

Inline Offers, Generally

Inline special offers are displayed in the top section underneath of Accepted Payments.

While they are meant to give customers small pieces of textual information or display offers to them, they can be used to do just about anything…videos, widgets, the sky is the limit. If you can do it with html and javascript, you can do it in these boxes.

To seperate lines nicely, don’t forget to use
if you want them close together or if you want them a bit further apart.

Inline Offer One

Editing ps-inline-offer-one.php

The contents of this file are displayed when you set the post meta data item pws-Inline-Offer-One to the value 1.

If applicable, I recommend placing the following types of information in this box:

That you ship worldwide
That you combine shipping
Buy so much and get a discount

Inline Offer Two

Editing ps-inline-offer-two.php

The contents of this file are displayed when you set the post meta data item pws-Inline-Offer-Two to the value 1.

By default, this is placed below ps-inline-offer-one.

You might use this box to link to a manual on using the offered product, display video thumbnails, or anything else you want.

Custom Inline Offers

Although each product showcase can only display two inline offers each…which can be shared between products, you can create your own special offers and display them by doing the following:

Create a text file for your offer and save it as a php file.: For example: myspecialoffer.php
Upload the file to your atahualpa theme folder: Normally public_html/wp-content/themes/atahualpa/
Set the pws-Inline-Offer-One metadata value to the name of your uploaded file.: For example: pws-Inline-Offer-One → myspecialoffer.php

Special Offer Boxes, Generally

Special offer boxes are displayed to the left side of the content in product showcases.

You can set up to three of them per product.

These boxes are meant to:

Provide special offers to your customers
Link to related products that you offer
Provide short pieces of valuable information to customers
Link to relevant posts about the product you are showcasing

Of course, you can use them for whatever you want…displaying testimonials, placing videos or affiliate offers, etc. If you can do it with html and javascript, you can place it in a special offers box.

Please Note: Because these are created via included files, they are shared between products which specify them. If you want custom information relevant to a particular product, check Custom Special Offers below.

Special Offer One

Editing ps-leftbox-one.php

The contents of this file are displayed when you set pws-Left-Box-One to the value 1

By default, it uses the Recent Posts plugin to display product showcases in the same category as the current product showcase.

You can change this to display whatever you want.

Special Offer Two

Editing ps-leftbox-two.php

The contents of this file are displayed when you set pws-Left-Box-Two to the value 1

By default, it is setup to display special offers.

Edit it to display some of your relevant special offers or anything else you want.

Special Offer Three

Editing ps-leftbox-three.php

The contents of this file are displayed when you set pws-Left-Box-Three to the value 1

By default, it is setup for providing information to potential customers.

Feel free to change it to anything you want.

Custom Special Offers

Like inline offers, you can create custom special offers and set products to display them.

This is very useful when you have an offer which applies only to some products (or even an individual product).

Creating custom special offers is just like creating custom inline offers, except you set the pws-Left-Box-One/Two/Three metadata to the name of your custom offr file instead of setting pws-Inline-Offer-One/Two to it.

Now that you have everything setup, it is time to create a product showcase.

Creating a Product Showcase

Your first product showcase will take a little longer to setup than future product showcases as you will be creating metadata while you do so.

Create a new post

Select "Posts" → "Add New" from the wordpress menu

Enter your showcases information

Enter a name for your product showcase.

Enter the description for your product showcase.

Select tags and categories for your product showcase.

Setup your metakeywords and meta description in the Platinum SEO section.

Add the product showcase metadata pieces

To add a new metadata item:

Locate the "Add new custom field" box
Select "Enter New": You will see the select box change to an entry box
Enter the name for your meta data: This should be one of the names shown in the table below.
Enter a value for the meta data: This should be the value noted in the table below.
Select "Add Custom Field": This will add your metadata to the system.

Meta Data Listing
Meta Data Name	Meta Data Value
pws-Item-Store-Link	The full URL to this item in your store.
pws-Image-Single	The full URL to the image to show on your product showcase OR The name of the image if stored in /images/products/ on your server
pws-Image-Thumb	The full URL to the thumbnail to display on archive pages OR The name of the thumbnail if stored in /images/products/ on your server
pws-Category-Name	The name of this products main category
pws-Category-Store-Link	The full URL to the category that this item is in on your store
pws-Category-Site-Link	The full URL to your category showcase page for this product
pws-Inline-Offer-One	1
pws-Inline-Offer-Two	1
pws-Left-Box-One	1
pws-Left-Box-Two	1
pws-Left-Box-Three	1

Once finished, remove any entries that you do not want to show for this product showcase to start with. You only entered them to get the meta data names registered with the wordpress system so that you can select them when creating future product showcases.

Absolute Requirements for Proper Display

For the system to know that something is a product showcase:

You must specify a pws-Item-Store-Link: Posts without this meta data set will display as normal posts.

Additionally, if you want your showcase to look right:

Set pws-Image-Single: If not set, no image will be displayed on the showcase.; This can be a full URL; If you setup /images/products and placed the image in there, this can consist of just the filename.
Set pws-Image-Thumb: If not set, no thumbnail will be displayed in archive pages.; This can be a full URL or the image name (if in /images/products/ )
Try not to make your images too large.: If they are too wide, they will crunch up the top right box.; If they are too tall, they will push your content below the page fold.; If you really want a big image, consider making a custom special offer box, linking to a largish picture, and setting pws-Inline-Offer-One (or Two) to display it.
Make sure that the following plugins are setup and configured:: Recent Posts Plugin; Post Plugin Library
Configure the Recent Posts plugin to allow output in content:: Select "Settings" → "Recent Posts"; Select "Placement" under the Recent Posts heading; Set "Output in content:" to yes; Select "Save Placement Settings

Recommended requirements

In addition to the absolute requirements above, you really should set the following metadata for product showcases as well:

pws-Category-Name: This will display the category name on the product showcase.
pws-Category-Store-Link: This will turn the category name into a link to that category on your store.
pws-Category-Site-Link: This will turn the category name into a link to your category showcase page if no category store link was set or an extra link next to the store link if it was set.

Optional items

If you want inline options or special offers displayed, be sure to specify them.

Available box and inline offer metadata names:: pws-Inline-Offer-One; pws-Inline-Offer-Two; pws-Left-Box-One; pws-Left-Box-Two; pws-Left-Box-Three
Showing their default content.: To show default data, enter the number 1 into the value box and save it.
Showing built in custom boxes: Set the value to ps-leftbox-related-products.php to display related products; Set the value to ps-leftbox-special-offer-default.php to display the content of the default special offer if you set it up.
Showing your own custom boxes: Set the value to the name of the file you uploaded with your special offer.

Disabling automatic table hover hightlighting in atahualpa

Privateer Web Solutions — Tue, 30 Jun 2009 03:53:46 +0000

By default, Atahualpa causes sections of table to be highlighted when someone moves their mouse over them.

While that is nice, I prefer to control which tables have this effect.

Disabling Automatic Table Highlighting

Log into your WordPress admin panel
Select "Appearance" → "Atahualpa Theme Options"
At the top, under the Atahualpa Theme Options header, select "Tables"
Scroll down to "Hover effect for all tables?" and make sure it is set to No.
Save your changes

Enabling Highlighting on Chosen Tables

When you want hover highlighting on a table, add the class "hover" to the table in question.

If you normally use the visual editor when creating or editing posts, I recommend using the html editor for doing this.

Find the

entry at the beginning of the table in question and change it to

and the table will now have the hover effect.

Enabling both Highlighting and Striping on Chosen Tables

If you turn off both hover and zebra striping for tables and want both on one table, you just need to add both classes to the table. To add multiple classes to a single item in html you include them both with spaces between them.

The result would look like

Disabling automatic table striping in Atahualpa

Privateer Web Solutions — Tue, 30 Jun 2009 03:48:21 +0000

By default, Atahualpa stripes all tables that it displays. While table striping is nice, I find it a lot better to specify which tables I want to use striping on.

Table striping makes it much easier on the eyes to see what information is on each line.

The problem is that you may not want all tables to be striped. For example, many of the showcases I create use tables to display information simply because I find that getting results to look correct across different browsers is much easier that way…and striping makes them look quite odd.

Disabling Automatic Striping

Log into your WordPress admin panel.
Select "Appearance" → "Atahualpa Theme Options".
Select "Tables" under the Atahualpa Theme Options header.
Find the "Zebra stripe all tables?" section and set it to no.
Save the changes.

Making striped tables

With automatic table striping turned off, you can make individual tables striped by setting their class to zebra.

If you normally use the visual editor, use the html editor and find the

header for the table in question.

Add the zebra class so that it looks like

If the table already has a class, add a space after the existing class then the word zebra. A good example is if you want a zebra striped table with hover highlighting, which would look like

How to use your own logo with atahualpa

Privateer Web Solutions — Tue, 30 Jun 2009 03:44:24 +0000

If you are using the Atahualpa theme, you may want to replace or remove the three blocks which display to the left of your site title.

Removing the Atahualpa Blocks Logo

If you simply want no logo at all, you can stop displaying logos next to your site title by doing the following:

Log into your WordPress admin panel.
Select "Appearance" → "Atahualpa Theme Options".
Select "Header" from the options at the top.
In the Show logo image? section, delete the whatever is listed there.
Save your changes.

Replacing the Atahualpa Blocks Logo

If you would like to display a logo of your own next to your site title:

Upload your logo to "wp-content/themes/atahualpa/images" on your server.
Log into your WordPress admin panel.
Select "Appearance" → "Atahualpa Theme Options".
Select "Header" from the options at the top.
In the "Show Logo Image?" box, type the name of your image.
Save your changes.

For information on how to upload files, see:

How to upload files to your server with FTP

Tweaking the displayed Logo in Atahualpa

You can changes how your logo is displayed in Atahualpa by editing its’ style. To do so:

Upload your logo to "wp-content/themes/atahualpa/images" on your server.
Log into your WordPress admin panel.
Select "Appearance" → "Atahualpa Theme Options".
Select "Header" from the options at the top.
Find "Logo Image: Styling" and enter any style modifications you want there.
Save your changes.

Some obvious tweaks would be to adjust the margins, place borders around it, etc.

How to use your own banners with Atahualpa

Privateer Web Solutions — Tue, 30 Jun 2009 03:41:47 +0000

The theme Atahualpa can display banners if you wish it to. In fact, it can display random banners.

While there are quite a few options, this quick tutorial will cover setting up a single banner with the Atahualpa theme and the various settings within it which relate to displaying banners.

Banners in Atahualpa

Atahualpa has fairly good built in documentation on banners. To read it:

Log into your WordPress admin panel.
Select "Appearance" → "Atahualpa Theme Options".
Under the Atahualpa Theme Options header, select Header Image.
You will see the options you have available with information about each of them.

As noted at the top of the Header Image page, you should have your images wide enough to be displayed properly on your site, which depends upon whether you use a fixed width, maximum width, or no maximum width for it.

If you want rotating banners (displayed randomly when pages are served), upload multiple banners to "wp-content/themes/atahualpa/images/header" .

If you want a single banner to always be displayed, upload it to "wp-content/themes/atahualpa/images/header" and make sure that it is the only one there.

To create custom banners, use a program such as gimp ( a free graphics image manipulation program ), photoshop, or paint and save your banners as jpg, png, or gif files.

To upload your banners, see How to upload files to your server with FTP