Add Product to WordPress/WP-eCommerce Website

Here’s a quick tutorial on how to add and edit products using the WP-eCommerce Plugin on a WordPress site.

Login as WordPress Admin

Go to Products–>Add New

Step 1 – Add Product Information

1. Enter name of product in ‘title’
2. Enter description of product in editor area
3. Tag product to one or more categories
4. If adding a new category, make certain that you assign it to the correct parent category.
5. Enter Price the price of the product.  You may also enter a sale price if this item is currently on sale.
6. Enter Shipping Weight and Dimensions or alternatively set a Flat Rate shipping amount for this product.  Make sure these setting are accurate to ensure a reliable shipping estimate for the customer at checkout time.
7. Optionally enter SKU under Stock Control if you want the system to track inventory for this product.
8. Taxes are typically setup in the Store Configuration and calculated automatically during the checkout process.

Step 2 – Adding Product Images

1. Under ‘Product Images’ tab, click ‘Manage Product Images’.
2. Choose the ‘From Computer’ tab
3. Click ‘Select Files’ and choose one or more files you have stored on your hard drive
4. Enter a short description of the product in the ‘Alternate Text’ field. Be sure to include a keyword or two for Search Engine Optimization purposes.
5. Click the ‘Use as Product Thumbnail’ link
6. Click ‘Save Changes’
7. Exit by clicking outside the ‘Manage Your Product Images’ box

Click ‘Publish’ to add the product to your store, or select ‘Save Draft’ if you want to save changes, to publish later. Once saved you can click ‘View Product’ to view the item in the store as a customer sees it.

Fix GIF Thumbnails with Black Background in WordPress

I have a few website that I’ve designed in WordPress using a shopping cart plugin, and then trained the owner how to insert new products along with images of the products.  After the client uploaded a hundred or so products we found that all the thumbnails WordPress automatically generated had black backgrounds.  All of the client’s images were gifs.  Here’s a quick fix:

Step 1 – Edit WordPress media.php

Edit the WordPress file /wp-includes/media.php and edit starting on line 422:
$newimage = wp_imagecreatetruecolor( $dst_w, $dst_h );
if(IMAGETYPE_GIF == $orig_type){
$black=imagecolorallocate($image, 0,0,0);
imagecolortransparent($image, $black);
}
imagecopyresampled( $newimage, $image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);

This doesn’t preserve the tranparency, but sets the black background in the image to transparent just before the thumbnail is created. FYI, this will most likely be overwritten next time you update WordPress.

Step 2 – Regenerate Thumbnails

Step 1 only covers thumbnails that will be created in the future, so we need to regenerate the thumbnails. Luckily, you don’t have to do all of this manually, you can install the Regenerate Thumbnails plugin. Once you run that plugin, all your thumbnails should be fixed!

Sources: http://core.trac.wordpress.org/ticket/13461

How to Properly Structure Web Content

Audience

This article is intended for people who use a content management system like WordPress to blog or create & maintain your website, but the overall concepts apply to all web design, regardless of what platform you use to create/manage your website.

Goals

1. Create an ideal webpage structure for easy reading
2. Maintain style consistency throughout entire site
3. Help search engines understand what the web page is about

Structure your Web Page Like a Newspaper Article

A few key points:

• The most important story a newspaper has is on the front page (think home page).  Other articles follow in order of importance.
• If you were to read only the headings and subheadings of newspaper articles, you would have a fairly decent idea of what the story is about.  If you read the paragraphs below the headings, you get more detailed information as you go.

Use Heading Tags for SEO & Readability

Search engines look at your web page in a similar way – they assume if you put something in a heading tag (h1, h2, etc) then it’s probably important, and is a good indicator on what your web page is about.

If you use a content management system like WordPress, and you just make some words a different color and bigger, that doesn’t make it a heading (as far as a web designer or search engine sees things).  You must actually declare it as a heading tag, which is usually available under the ‘Format’ menu in the editor.

To create a heading tag:

1. Highlight the words you want to make a heading
2. Go to ‘Format’
3. Select the desired heading tag

Typically you have the options for H1 (main heading) all the way through H6 (subheadings).

Why Using Heading Tags vs Manually Styling is Better

• Search engines won’t recognize it as being important text in relation to other paragraph text surrounding it.
• Far more effort involved up front
• Far more effort involved if you decide to change the color of every heading site-wide
• Sloppy HTML

But How Can I Change the Color/Font/Size of the Headings?

Typically, that is a web designer’s job.  The font, color, size, etc of headings are declared in the cascading style sheets for the website.  A style sheet is a separate file that’s included on every page of your website that says, for example: “style all H1 tags as Times New Roman, 20px and blue”.

If you wrap all your main headings and subheadings in heading tags, your web designer can quickly & easily change the color, size, etc of all the heading tags for your entire site in one place, which is certainly easier than going through every single page of your website.

Companion Video

I created a companion video for this tutorial – looking to improve it over time, but this should help out!

How to Unlock a Google Apps Account

The other day my Google Apps account randomly stopped working in my Mac Mail application.  The ‘the password you entered is invalid’ error kept popping up, even though I knew it was correct.  After some digging, I found that occasionally a Google Apps account might become locked for one reason or another.  Unfortunately the problem and the fix wasn’t obvious, but I eventually found a solution.

To unlock your Google Apps account, go to: https://www.google.com/accounts/UnlockCaptcha?, fill out the Captcha, and your account should unlock.

Feel free to leave comments or possible reasons for why a Google Apps account might get locked.

WordPress Auto Update Problems

I always say “WordPress is a double-edged sword”.  It’s pretty cool that you can get a website up and running so quickly, but there are so many problems that are a result of so many versions, incompatible plugins, and server configuration issues.  I just finally solved one issue I’ve been having for quite a while – WordPress failing on an automatic update.

The fix that is quoted on so many blogs was to delete the wp-content/uploads folder and try again, which never worked for me.  I then stumbled upon a blog which pointed me the right direction – change your server configuration to use  proFTP instead of pureFTPd.   I have a Storm on Demand account (Through Liquid Web) and was able to change this in WebHost Manager in under a minute.  Violia!  Now I’m able to do auto updates as intended!

Cudos to Darcy for figuring this one out!  View source

MYSQL Query – Sort Alphabetical Exclude Articles (‘a’, ‘an’, ‘the’)

I just ran across this query I had to construct a while ago which can be useful when trying to sort alphabetically, but some of the data contained the articles ‘a’, ‘an’, or ‘the’ which alphabetized the results incorrectly. This query could be useful in a number of situations – album titles, company names, movie titles, book titles, and more.

For example, ‘The Big Lebowski’ ought to appear in the B’s, but if you simply did this query, it will show up in the T’s.

SELECT `id`, `title` FROM `movies` ORDER BY `title`;

With a little MYSQL magic, we can sort alphabetically by title, ignoring any leading articles, while still preserving the full title.

SELECT `id`, `title` FROM `movies` ORDER BY TRIM(LEADING 'a ' FROM TRIM(LEADING 'an ' FROM TRIM(LEADING 'the ' FROM LOWER(`title`))));

Basically the ORDER portion of the query just trims off any instances of ‘a’, ‘an’ or ‘the’ (case insensitive) to get the desired order, but the column `movies` will still return the full, unaltered title.

Convert Dynamic Website to Static HTML Files

I design every site in PHP, even if there isn’t a database involved.  Why?  It actually saves me time and my clients money. By creating a ‘template’ page called index.php and dynamically inserting the page title, meta tags, menu, content, and anything else that changes on a page-by-page basis, a website can be much more dynamic and easier to update and maintain.

The advantages of this technique are huge – if a client wants to add a page to the menu, it only takes a minute, instead of hours (if you are dealing with a large website).  Sure there’s always search & replace functions, but that will inevitably lead to mistakes & inconsistency.

So What’s the Downside?

The only downside of this technique is that some people don’t like or understand the query strings in the url that result from this method.  For example the URL for Jellyflea Web Design’s portfolio page is:

http://www.jellyflea.com/index.php?p=portfolio

Now, being a web designer, that doesn’t bother me in the least, but some clients prefer to see something more familiar like:

http://www.jellyflea.com/portfolio.html

Mod_Rewrite to the Rescue!

Luckily, thanks to Apache and mod_rewrite you don’t have to abandon the dynamic page generation.  You can include an .htaccess file that looks something like this:

RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.jellyflea\.com$ [NC]
RewriteRule ^(.*)$ http://www.jellyflea.com/$1 [L,R=301]
RewriteRule ^(.*)\.html$ /index.php?&p=$1 [L]

Now when someone goes to http://www.jellyflea.com/portfolio.html they get redirected without ever knowing it.

Convert Existing Links from Dynamic to Static

Sometimes the client will request this after the design is done, which forces you to update all your links to match the new html format.  Luckily, you can do a search and replace function in your regular expression equipped text editor.  Here’s instructions on how to replace all instances of links with the new format by using Smultron.

1. Open all your files as a project.
2. Go to Edit->Find->Advanced Find and Replace
3. Choose “Current Project”
4. Find: index.php\?p=([\w-$]+)
5. Replace: $1\.html
6. Click “Replace”

… and index.php?p=page-name is replaced with page-name.html.