Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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;
share|improve this answer
1  
Brilliant, thank you very much for your help. –  Steve Stevenson Jan 30 '13 at 1:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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