Custom Post Structures in Wordpress Loop
Here’s a spicy little Wordpress loop that allows you to structure your latest posts in a different way.
The great thing about this is that it will only effect the first page of your posts. All subsequent posts on an ‘Older Posts’ page will not repeat the structure.
Here is the basic loop, by the way I can’t remember where this came from but I didn’t write it….but it’s bloody useful though!!!
<?php if (have_posts()) : ?>
<?php $post = $posts[0]; $i=0;?>
<?php while (have_posts()) : the_post(); ?>
<?php $i++; if( !$paged && $i == 1) :?>
/* Stuff for your Latest Post goes here! */
<?php else :?>
/* All other posts goes here! */
<?php endif;?>
<?php endwhile; ?>
<?php endif; ?>
It basically counts through your posts, 1 is your latest post (0 being no posts) and lets you write a separate structure for it. The ‘else’ refers to all posts that aren’t 1 or the latest. The key is the ‘$paged’ bit which see if the pages are related.
I took this a step further (yep, I wrote this bit with my ropey PHP skills!!!) by adding an ‘elseif’ statement that lets you define another set of posts for further structuring. In the code below it say any post greater or equal to 2 but less than four should have it’s own loop structure. Now the ‘else’ refers to any post equal or greater than fourth in the list. Cool!
<?php if (have_posts()) : ?>
<?php $post = $posts[0]; $i=0;?>
<?php while (have_posts()) : the_post(); ?>
<?php $i++; if( !$paged && $i == 1) :?>
/* Stuff for your Latest Post goes here! */
<?php elseif ( !$paged && $i >= 2 && $i < 4) :?>
/* Stuff for your the next two Latest Posts goes here! */
<?php else :?>
/* All other posts goes here! */
<?php endif;?>
<?php endwhile; ?>
<?php endif; ?>
Here’s an example the different post structures you could achieve using this.
<?php if (have_posts()) : ?>
<?php $post = $posts[0]; $i=0;?>
<?php while (have_posts()) : the_post(); ?>
<?php $i++;
if( !$paged && $i == 1) :?>
<div id="post-<?php the_ID(); ?>" <?php post_class('latest'); ?>>
<?php the_post_thumbnail('full'); ?>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_content(); ?></div>
</div>
<?php elseif ( !$paged && $i >= 2 && $i < 4) :?>
<div id="post-<?php the_ID(); ?>" <?php post_class('not-so-latest'); ?>>
<?php the_post_thumbnail('medium'); ?>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_excerpt(); ?></div>
</div>
<?php else :?>
<div id="post-<?php the_ID(); ?>" <?php post_class('just-plain-old'); ?>>
<?php the_post_thumbnail('thumbnail'); ?>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_excerpt(); ?></div>
</div>
<?php endif;?>
<?php endwhile; ?>
<?php endif; ?>
Here’s a picture!!!!
The first post has a full size ‘post_thumbnail’ image, a post link and ‘the content’.
The second and third have a medium ‘post_thumbnail’ image, a post link and ‘the excerpt’. The fourth and any post after will have small thumbnail, a post link and ‘the excerpt’.
You’ll notice I’ve also added a custom class into the ‘post_class’ tag for easy styling.
<?php post_class('latest'); ?>
Here’s what you get!!!
I’m rolling out a new theme soon when Wordpress 3 is out. I’m really enjoying the new loop structure which is making theme development a lot easier. Will post up some more useful snippets that I’ve used in my new theme that is a lot simpler.
Hope this helps somebody out!!!
Posted on Sunday, April 25th, 2010 at 7:13 pm.
Filed under Web Design, Wordpress.