Updated WordPress Plugin: CF WOD Posts

Illustration of isolated update icon

Updated WordPress plugin released

I’ve updated my WordPress plugin, CF WOD Posts. Version 1.2 is now available on WordPress.org.

The custom plugin allows WordPress site owners to post CrossFit Workouts of the Day (WODs) from the Dashboard. It’s a great way to publish WODs on your WordPress site while keeping them separate from your other content like posts and pages.

Changelog

This version fixes two bugs:

  • Fixes a conflict with Genesis child themes that caused a PHP error
  • Fixes a bug that would cause a 404 error after publishing new WODs

As always, it’s completely free and open source. Download and enjoy it from WordPress.org and let me know what you think!

Add a Pinterest Pin-it button to Shopp’s Related Products in WordPress

pinterest
This post will demonstrate how to add a Pinterest Pin-It button to your Related Products using the Shopp e-Commerce plugin for WordPress.

I recently wrote some similar code for a client, and thought it would be useful to share since I didn’t find anything on the web the solved this particular problem.

Shopp is a popular e-commerce plugin for WordPress. Pinterest is the mega-successful social app for building visual lists.

Having one of Pinterest’s Pin-It buttons on each of your products is a no-brainer. It allows your customers to save your products as they’re passing through, and then they can come back later to buy it or share it.

The trick is to make the calls specific to each Related Product by calling Shopp’s handy API from within the related products loop. You’ll already have a reference to each product, so it’s just a matter of pulling the information that you need to build the “Pin-It” button.

Below is the first part of the code. It stores information about the current Related Product. Note: I intentionally used ‘product.name’ as opposed to ‘product.description’ at the client’s request because Shopp’s ‘product.description’ function (surprisingly) returned some HTML.

So, instead of cleaning up or removing the HTML, we opted to use the product’s name and append the site name for the visitor’s future reference (hence the “- from YourSite.com” in the code below). It turned out much better this way.


You will probably need to add a div container and some styling to handle the display and placement on your product page.

Then, using Pinterest’s button generation example as a guide, place your related product variables from above into the HTML elements to generate the button.





Note that the calls to rawurlencode() are necessary PHP functions to format the URLs so they work with Pinterest’s button generation API.

Good luck! Let me know in the comments if you encounter any problems with this method.

eCommerce Site using WooCommerce and WordPress

This post will cover how to make an eCommerce site using WooCommerce and WordPress.  WooCommerce is a comprehensive open source eCommerce platform for WordPress.  The plugin has many features which aren’t covered here; this is just that bare bones setup to take you from installing WooCommerce to having a product for sale and PayPal as a payment gateway.

Here is the best order I’ve found to attack this:

  • Install a WooCommerce-compatible theme
  • Install the WooCommerce plugin
  • Configure the WooCommerce plugin
  • Add Products

Let’s get started!

Installing a WooCommerce Compatible Theme

  1. Go to your WordPress Dashboard, then click on “Appearance” on the left sidebar.
  2. Then click on the “Add New” buttonadd new wordpress theme
  3. On the “Add Themes” page, type the search term “woocommerce” in the search box.  This will (hopefully) only return only the themes that are WooCommerce-ready, meaning that they are developed in a special way so that your WooCommerce product pages will look fantastic.
  4. Note:  If you install a non-WooCommerce-ready theme, you’re likely to see this indication when you’re on your Dashboard

    "Your theme does not declare WooCommerce support"
    You’ll probably see this message if you use WooCommerce with a WordPress theme does not not “declare support” for it.
  5. Click “Install” on the theme you’d like to use, then click “Activate” on the next page to activate the theme.
  6. Warning: Activating a new WordPress theme may cause loss of some content from your current theme.  Particularly vulnerable are widgets and any theme-specific settings, such as those set from a theme-specific options page.  Talk to someone knowledgeable about WordPress if you have a lot at stake here…it is very frustrating to lose data!
  7. Now that you have a WooCommerce theme installed, you’re ready to install the WooCommerce plugin.

Installing WooCommerce Plugin

  1. Go to your WordPress Dashboard, then click on “Plugins” on the left sidebar.
  2. Type the search term “woocommerce” in the search box and press enter on your keyboard
  3. You should see the below result.  Click on “Install Now”
    Install WooCommerce by clicking the "install" button
    Installing WooCommerce is soo easy from the WordPress Dashboard

     

  4. If prompted, click “OK” to verify that you’d like to install WooCommerce
  5. Next you should see a plugin install screen like the one below.  If the screen says “Successfully installed…”, you’re in business!  Click on “Activate Plugin” to continue.

    To activate WooCommerce, click on the Activate Plugin button.
    Click on “Activate Plugin” to activate WooCommerce after installation.
  6. After you activate WooCommerce, you’ll need to install pages.  Click on “Install WooCommerce Pages” to do this.

    The Dashboard now contains a "Install WooCommerce Pages" button.
    You’ll need to click the “Install WooCommerce Pages” button for it to install your Cart, Checkout, My Account, and Shop pages.
  7. You should be taken the to “Welcome to WooCommerce…” screen.  Congrats!

Quick Configuration

    1. Click on WooCommerce on the Dashboard, and then click on “Settings” (under WooCommerce)
    2. Under “General Options,” update your “Base Location” and check your “Selling Location(s)” based on your intended customer base
    3. Under “Currency Options,” select the proper currency from the dropdown menu.
    4. Note the “Frontend Styles” area in case you’d like to come back and change them later.  It’s best to see how everything looks and then change them based on that (as opposed to making guesses at this point).

      Shows which settings to check for a quick configuration. They are: Base Location, Selling Locations, Currency, and Frontend Styles
      These areas are important to update or at least take notice of on the “General” tab
    5. Click “Save Changes”
    6. Take a look at Products and Tax tabs, although we won’t covering these in this tutorial.
    7. On the Checkout tab, you should enable “Force secure checkout” note that this requires SSL.
    8. Under the Payment Gateways section, we’re going to set up PayPal and disable all others.  Click on the Settings button for Direct Bank Transfer

      The Settings button for each gateway is located under the "Payment Gateways" section.
      To enable, disable, or configure a payment gateway, click on the Settings button for that gateway.
    9. Uncheck the box that says “Enable Bank Transfer”
    10. Click “Save Changes”
    11. “Your settings have been saved.” at the top of the screen lets you know that it has worked.
    12. Repeat the previous 4 steps to disable “Cheque Payment”
    13. PayPal is my preferred payment gateway for a quick WooCommerce installation on a site, click on its Settings button to begin setting it up.
    14. All you need to do is enter your PayPal account email into the “PayPal Email” box. Wonderful!
    15. Remember to click “Save Changes” at the bottom of the PayPal page in order to save your email.
    16. Make note of the Shipping, Accounts, and Emails tabs. They’re important, but the defaults work very well for our purposes today. If you’re selling physical products that require shipping, contact me if you’re interested in learning how to set up this section.

Now we’re ready to move on to the next step 🙂

Creating a Product to Sell

Now that WooCommerce is installed, let’s make some Products!  In WooCommerce, the things you sell are referred to as Products.  To start creating your first Product, go to the Dashboard and click on Products.

  1. From the Products page, click on the “Add Product” button.
  2. Name your product by filling in the “Product name” field.  Then add a nice long description of it in the big box below.
  3. Fill in the “Regular Price” field under “Product” data at a minimum.
  4. Add a Product Short Description
  5. Add at least a Featured Image…even better is to also add a Product Gallery
  6. Add a Product Category by clicking “Add New Product Category” or selecting an existing category.
  7. Click “Publish”

    Screenshot highlighting which fields should be filled out in a WooCommerce Product page.
    Here are the minimum fields I recommend filling out for your Products.
  8. Click “View Product” to see your masterpiece!
  9. Repeat for other products