Randomized Grid of Posts
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 have some fun and build a Randomized Grid Archives.
Randomized Grid Archives1. 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 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='https://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.
About the author
Chris Coyier is a real-world web designer who has been reaching for WordPress to power client sites for many years. He subscribes to the theory that not only is WordPress capable of powering any website it is almost always the right choice. His other projects include CodePen and Quotes on Design.
17 responses
-
Design InformerI’m actually doing something similar for my gallery site, heartdirected.com. Check it out. I really like the animation when resized. David DeSandro is the man!
-
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.
-
BadCatGotta 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.
-
Chris Coyier Post AuthorSuccessful on what terms? Approval of fictional clients?
-
-
-
Jeremiah TolbertI 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.
-
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.
-
Nagita KarunaratneYou are varying both the width and height of the boxes. I wonder what would be the effect of holding one dimension constant.
-
Chris Coyier Post Author
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.
-
-
wingnutartWow, 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!
-
Daniel LangenakkerCould 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.
-
Daniel Langenakker
Cool, thanks for that
-
You’re welcome
-
-
-
-
Jeff CantyI 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 ;)
-
Michael BirchallHi 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.. 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 ?
-
Chris Coyier Post Author
Here are a bunch of ways to programmatically access images uploaded with the default image uploader, check it out.
-
Michael Birchall
Great! I’ll check it out,
thanks!
-
-
