How to set up multiple “layouts” in a post loop (a la TechCrunch)
I’ve seen a lot of hateful comments on TechCrunch regarding their new design. I’m going to officially go on-record and say that (from a design standpoint) I really like where they’re going with the new style. But, beyond that, under the surface, there’s a few other things that appear to be going on (I say appear because I don’t have access to the backend system, so I can’t tell you exactly what’s going on) that are fantastic uses of new WordPress technology. My favorite thing, however, is the use of multiple “post layouts” on their archive/index pages.
I think TechCrunch has stumbled onto something that I may use in future designs. If you scroll down their home page, their articles are differentiated between two or three different layouts (I count two so far, other than a third that I’ll mention specifically in a minute).
Looking at the photo above, those are both in the same loop, but have completely different layouts. I love this idea. It gives a bit of depth to the site and allows the author to customize the article for his/her own style.
That said, it’s super easy to do something like this in your own blog.
The Code
First thing’s first – if you’re like me, you love using great plugins, so download the “More Fields” plugin and create yourself a new write panel in the options menu. There are plenty of tutorials on how to do this, but the end result should be a write panel with a drop down menu and two options (We’ll call them layout 1 and layout 2 with values of layout1 and layout2 respectively). Your meta key can be called whatever you want – mine will be “layout” for ease of use.
Next, we’re going to split the loop up into two different pieces – one for layout1, and one for layout2 (this is a very simplified layout, mind you). We first have to define a variable for our custom field data (handled via a handy-dandy drop down). Then, we can use IF THEN statements to get the data based on which value is passed:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $snvlayout = get_post_meta($post->ID, ‘layout’, true) ?>
<?php if ($snvlayout == “layout1”) { ?>
<!–LOOP STYLE 1 GOES HERE–>
<?php } else { ?>
<!–LOOP STYLE 2 GOES HERE–>
<?php } ?>
<?php endwhile; ?>
<div class=”navigation”>
<div class=”alignleft”><?php next_posts_link(‘« Older Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(‘Newer Entries »’) ?></div>
</div>
<?php else : ?>
<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
<?php endif; ?>
Once again, this is more to show you where the new code is going – everyone’s loop styles will be different. Combine this with Post Formats (like TechCrunch’s third style – the status update) and you can showcase all sorts of post styles – all without leaving the comfort of your post loop.
These loops also translate over to single posts, archive pages, and any other style you need. Want a drop down menu that will control a full column vs standard page layout? Doable with this code – and a few modifications. The possibilities are endless!