• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
WordPress

How to set up multiple “layouts” in a post loop (a la TechCrunch)

CMDR Mitchcraft

Reading time: 3 minutes

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.

TechCrunch

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!

more fields, post layouts, TechCrunch, WordPress
  • Things I Learned from #wcatl (and a Few I Learned on My Own)

    Things I Learned from #wcatl (and a Few I Learned on My Own)

    Reading time: 1 minute

    View more documents from Jane Wells. 2. The PHP and WordPress communities can learn a lot from each other. @technosailor gave a fantastic presentation (re: lecture in a discussion-y way) on how the core communities of both the PHP world and the WordPress world could stand to play nicer to each other.  Personally, I think…

    WordPress
  • Why I (Still) Use WordPress

    Why I (Still) Use WordPress

    Reading time: 2 minutes

    It’s no secret that I love WordPress. I’ve built this site on it, for one, but I brag that I’ve used WordPress for nearly all of the projects I’ve done over the last few years.  Other platforms have come and gone, but WordPress has remained steadily at the top of my list of “must-use” tools.…

    WordPress