Everybody loves a good grid. I’ve had more than one client looking to get a clean grid of thumbnails into Wordpress, so I decided to share with the world one of my favorite methods.
First, let’s get the grid. We’re going to save a lot of time by going to the Variable Grid System. For our purposes, let’s set the column width to 150, the number of columns to 5, and the gutter width to 30. This will give us a 900px wide layout (it will even fit on my tiny little netbook).
The Variable Grid System is your new best friend
Now, download the file and save it as ‘grid.css’. I’m going to assume you’ve already got Wordpress installed somewhere and have access to the theme files. If not, go here. If so, open up the header.php file and add some code to include this awesome new grid. You should probably put it next to the declaration for the other stylesheet(s), just to keep things nice and tidy. You should have something like this:
<link rel="stylesheet" type="text/css"
href="<?php bloginfo('template_directory'); ?>/grid.css">
Save that header.php and head over to your Wordpress admin panel. There are a few plugins devoted to creating thumbnails, but it’s relatively easy to do with custom fields (which definitely won’t conflict with anything else you’ve got going). So, first off, get your thumbnails ready (i.e. make some images that are 150px wide, or use ones you’ve already uploaded and crunch them to fit), and go edit a post or add a new post and then scroll down and add a custom field called “thumb” and put the url of the image in the value field.
Adding custom fields is painless, see?
Do this for a few posts, otherwise the end result is going to be pretty underwhelming, and then open up whichever theme file you want this to show up on, let’s assume index.php. Inside the loop we want to add code to grab the thumbnails and spit them back with a link to the permalink for that thumbnail. The grid part, you might recall, is already taken care of. To get the thumbs we’ll be using the get_post_meta tag. The code looks like this:
<img src="<?php echo get_post_meta($post->ID, "Thumb", true);?>" />
All we’re doing is grabbing a meta tag, that we just created, called “Thumb” based on the ID of the post we’re on in the loop and putting that in the src attribute of our image. For the grid we set up the naming conventions are pretty simple. A div with a class of “grid_1″ will be 150px wide with 15px margins on either side and floating left, a “grid_2″ will be 330px wide with 15px margins, etc. And all of this goes inside a div with class “container_5″, which basically means the grid goes 5 across (or 900px) before it forces a new line. Just to make this as easy as possible, here’s what your final loop will look like.
<div class="container_5">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="grid_1" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark"><img
src="<?php echo get_post_meta($post->ID, "Thumb", true);?>" /></a>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
And that’s that. A beautiful grid of thumbnails in 30 minutes or less.