DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Randomized Grid of Posts

Posted by on

I’m all about tinkering with different ideas to display posts with WordPress. After all, it’s just a bunch of data at our fingertips! WordPress makes it easy to output whatever we need. Not long ago we experimented with making a Thumbnail Based Archives. Now let’s build a Randomized Grid Archives.

1. Create a page template, publish a page

We need a totally unique page template to work with. So create a new one. You know, just make a file like grid-archives.php in your theme and put this PHP comment at the top and then WordPress will recognize it. Then create a new page, pick this template, and publish it. The name and content absolutely don’t matter, just put something there so you can recognize/find it later.

<?php
/*
Template Name: Thumb Archives - Grid
*/
?>

2. Loop it

This is pretty much the entire page. We’ll link out to an external stylesheet for styling. Then we run a Loop for 25 posts (in our demo, we also remove our link style posts). Each post is an anchor tag, and within, the post title, the post image thumbnail, and the excerpt.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>Grid Archives | Digging Into WordPress</title>
	<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo("template_url"); ?>/css/gridarchives.css" />
</head>

<body>
	<div id="page-wrap">
		<?php query_posts('posts_per_page=25&cat=-52'); ?>
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<a href="<?php the_permalink(); ?>" class="box col<?php echo rand(2,4); ?>">
				<span class="title"><?php the_title(); ?></span>
				<img src="<?php echo get_post_meta($post->ID, 'PostThumb', true); ?>" alt="" />
				<span class="ex"><?php the_excerpt(); ?></span>
			</a>
		<?php endwhile; endif; ?>
	</div>
</body>
	
</html>

3. Masonize

Notice in the HTML above we echo’d out a random number between 2 and 4 as part of a class name. The results classes will be: col-2, col-3, and col-4. These represent columns. So each link box is “randomized” based on this class name. Some post link boxes are 2 columns wide, others 3, others 4. Font sizing and thumbnail sizing also adjusts accordingly.

.box { margin: 10px; float: left; }
.box:hover { outline: 2px solid white; }
.box:hover .title { background: none; }
.box:hover .ex { background: none; color: white; }
.box:hover img { opacity: 0.4; }

.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }

.col2 img { max-width: 80px; float: right; margin: 0 0 2px 10px; }
.col3 img { max-width: 100px; float: left; margin: 0 10px 2px 0; }
.col4 img { max-width: 120px; float: right; margin: 0 0 2px 10px; }

.title { background: #237abe; color: white; display: block; padding: 10px; overflow: hidden; }
.col2 .title { font-size: 16px; }
.col3 .title { font-size: 18px; }
.col4 .title { font-size: 20px; }

.ex { background: white; color: #222; display: block; padding: 10px; }
.col2 .ex { font-size: 11px; }
.col3 .ex { font-size: 12px; }
.col4 .ex { font-size: 13px; }

So each of those post link boxes is just floated to the left. That’s going to make a pretty ragged and nasty layout all by itself, because each box will be a different height depending on the length of the title and excerpt. No problem though, we’re going to rearrange the boxes using the jQuery Masonry plugin (404 link removed 2013/07/19) by David DeSandro. We’ll just call jQuery, the plugin, and the write a quick script to call it. This can go pretty much anywhere on the page. Typically jQuery is run on DOM ready, but in this case we are waiting for the window’s load event, because we want to wait for the thumbnails to load before masonizing.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src='<?php bloginfo("template_url"); ?>/js/jquery.masonry.min.js'></script>
<script>
 $(window).load(function() {
   $("#page-wrap").masonry({
      columnWidth: 100, 
      animate: true, 
      animationOptions: {
          duration: 300,
          queue: false
      }
  });
 });
</script>

Enjoy!

Here is ours. Let us know if you play with this on your own site at all.

17 Responses

  1. Design Informer August 16, 2010

    I’m actually doing something similar for my gallery site, Heart Directed. Check it out. http://heartdirected.com/

    I really like the animation when resized. David DeSandro is the man!

  2. It’s a bit chaotic, don’t you think.

    What you could do here is simply do a fixed height, add the fadeout effect you have on css-tricks, and on hover slideDown so the whole content fits but with a fixed height to the “column” (or with a better method, whatever you use) so it goes on top of the articles bellow it instead of pushing them down.

    And maybe lose the the current hover effect, make it that when you hover over an article all the other ones gets 0.8 opacity.

    I wrote a little tutorial on that effect a while ago, so check it out or go directly to the demo.

    • Gotta agree with Boba here – great concept – and nice to see it brought to completion, but can’t see our clients buying into something like this. I think your Thumbnail Based Archives was much more successful idea.

  3. I was curious why you wanted to wait until the thumbnails loaded to run Masonize, but then I realized that the size of the boxes isn’t “settled” until they are loaded, so it makes perfect sense.

    Neat effect, and one that I will be thinking about how I can apply myself on projects. It’s really helpful to see something like Masonize done in the context of WordPress theming. I can’t believe I never thought to use rand to randomize a class name before.

  4. With some customization, this technique is perfect for things like community bulletin boards, personal start pages, unique post archives, displaying groups of store items, and tons more. Thanks for sharing it with the community.

  5. Nagita Karunaratne August 17, 2010

    You are varying both the width and height of the boxes. I wonder what would be the effect of holding one dimension constant.

    • It does wonders =) Check out the heart directed link from the first comment from Design Informer. The grid lines up a lot cleaner with less random open spaces if you hold one dimension steady.

  6. Wow, this is a really amazing scoop on the Responsive Web Design article, and how to implement it in WP. This series of posts on taking the nuts and bolts stuff that come with WordPress has been really inspiring, I think you guys are on a roll!
    In my mind, you should turn the whole series into something like a “the WordPress WOW!” Book.
    Keep up the great work!

  7. Daniel Langenakker August 19, 2010

    Could you still do this if you don’t have thumbnails for posts?
    I’d definitely like to try this though

    • Of course. But because it’s not checking if a custom field with thumb url exists first before showing it you’ll need to remove that line from there.

      It’s “<img src="ID, ‘PostThumb’, true); ?>” alt=”” />”. Remove that.

  8. Jeff Canty September 6, 2010

    I love this post, I have been reading the new DigWP 3.0 book (was waiting to purchase the updated version) and am finally getting a “grip” around scary old wordpress.

    My question is this. In the example, 1 out of 4 possible styles is applied to all the posts at random, right? However, they are all the same thumbnail size. What if I wanted to do something similar, still random but have different sized thumnail posts. The effect I am trying to go for is similar in the fact that it is a grid, but different posts may have different sized postImages.

    Could someone point me in the right direction to achieve what I am explaining. If I am too vague, I can upload a screenshot of the psd I am making. Thanks guys – PS The BOOK IS WORTH THE MONEY ;)

  9. Hi Guys,

    Thanks for your clear tutorial on getting masonry to work! I tried almost all of the tutes online and yours was the one that finally got me over the line.

    Just a question regarding PostThumb
    <img src="ID, ‘PostThumb’, true); ?>” alt=”” />

    From the comments above it seems that this is the old method of creating a post thumbnail pre wordpress 3.0+

    Now with the inclusion of Featured Images it should be alot easier to load an image?

    What sort of code am I looking for to take the uploaded post thumbnail and output it to HTML ?

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry