WordPress page template for a post thumbnail grid

wordpress-post-thumbnail-grid-style.css

/* 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;}

wordpress-post-thumbnail-grid.php

<?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(); ?>

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.

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

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

Very helpful.

Ohhkk I got it,,

The post count can be changed using the =>

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

Good Job thanks !

Thanks for posting this code that is still so useful after all these years.

I renamed the template "home" and uploaded it to the Blank Canvas theme's directory with an added full width feature image from a "headlines" category and everything worked fine the first time.

Will now play around with setting width of the images, centering the container, the number of images to load and pagination becsuse it loaded all 800+ posts by default on one page.

After the euphoria of getting the grid to display, I spent the better part of the day trying to (a) center the images within the "gridcontainer", (b) making the grid responsive and (c) getting the pagination navigation to take me beyond the initial page. I've decided to take a break until tomorrow.

This css partly formats the 3-column grid table, shown here on a tablet that folded each third article to the next line:

.gridcontainer { display: grid; grid-template-columns: repeat (auto-fit, minmax(400px, 1fr)); }

And this code snippet at the end of the while loop gives me the page links and I assume it's working since it shows that I have 68 pages with 21 items each:

the_posts_pagination(array( 'type' =>'list', 'prev_text'=>'Prev', 'next_text'=>'Next'));

Hopefully I'll have a working example to show soon.

Adding 'paged' => get_query_var( 'paged' ) to the query array solved my pagination issue.

Bootstrap also seems like a shortcut alternative.