Wordpress looping issue

Question

On the home page of my site I want the latest post to be the biggest then the older posts to be smaller and below it. See image

I have created a wordpress loop which partly does the job, Ive zoomed out so you can get a clearer view.

<?php if (have_posts()): ?>

  <section class="latest-blog">
<?php query_posts('showposts=5'); ?>

<?php $i = 0; while (have_posts()) : the_post(); ?>

  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <!-- Post Title -->
    <h1>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </h1>
    <!-- /Post Title -->
    <?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>

        <br class="clear">

    <?php edit_post_link(); ?>

   </article>
 </section>

<section class="archive">
<?php if(++$i === 1):  ?>
<?php endif; ?>      

<?php endwhile; ?>
</section>    

<?php endif; ?>

What seems to be happening is each old post gets given the section archive where as I want all old posts to be inside the section archive as articles.

Answer 1

If I understand your question, I don't think you need multiple loops, rather I think you could just use a "special" case in your loop to handle the first most recent post, but then treat all the older posts normally (it looks like you're trying to do it the other way round?).

How about this:

  <?php 
  $firstPost = true; 
  query_posts('showposts=5');
  while (have_posts()) {
     the_post();
     if ($firstPost) {
       ?>
         <section class="latest-blog">
            my_article();
         </section><!-- /latest-blog -->

         <section class="archive">

     <?php 
       $firstPost = false;
     } // end of if(firstPost)
     ?>

     my_article();

   <?php
   } // end of the loop
   ?>

</section><!-- /archive -->

<?php
function my_article() {
   ?>
   <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <!-- Post Title -->
        <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
      <!-- /Post Title -->
      <?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
      <br class="clear"> 
      <?php edit_post_link(); ?>  
   </article>
   <?php
}
?>

If from a data point of view, the posts are all the same, there's no real reason I can think of to execute separate queries to retrieve them. Just present the first one differently. Doing so reduces your code which means less places for errors, and reduces DB overhead which means a better performing site.

Also note, the codex for query_posts() suggests this is not an efficient method to do what you're doing. So once you get this working as is, you might want to investigate the WP recommended approaches of using the pre_get_posts action, although that might not be applicable/appropriate in the case where this is a "page".

Answer 2

Break you code into 2 loops.

First loop for the featured post:

<?php query_posts('showposts=1'); ?>
<section class="latest-blog">
<?php $i = 0; while (have_posts()) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <!-- Post Title -->
    <h1>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </h1>
    <!-- /Post Title -->
    <?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>

        <br class="clear">

    <?php edit_post_link(); ?>

   </article>
<?php endwhile; ?>
</section>

And a second loop for the rest of the posts:

<?php wp_reset_query(); ?>
<?php query_posts('showposts=5&offset=1'); ?>
<section class="archive">
<?php $i = 0; while (have_posts()) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <!-- Post Title -->
    <h1>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </h1>
    <!-- /Post Title -->
    <?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>

        <br class="clear">

    <?php edit_post_link(); ?>

   </article>
   <?php endwhile; ?>
</section>

You will notice that we use offset=1 in the query to offset the first post from the second loop (so it doesn't appear twice).

Your final code will look something like this:

<?php if (have_posts()): ?>
<?php query_posts('showposts=1'); ?>
<section class="latest-blog">
<?php $i = 0; while (have_posts()) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <!-- Post Title -->
    <h1>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </h1>
    <!-- /Post Title -->
    <?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>

        <br class="clear">

    <?php edit_post_link(); ?>

   </article>
<?php endwhile; ?>
</section>

<?php wp_reset_query(); ?>
<?php query_posts('showposts=5&offset=1'); ?>
<section class="archive">
<?php $i = 0; while (have_posts()) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <!-- Post Title -->
    <h1>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </h1>
    <!-- /Post Title -->
    <?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>

        <br class="clear">

    <?php edit_post_link(); ?>

   </article>
   <?php endwhile; ?>
</section>
<?php endif; ?>

Answer 3

You'll want to run 2 loops, one for the main posts, and one for the archived posts. You can't just put a counter in the middle and hope that the HTML will magically format itself properly.

Something like this might work.

<section class="latest-blog">
  <?php query_posts('showposts=1'); ?>

  <?php while (have_posts()) : the_post(); ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <!-- Post Title -->
      <h1>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
      </h1>
      <!-- /Post Title -->
      <?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>

      <br class="clear">

      <?php edit_post_link(); ?>

    </article>
  <?php endwhile; ?>
</section>

<section class="archive">
  <?php wp_reset_query(); ?>
  <?php query_posts('showposts=5&offset=1'); ?>
  <?php while (have_posts()) : the_post(); ?>
    <?php // code for "archived" post ?>
  <?php endwhile; ?>
</section>    

Answer 4

best thing to do is create 2 separate loops,

top loop brings back only 1 post! the bottom loop returns the other 4

// The Loop
while ( have_posts() ) : the_post();
    echo '<li>';
    the_title();
    echo '</li>';
endwhile;

// Reset Query
wp_reset_query();
?>    
</div>
<div class="subTop">
<?php
query_posts( 'posts_per_page=4' );

// The Loop
while ( have_posts() ) : the_post();
    echo '<li>';
    the_title();
    echo '</li>';
endwhile;

// Reset Query
wp_reset_query();
?>   
</div>

hopefully this helps

M