2

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

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

1

Check out this tutorial: http://designm.ag/tutorials/jquery-display-switch/

It can be integrated into WordPress fairly easily, as this theme demonstrates:
http://s51370.gridserver.com/x/

  • Thanks. I really like it. However, it doesn't help me get much of a picture as to how I would build something that contains multiple custom columns, and automatically displays in a grid style without having the user select their display style. Also, I'm imagining that the user would upload full pictures but the grid view would simply display thumbnails. – HK1 Apr 12 '11 at 0:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.