Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WordPress page template for a post thumbnail grid
/* Post Thumbnail Grid */
.gridcontainer h2 a{color: #333; font-size: 13px;}
.gridcontainer .griditemleft{float: left; width: 150px; margin: 0 30px 20px 0;}
.gridcontainer .griditemright{float: left; width: 150px;}
.gridcontainer .postimage{margin: 0 0 5px 0;}
.gridcontainer .postimage-title {text-align: center;}
<?php
/*
Template Name: Thumbnails
*/
?>
<?php get_header(); ?>
<div class="gridcontainer">
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php
// Grid Parameters
$counter = 1; // Start the counter
$grids = 5; // Grids per row
$titlelength = 20; // Length of the post titles shown below the thumbnails
// The Query
$args=array (
'post_type' => 'post',
'posts_per_page' => -1
);
$the_query = new WP_Query($args);
// The Loop
while ( $the_query->have_posts() ) :
$the_query->the_post();
// Show all columns except the right hand side column
if($counter != $grids) :
?>
<div class="griditemleft">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
</div><!-- .postimage -->
<h2 class="postimage-title">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php if (mb_strlen($post->post_title) > $titlelength)
{ echo mb_substr(the_title($before = '', $after = '', FALSE), 0, $titlelength) . ' ...'; }
else { the_title(); } ?>
</a>
</h2>
</div><!-- .griditemleft -->
<?php
// Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
</div><!-- .postimage -->
<h2 class="postimage-title">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php if (mb_strlen($post->post_title) > $titlelength)
{ echo mb_substr(the_title($before = '', $after = '', FALSE), 0, $titlelength) . ' ...'; }
else { the_title(); } ?>
</a>
</h2>
</div><!-- .griditemright -->
<div class="clear"></div>
<?php
$counter = 0;
endif;
$counter++;
endwhile;
wp_reset_postdata();
?>
</div><!-- .gridcontainer -->
<?php get_footer(); ?>
@matthiaspabst

This comment has been minimized.

Copy link
Owner Author

matthiaspabst commented Mar 2, 2012

This template creates a page with a post thumbnail grid. You can select the number of columns ($grids) and the length of the post titles ($titlelength).

@matthiaspabst

This comment has been minimized.

@lpar

This comment has been minimized.

Copy link

lpar commented Dec 14, 2012

Thanks! Awesome stuff. I'd been trying countless crappy plugins, and this was what I needed to do it myself without needing any of them.

@ngeciscom

This comment has been minimized.

Copy link

ngeciscom commented May 7, 2013

hai Matthias...

I've tried this on my demo blog, you can see it here http://demo1.ngecis.com/free-download-themes-windows-8-windows-7-icons-themplate/

there I am having some problems:

  1. image does not show up well
  2. all postings appear

who want to ask,

  1. how to keep the image appear properly?
  2. how to just show up a few posts, according to the Reading settings in wordpress?

please help me, thank you

@pacquills

This comment has been minimized.

Copy link

pacquills commented Jan 24, 2016

This was instrumental in getting the post queried to appear like this http://bizanosa.com/category/mailchimp/ .

Very helpful.

@givmehint

This comment has been minimized.

Copy link

givmehint commented Sep 2, 2016

Ohhkk I got it,,

The post count can be changed using the =>

$args=array (
'post_type' => 'post',
'posts_per_page' => 6

Good Job thanks !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.