http://www.rvoodoo.com/who-are-the-voodoo-empire/
Something like that I assume? That’s a CPT displayed as sort of a grid.
Basically, you wrap the loop in a div. Set the width of that div. Say your overall width is 900px for your page. You could set the post width as 250. so 3 of them will be 750 wide, that gives you 150px of padding to use, etc. You float the divs left…. then they automatically line up next to each other til they run out of space, then go to the next line. By default, WP would put the newest one top left, if you floated left. The older ones keep moving right until they wrap to the next line.
To limit to 12 posts, and paginate afterwards, you just use a query.
http://wordpress.org/search/query_posts
Now I don’t know your theme, your css selectors will be different than mine, etc. I’m just going to post what I use, and you can pick it apart. The code will be different, but the concept remains the same.
You’ll also notice I use enqueue style here. Since the grid layout is different from my normal posts, I only call the stylesheet for the grid on this page.
the query I use here, I’ve modified to meet your needs, but the rest of the stuff you’ll need to tweak. Like I display the excerpt here, you don’t want that. And the whole entry-utility section I have will not apply to you. But, Like I said, I’m throwing this up in hopes it will help you with the concept.
<?php
wp_enqueue_style( "member_css", $voodoo_template_dir . '/scheme/member-template.css', false, "1.0", "all" );
get_header();
query_posts( array(
'post_type' => 've_members',
'posts_per_page' => 12,
'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 ),
));
?>
<?php if (have_posts()) : ?>
<div>
<?php while (have_posts()) : the_post(); ?>
<div class="memberPost" id="post-<?php the_ID(); ?>">
<div class="memberBox">
<h2 class="entry-title">
<a href="https://wordpress.stackexchange.com/questions/12082/<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</h2>
<div class="clear"></div>
<div class="memberThumb">
<a rel="lightbox" href="<?php $image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'large', true);
echo $image_url[0]; ?>">
<?php the_post_thumbnail('member-thumb', array( 'class' => 'member-thumb aligncenter' ) ); ?>
</a>
<div class="clear"></div>
</div>
<div class="entry-content">
<?php the_excerpt(); ?>
<div class="clear"></div>
</div>
<hr />
<div class="entry-utility">
<div class="socialIcons">
<?php get_template_part( 'icons', 'members' ); ?>
</div>
<div class="fbConnect">
<?php if(function_exists('sfc_like_button')) : ?>
<?php sfc_like_button(array('layout' => 'button_count')); ?>
<?php endif; ?>
</div>
<div class="twitConnect">
<?php if(function_exists('stc_tweetbutton')) : ?>
<?php stc_tweetbutton(); ?>
<?php endif; ?>
</div>
<div class="clear"></div>
<span class="comments-link"><?php comments_popup_link( __( '[Leave a Message]', 'voodoo_lion' ), __( '[1 Message]', 'voodoo_lion' ), __( '[% Messages]', 'voodoo_lion' ) ); ?></span>
<div class="clear"></div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php get_footer(); ?>
And here is my stylesheet that I enqueue for just this template
.memberPost {
float: left;
width: 225px;
margin: 10px;
}
.memberPost .fbConnect {
width: 80px;
float: left;
overflow: hidden;
}
.memberPost .twitConnect {
margin-right: -20px;
}
.memberPost h2 {
text-align: center;
margin-top: 5px;
}
.memberPost .memberThumb {
height: 100px;
}
.memberPost .entry-content p {
margin: 5px;
height: 275px;
text-align: left;
}
.memberPost .entry-utility {
margin: 0 5px 10px 5px;
}
.memberPost .socialIcons {
height: 28px;
margin-bottom: 2px;
}