What can’t WordPress do these days? The addition of custom post types in 3.0 makes it possible to accomplish all kinds of tasks. Today we will be looking at a simple way to create products with WordPress custom types and sell them with PayPal buy now buttons.

What we will be creating:

How it’s done:

We will leverage a custom post type (available since WordPress 3.0) and custom meta boxes to create the administrative interface for adding products. Our first step will be to create the custom product type.

Step One: Create the custom post type

The following code goes into the functions.php file:

/****************************
 * Let's add the custom post type
 ****************************/

add_action('init', 'catalog_init');
function catalog_init()
{
  $labels = array(
    'name' => _x('Products', 'post type general name'),
    'singular_name' => _x('Product', 'post type singular name'),
    'add_new' => _x('Add New', 'product'),
    'add_new_item' => __('Add New Product'),
    'edit_item' => __('Edit Product'),
    'new_item' => __('New Product'),
    'view_item' => __('View Product'),
    'search_items' => __('Search Products'),
    'not_found' =>  __('No products found'),
    'not_found_in_trash' => __('No products found in Trash'),
    'parent_item_colon' => '',
    'menu_name' => 'Products'

  );
  $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'show_in_menu' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'has_archive' => true,
    'hierarchical' => false,
    'menu_position' => null,
    'menu_icon' => get_bloginfo('template_url') . '/images/producticon.png',
    'supports' => array('title','editor','thumbnail','excerpt')
  );
  register_post_type('product',$args);
}

We hook into the WordPress init action to create the product post type. Notice the register_post_type function accepts the name of the post type and the arguments array. Things to note in the argument array are the menu_icon and labels.

Step 2: Create meta boxes for product information

We want people to be able to pay for these products, so we better create a way for them to do that. We will leverage custom meta boxes for our product post type to get this done in a snap.
Add the following code to the functions.php file:

/**********************************************************************************
 * The custom meta boxes to handle paypal button and product price
 *********************************************************************************/
add_action('add_meta_boxes', 'catalog_add_custom_box');
function catalog_add_custom_box() {
    add_meta_box('catalog_priceid', 'Product Price', 'catalog_price_box', 'product','side');
    add_meta_box('catalog_paypalid', 'PayPal Code', 'catalog_paypal_box', 'product','side');
}

function catalog_price_box() {
    $price = 0;
    if ( isset($_REQUEST['post']) ) {
        $price = get_post_meta((int)$_REQUEST['post'],'catalog_product_price',true);
        $price = (float) $price;
    }
    ?>

Product Price


<?php
}

function catalog_paypal_box() {
    $code = '';
    if ( isset($_REQUEST['post']) ) {
        $code = get_post_meta((int)$_REQUEST['post'],'catalog_product_paypal',true);
        $code = stripslashes($code);
    }
    ?>

Product PayPal Code

<?php echo $code; ?>

<?php
}

We hook into the add_meta_boxes action here and use the add_meta_box functions to do our dirty work. As you can see this function accepts the type of post this box will be added to (in our case this is product) and a callback function that handles the display of the meta box controls.

Step 3: Save the product info

Saving the product info is as easy as hooking into the save_post action.

add_action('save_post','catalog_save_meta');
function catalog_save_meta($postID) {
    if ( is_admin() ) {
        if ( isset($_POST['catalog_product_paypal']) ) {
            update_post_meta($postID,'catalog_product_paypal',
                                $_POST['catalog_product_paypal']);
        }
        if ( isset($_POST['catalog_product_price']) ) {
            update_post_meta($postID,'catalog_product_price',
                                $_POST['catalog_product_price']);
        }
    }
}

Notice we check that our form values have been submitted before we update our post meta. If you don’t do this you will notice some funky stuff happen as the save_post action can be triggered at different times.

Step 4: Display the product(s)

It is simple to display one of our new products: Let’s just query our custom post type and have some good ol’ fashioned WordPress loop fun. This needs to go inside of a template file. Lets create a single template for our product type. Create a file single-product.php in your theme directory and put the following inside it:

<?php get_header(); ?>
<?php query_posts(array('post_type' => 'product')); ?>
<?php while(have_posts()): the_post(); ?>
<?php the_title(); ?>

            <?php the_post_thumbnail(); ?>

            <?php echo get_post_meta(get_the_ID(),'catalog_product_price',true); ?>

            <?php the_content() ?>

            <?php echo get_post_meta(get_the_ID(),'catalog_product_paypal',true); ?>

<?php endwhile; ?>
<?php get_footer(); ?>

And…. shazaam! A similar loop would work in any template file. You can have templates to display a single product, or a catalog of them. Experiment with the possibilities!

As you can see WordPress 3.0+ is capable of doing some interesting stuff. Hopefully this tutorial will help you get started on some more robust and interesting ways to utilize this ever growing CMS.