Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

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

share|improve this answer
add comment

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/

share|improve this answer
    
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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