• 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
  • How to Add Rainbow Text To WordPress

    How to Add Rainbow Text To WordPress

    Reading time: 1 minute

    I’ve been tinkering with the theme on this website, and I’m been very happy with how things have come out. I have a soft spot for gradients, especially with the ‘punk’ color scheme I’ve been using on my branding. One question I get, consistently: “How can I achieve the rainbow gradient text effect”? It’s actually…

    Design, Tutorial, WordPress
  • How to Make a Royally Awesome Author Template in WordPress

    How to Make a Royally Awesome Author Template in WordPress

    Reading time: 7 minutes

    I’ve been trying some new stuff with my client’s websites as of late.  I wanted something where a multi-blog site could get the most out of as few plugins as possible, and still have a really awesome way to display their author’s main information.  But, the information they ask for doesn’t have everything.  What about…

    Tutorial, WordPress