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 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 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 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 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 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 !

@starapple2

This comment has been minimized.

Copy link

@starapple2 starapple2 commented May 9, 2021

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.

@starapple2

This comment has been minimized.

Copy link

@starapple2 starapple2 commented May 9, 2021

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)); }

Screenshot_20210509-172930_Firefox

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.

@starapple2

This comment has been minimized.

Copy link

@starapple2 starapple2 commented May 13, 2021

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

Bootstrap also seems like a shortcut alternative.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment