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(‘&laquo; Older Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(‘Newer Entries &raquo;’) ?></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!