0

I want to be able to display 3 posts from the same category on my index.php page, but due to the way my site's HTML/CSS is coded I'm having some difficulty understanding the correct way to go about doing this using a loop (as the code for the divs being used are not the same for all three sections, it's using different CSS styles to achieve a layered effect/look ).

Here is the HTML code

<div id="first-story" class="story">
<div class="content">
<h3 class="story-heading">Headline 1</h3>
<ul>
   <li>Nullam sit amet scelerisque est. </li>   
   <li>Aliquam erat volutpat. Duis sed nisi nunc, faucibus rutrum mauris. </li>
   <li>Nullam iaculis lorem ut tortor ullamco per aliquet. Integer id leo non mauris pulvinar gravida vitae a enim. </li>
   <li>Nullam sit amet scelerisque est.</li>
</ul>   
    <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
<div class="edge"></div>

<div id="second-story" class="story">
<div class="content">
 <h3 class="story-heading">Headline 2</h3>
   <p>Paragraph text</p>
   <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
</div>

<div id="third-story" class="story">
<div class="edge"></div>
<div class="content">Headline 3</div>
        <ul>
           <li>List item</li>
        </ul>
        <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
</div>

Any help would be very much appreciated.

1

The WordPress query object has an internal counter, current_post, which you can use to check the position of the post in the loop you are currently outputting, whether it's the main query $wp_query or a custom query you create via WP_Query. The important thing to remember about current_post is that it's zero indexed, the first post is 0, the second post is 1, etc..

Example, using the main query in a template:

while( have_posts() ):
    the_post();

    if( 0 == $wp_query->current_post ) {
        echo 'this is the first post';
        // markup for first post
    } elseif( 1 == $wp_query->current_post ) {
        echo 'this is the second post';
    } elseif( 2 == $wp_query->current_post ) {
        echo 'this is the third post';
    } else {
        echo 'this is > third post';
    }

endwhile;

If you create a new query via WP_Query, you do the same thing, except you reference the query object you created with your custom query:

$args = array(); // your custom query args
$custom_query = new WP_Query( $args );

while( $custom_query->have_posts() ):
    $custom_query->the_post();

    if( 0 == $custom_query->current_post ) {
        echo 'this is the first post';
    }
    // etc..

endwhile;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.