How to Make a Custom Grid View

by

I’d like to make a grid view that can be used to list items with a thumbnail, a primary description heading, a subheading, and possibly pricing details. This will not necessarily be for eCommerce as initially there will be no shopping cart. Similar to a post, clicking on the item should take you to a full “post” for that item with more information.

For an idea what I’m thinking, take a look here: http://www.powerzoneequipment.com/inventory_search.asp?category=engines

So here’s my questions:
1) Does something like this already exist?
2) What are the requirements to build something like this? Should it be a plugin combined with a custom theme that supports this? Or could this be done with a custom theme and a custom post type?

I realize that what I’m asking might be functionality more typically found in something like Drupal. However, I’m curious how difficult it would be to get this type of display in WordPress.

2 Answers
2

It’s not that difficult at all its simply styling you category loop in to a table something like this:

<table>
    <tr>
        <th>Photo</th><th>Item Brand, Model</th><th>Description</th><th>PSI</th><th>GPM</th><th>RPM</th><th>HP</th><th>Stock No.</th>
    </tr>
    <?php 
    while (have_posts()){
        the_post();
        ?>
        <tr>
            <td>
                <?php
                if(has_post_thumbnail()) {
                    the_post_thumbnail();
                } else {
                    echo '<img src="'.get_bloginfo("template_url").'/images/img-default.png" />';
                }
                ?>
            </td>
            <td>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </td>
            <td>
                <?php the_excerpt(); ?>
            </td>
            <td>
                <?php echo get_post_meta($post->ID,'PSI',true); ?>
            </td>
            <td>
                <?php echo get_post_meta($post->ID,'GPM',true); ?>
            </td>
            <td>
                <?php echo get_post_meta($post->ID,'RPM',true); ?>
            </td>
            <td>
                <?php echo get_post_meta($post->ID,'HP',true); ?>
            </td>
            <td>
                <?php echo get_post_meta($post->ID,'Stock_No',true); ?>
            </td>
        </tr>
        <?php
    }
    ?>
</table>

It uses the post thumbnail as image , name as title and link to the “full post”, the excerpt as description and assumes that you have custom fields named : PSI, GPM, RPM, HP and Stock_No.

Now after that is done you can use custom post type say you call it products and different it from you regular posts using register_post_type.

add_action('init', 'custom_products_post_type_init');
function custom_products_post_type_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,
    'taxonomies' => array('category', 'post_tag'),
    'supports' => array('title','editor','author','thumbnail','excerpt','comments','custom-fields')
  ); 
  register_post_type('product',$args);
}

and if you do it this way you just need to add a simple argument to query above the loop using query_post to let it know you are using your custom post type:

query_posts(‘post_type=”product”);

hope this helps

Leave a Comment