Why Use WordPress for E-Commerce?

I have yet to find an e-commerce solution that I really like and that will do everything I need. Most of them are very complicated to do custom design on, or they are limited in terms of custom design in order to maintain functionality. The time-consuming nature of customizing e-commerce software is what makes an e-commerce site so expensive to make … and to be honest, most people don’t need a full-blown e-commerce solution because they won’t use most of the functionality, and/or they have very few products. Many people also don’t want a real store—they just want a way to throw in a few products into their content. So for those reasons, along with the ease of use and development of WordPress, finding a way to make WordPress work for e-commerce purposes makes sense.

Anatomy of a Products Post

Rockstar Wedding Planner has two main shopping areas: The products section and the coaching section. The products section is just a category listing disguised as a page — it uses WP_Query to pull all the posts from the products posting category and orders them by title. The loop then starts to display all the posts.

The first section is just a simple call to the the_title(); function in an h3 wrapper:

The second section calls the_content();, using the <!–more–> quicktag to control what is displayed on the page and what is displayed after the link.

The third section calls a price for the product, and a description for that price if it is available (which it is when there is more than one price option). It starts out by finding out if a price is listed using a custom field, displaying the description if there is one, and then displaying the price.

The code for that looks like this:

<?php if (post_custom(‘bundle_price’) == true) { ?><p><?php if (post_custom(‘bundle_price_descrip’) == true) { ?><?php echo post_custom(‘bundle_price_descrip’); ?> | <?php } ?>Price: <?php echo post_custom(‘bundle_price’); ?></p><?php } ?>

The fourth block is the actual add to cart button. Because the button and the surrounding code for the display stays the same for all products, I opted to just pull the link for this button from a custom field. The admin for the site simply pulls the store link for this product from their payment processor and adds it to the custom field.

Code:

<?php if (post_custom(‘bundle_link’) == true) { ?><div class=”btn-buy”><a href=”<?php echo post_custom(‘bundle_link’); ?>”><img src=”http://www.mcssl.com/netcart/images/cart_buttons/cart_button_12.gif” style=”border:none; background:none;” /></a></div><?php } ?>

The final block is a learn more link, which could possibly go to the rest of that post, or it could go to another page entirely.

This is also accomplished through custom fields, using an if statement to determine if there is a special link, or if the_permalink(); should just be called:

<div class=”btn-continue”><?php if (post_custom(‘bundle_learnmore_link’) == true) { ?><a href=”<?php echo post_custom(‘bundle_learnmore_link’); ?>”><?php echo post_custom(‘bundle_learnmore_text’); ?><?php } else { ?><a href=”<?php the_permalink(); ?>”>Learn More<?php } ?></a></div>

The coaching section pretty much follows the same functionality, with the biggest exception being that no link is display if a learn more link is not entered as a custom field, instead of using the_permalink(); as the else alternative.

Want a code-free version?

WordPress is built upon the structure of categories, posts and pages. Most modern E-Commerce software is built with categories, products and extra content pages. So why can’t "products" just be posts in the category of "products"? If you want to simplify this whole thing, you could just purchase an existing theme (or use whatever you are using now), and create a category of products. Inside this category, you would use a new post for every one of your products including the description, price, and a Buy It Now button. (Buy It Now buttons can easily be created through services like Google Checkout, PayPal and 1ShoppingCart.) Once you have all your products in, your "store" would then just be your category listing, for example /category/products/.

One note: Depending on your version of WordPress and how you edit your pages, it may not work to paste in button code for the visual editor. To solve this problem, enter your text into the visual editor, save the post, and then click on the HTML editor to put the button code in, clicking update post after you are done.

Hopefully I have given my readers some good ideas about what they can do with their own sites, but remember—if you get stuck, I’m always here to help!

Coming up: Part 2 will be on using WordPress with a custom, on-site cart solution. Part 3 will be about using a plugin to create a shopping solution.

I make a lot of sites that use WordPress as a content management system (CMS) but not with the blog as the front page. For these, I use posts and categories to make various sections of the site using custom templates. My latest example of that is the Blog, Q&A and Latest News sections of the site Hear Florida. For this, I wanted to make an archive page which lists all the categories, subcategories, and posts in what is technically the blog. I am sure someone is going to tell me that a plugin exists to do this thing, but as I tried two that didn’t work well, I had decided to give up and just use PHP. I also wanted to use as many standard WordPress calls as I could instead of just writing all my own functions.

In this exercise, this is what our final product will look like: All Blog Posts Archive » Hear Florida Audiology Group. It was created in a custom template called "All Posts Archive". I will be breaking this down by parts and explaining what each part means to help my readers not only see the code, but to know what each part does. I will break this down piece by piece, but as a preview our final code will look like the chunk below.

<?php
   $all_cats = wp_list_categories(‘hide_empty=0&echo=0&title_li=&exclude=1′);
   $cats_list = explode("<", $all_cats);
   $build_cat_structure = array();
   $array_counter = 0;
   foreach ($cats_list as $value) {
      $string_start = substr($value, 0, 3);
      if ($string_start == "li " || $string_start == "/a>" || $string_start == "/li") {
         continue;
      }
      elseif ($string_start == "ul ") {
         $build_cat_structure[$array_counter] = "start_child";
         $array_counter = $array_counter + 1;
      }
      elseif ($string_start == "/ul") {
         $build_cat_structure[$array_counter] = "end_child";
         $array_counter = $array_counter + 1;
      }
      elseif ($string_start == "a h") {
         $cat_name = explode(">", $value);
         $build_cat_structure[$array_counter] = $cat_name[1];
         $array_counter = $array_counter + 1;
      }
   }
   echo "<ul>";
   foreach ($build_cat_structure as $value) {
      if ($value == "start_child") {
         echo "<ul>\n";
      }
      elseif ($value == "end_child") {
         echo "</ul>\n";
      }
      else {
         $category_id = get_cat_id($value);
         echo ‘<li><a href="’ . get_category_link($category_id) . ‘">’ . category_description($category_id) . "</a></li>\n";
         $children = wp_list_categories(‘echo=0&child_of=’ . $category_id . ‘&title_li=’);
         $find_me = stripos($children, "No categories");
         if ($find_me !== FALSE) {
         echo "<ul>\n";
         $the_query = new WP_Query(‘cat=’ . $category_id);   
         while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID; ?>
            <li><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
            <?php endwhile;
         echo "</ul>\n";
         }
      }
   }
   echo "</ul>";
?>

The first part pulls the categories and puts them into a list. If you wanted to shape the final outcome of the display, you could change the settings of wp_list_categories() here. For example, setting hide_empty=1 instead of 0, you could hide any categories that you have without posts. I have chosen to exclude the Uncategorized category (category #1), but if you wanted yours listed just removed the exclude=1 part. Or, if you would like to exclude other categories, just list them by number (exclude=1,5,6 for example). The echo=0 is important here because it puts the results into a variable instead of displaying them.

   $all_cats = wp_list_categories(‘hide_empty=0&echo=0&title_li=&exclude=1′);

Once the result of wp_list_categories is dumped into the variable all_cats, it is broken apart into text chunks using the character < as the divider.

   $cats_list = explode("<", $all_cats);

This basically puts every html chunk into it’s own entry in an array. (If at any point you want to see your results, feel free to do a var_dump($last_variable); and it will show you what you are working with.) I do this to set up the processing of the information in the next set of steps.

   $build_cat_structure = array();
   $array_counter = 0;

This sets up an empty array which we will fill in the loop below, and starts our array key counter at 0.

   foreach ($cats_list as $value) {
      $string_start = substr($value, 0, 3);
      if ($string_start == "li " || $string_start == "/a>" || $string_start == "/li") {
         continue;
      }
      elseif ($string_start == "ul ") {
         $build_cat_structure[$array_counter] = "start_child";
         $array_counter = $array_counter + 1;
      }
      elseif ($string_start == "/ul") {
         $build_cat_structure[$array_counter] = "end_child";
         $array_counter = $array_counter + 1;
      }
      elseif ($string_start == "a h") {
         $cat_name = explode(">", $value);
         $build_cat_structure[$array_counter] = $cat_name[1];
         $array_counter = $array_counter + 1;
      }
   }

This is where I have it to loop through the array I made by the earlier explode() command to set up the final array which will produce the display. By taking the first three letters of each array item as a seed, I can see where the html is going and reflect that in the final build. If the string starts with something that doesn’t influence the final outcome (the start of a list item, the end of a list item, and the end of a anchor tag), the command continue is issued to loop forward on to the next item. If hierarchy is detected (the start or end of an unordered list), a designation is added into the array and the counter advances. If the start of a link is detected ("a h" is the start of a href), it breaks apart that line using explode to pull out the name of the category. The category name is then added to the array and the counter is advanced.

These last parts are where I put it all together and display the data by looping through the array I built earlier ($build_cat_structure). You could probably do this differently or combine the above and below parts instead of looping through twice, but I liked it like this so I could use the data in other ways if I wanted to.

   echo "<ul>";
   foreach ($build_cat_structure as $value) {
      if ($value == "start_child") {
         echo "<ul>\n";
      }
      elseif ($value == "end_child") {
         echo "</ul>\n";
      }

This makes/ends a nested unordered list If it hits my start/end child marker, which makes the category hierarchy work. This is also a good chance to add specific styling to the inside nest lists, if that is what you want.

      else {
         $category_id = get_cat_id($value);

The start of the else tells the script what to do if it encounters the name of a category, or something that is not the start or end of a nested list. The next line converts our category name to a category ID using the get_cat_id() function.

         echo ‘<li><a href="’ . get_category_link($category_id) . ‘">’ . category_description($category_id) . "</a></li>\n";

This displays the category in a list item with a link to the archive of that category using get_category_link(). I use category_description() here because my template is set up where the category name is a shorter version that is used for the sidebar and the category description is a longer version used for display. If you wanted to use the name instead, just replace category_description($category_id) with $value.

         $children = wp_list_categories(‘echo=0&child_of=’ . $category_id . ‘&title_li=’);
         $find_me = stripos($children, "No categories");
         if ($find_me !== FALSE) {

This special handling function checks to see if the current category is a parent of other categories. For example, on my final page (All Blog Posts Archive » Hear Florida Audiology Group), there is a main category of Blog for which I don’t want the posts listed. I want the posts listed under their sub categories, so it skips the post by post listing if the current category is a parent of other categories. A category that is not a parent of others will have something like "<li>No Categories</li>" as the result of the above wp_list_categories(child_of=) call. The ($find_me !== FALSE) part creates a situation where the posts are only being displayed where the phrase “No Categories” is found.

         echo "<ul>\n";
         $the_query = new WP_Query(‘cat=’ . $category_id);   
         while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID; ?>
            <li><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
            <?php endwhile;
         echo "</ul>\n";
         }
      }
   }
   echo "</ul>";

This last part creates another nesting with all of the posts for each category using WP_Query. The posts are displayed with their title and permalinks. Then everything is closed up and all the unordered lists are given end tags.

Overall I am pleased with my results and how it turned out in terms of giving the user a clear way to look through older posts by category and view all posts as a whole.

I recently ran into this problem on She & He Plan Weddings. I had changed the blog’s URL in phpMyAdmin, but several items were still not working (including the admin) because it was directing me back to the development URL. I checked and rechecked the WordPress settings, the database, everything. The problem was with .htaccess and wp-config.php. I didn’t install WordPress on this site—I only came in to redo the theme and make some customizations—and I’ve always used a fresh WordPress.org install instead of using host-based installers.

The first problem was with .htaccess. Somehow the .htaccess file became unwritable (whether it was intentional by the blog installer or it is some Fantastico default), and the new blog URL was not being reflected. Changing the .htaccess file from this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /~ciaraine/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /~ciaraine/index.php [L]
</IfModule>

# END WordPress

to this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

solved that problem entirely. If you'll see, the first one was assuming the site's URL should be http://gator872.hostgator.com/~ciaraine/, as it was in development. The second one reflects the removal of the directory, as the final site appeared to be at a root level at http://www.sheandheplanweddings.com/.

For more information (and to prevent problems for yourself), WordPress has this guide on how to make your files have the correct permissions. If you want to leave the .htaccess file unwritable, you'll have to use the method I have outlined here.

The second problem was with the wp-config.php file, which is located in the root folder of your WordPress install. A Fantastico install includes this line:

define('WP_SITEURL', 'http://your-url-here.com');

that I have never seen on a self-installed WordPress installation. (Just to be sure, I downloaded the new WordPress 2.8.1 and checked the wp-config-sample.php file—and no, it's not in there.) This line, again, was forcing the URL to be the original http://gator872.hostgator.com/~ciaraine/ instead of the new http://www.sheandheplanweddings.com/. I set this element to read

define('WP_SITEURL', 'http://www.sheandheplanweddings.com');

but I probably could have just deleted out the line entirely as well.

I hope this post saves someone else from the hassle I just went through trying to push this site live. I think the whole experience also reinforced my habit of doing things "the long way" (by downloading WordPress and installing it myself) instead of relying on one-click installers like Fantastico. While these sort of things are good for those who are unfamiliar with installing software or for saving time, I think there is value into knowing every setting going into your install by doing it yourself.

]]> http://www.thatphpgirl.com/changing-your-wordpress-url-fantastico-install/feed/ 5 http://www.thatphpgirl.com/moving-and-upgrading-your-wordpress/ http://www.thatphpgirl.com/moving-and-upgrading-your-wordpress/#comments Wed, 24 Jun 2009 05:34:13 +0000 Nikole Gipps http://thatphpgirl.com/?p=103 Note: This post assumes you are using the self-installed WordPress on a Linux-based server running MySQL and phpMyAdmin. It also assumes that all your current plugins and your current theme is compatible with the latest version of WordPress.

Please read through all of these instructions and make sure you know what they mean before you begin. Backing up your site and database before any transfer is always a wise move.

Step 1: Download your Database

Log into your database through phpMyAdmin and go to the Export tab. Use these values for your export:

• Export ALL TABLES in SQL format.
• Check STRUCTURE, and then "Add IF NOT EXISTS", "Add AUTO_INCREMENT value", and "Enclose table and field names with backquotes".
• Check DATA and then "Complete inserts", "Extended inserts", "Use hexadecimal for BLOB", and "Export type INSERT".
• Check SAVE AS FILE and save to your hard drive.

Step 2: Download your Current Site

FTP to your current site and download the following items:

• The folder WP-CONTENT.
• The file WP-CONFIG.PHP.
• Any files or folders you may have added outside the WordPress structure, like a CSS or IMAGES directory.

Step 3: Upload your New WordPress

For a general discussion of installing WordPress, see the 5-minute Installation Guide at WordPress.org. For this, you will be doing things a bit differently because you are transferring a blog, not just installing a new one.

1. Download the latest version of WordPress. Unpack the files and upload everything but the WP-CONFIG-SAMPLE.PHP file to your new server.
2. Upload your old custom theme (in the WP-CONTENT folder you downloaded earlier) and any images/css/etc you may have had outside the WordPress folder structure at your old site.
3. Open the new WP-CONFIG-SAMPLE.PHP file and your old WP-CONFIG.PHP file. You will be modifying the WP-CONFIG-SAMPLE.PHP file. Follow the instructions in the file to get your Secret API Key. Then use the information in your old WP-CONFIG.PHP for the database and username, and get the hostname from your new host. Save this WP-CONFIG-SAMPLE.PHP file on your hard drive, rename it to WP-CONFIG.PHP and upload it to your new server at the root file level. (See below for additional notes on the WP-CONFIG.PHP file and changes you may have to make to it.)
4. Hold off on uploading your existing plugins until you are sure your upgrade installation is working.

Step 4: Set Up your New Database

Log into the phMyAdmin on your new host, click on the Import tab, and Import the SQL file you downloaded in step 1. If for some reason you can’t use the original database and/or username, make sure you put the new database and/or username in your WP-CONFIG.PHP file on your new server. If you have changed your base URL, see the special instructions below before proceeding on to step 5.

Step 5: Install and Upgrade your Database

Go to the install URL on your new site, http://example.com/wp-admin/install.php for example, and follow the instructions to install WordPress and upgrade the database (if needed/prompted to do so).

Step 6: Add Plugins

If you had plugins originally installed, and your site is now working, you can upload the plugins in your original WP-CONTENT/PLUGINS folder back to the new site. Once they are uploaded, the WP-ADMIN will tell you if there are updates available for these plugins before you enable them.

Special Step: If You Changed the URL

If you have changed the site URL, or you’ve gone from a temporary URL (such as http://hostname.com/~your_account/) to your permanent URL (http://www.your_domain.com), you will need to follow this additional instruction between steps 4 and 5 above:

1. Log in to phpMyAdmin and click on the SQL tab.
2. Enter the following code into the SQL window
   

   UPDATE wp_options SET option_value = ‘http://new-url.com’ WHERE option_name = ‘home’;
   UPDATE wp_options SET option_value = ‘http://new-url.com’ WHERE option_name = ‘siteurl’;
   UPDATE wp_posts SET guid = replace(guid, ‘http://old-url.com’,'http://new-url.com’);
   UPDATE wp_posts SET post_content = replace(post_content, ‘http://old-url.com’, ‘http://new-url.com’);

   replacing "http://new-url.com" with your new URL, "http://old-url.com" with your old URL, and wp_ (as in wp_posts, wp_options) with your table prefix. (The default on WordPress is wp_ but you may have changed it on your previous installation. If your default is not wp_ in your tables, you’ll also make sure this table prefix is reflected in your new WP-CONFIG.PHP file and re-upload before proceeding to step 5.)

And there you have it! If you need additional assistance or your custom theme needs to be updated to work with the newest version of WordPress, consider hiring That PHP Girl!

]]> http://www.thatphpgirl.com/moving-and-upgrading-your-wordpress/feed/ 1