Support » Fixing WordPress » Using Offset in the Loop??

  • I want to style my recent posts individually, sort of.

    What I want to do is have 7 posts total.

    The 1st post styled differently from all other posts
    The 2nd post styled differently from all other posts
    The 3rd and 4th posts styled the same (but different from 1 and 2)
    The 5th, 6th, and 7th posts styled the same (but different from 1, 2, 3 and 4).

    How would I do this? With an offset? Or with a counter? Help would be great!

    I thought of just doing this strictly with CSS, but some posts have images, and some don’t some will only show a title, and some no picture and a title /excerpt, so doing it via CSS isn’t really a solid solution.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    I would use the build-in loop counter variable ‘current_post’ which starts with 0 for the first post in the loop;

    example for a ‘default’ query:

    <?php while( have_posts() ) : the_post();
    if( $wp_query->current_post == 0 ) {
    //output for 1st post//
    } elseif( $wp_query->current_post == 1 ) {
    //output for 2nd post//
    } .......ETC....

    example for custom query:

    <?php $args = array( .whatever. );
    $recent = new WP_Query( $args );
    while( $recent->have_posts() ) : $recent->the_post();
    if( $recent->current_post == 0 ) {
    //output for 1st post//
    } elseif( $recent->current_post == 1 ) {
    //output for 2nd post//
    } .......ETC....

    http://codex.wordpress.org/Class_Reference/WP_Query

    A solution maybe… Is use a simple counter in the PHP code and asign different classes using echoes in class and stuf,.. there are a lot of ways to do it…

    But a pure CSS aproach is use the pseudoclass :nth-child

    I do’nt know how toy main loop structure is, but usually is a wrapper div containing another div for every single post.Giving an output like this (or pretty similar)

    <div class="wrap">
    
        <div class="single_post_div">
            Here goes your post content 1
        </div>
    
        <div class="single_post_div">
            Here goes your post content 2
        </div>    
    
        <div class="single_post_div">
            Here goes your post content 3
        </div>
    
        <div class="single_post_div">
            Here goes your post content 4
        </div>
    
        <div class="single_post_div">
            Here goes your post content 5
        </div>    
    
        <div class="single_post_div">
            Here goes your post content 6
        </div>    
    
        <div class="single_post_div">
            Here goes your post content 7
        </div>    
    
    </div>

    As you see all post hace the same class, no need a single class for everyone or single id (you don’t want select bi ID, you want select by position in loop) there is when you could use :nth-child pseudoclass

    .wrap .single_post_div { width:100%; padding:20px 0; }
    
    .wrap .single_post_div:nth-child(1) { background:#9FC; }
    .wrap .single_post_div:nth-child(2) { background:#69F; }
    
    .wrap .single_post_div:nth-child(3),
    .wrap .single_post_div:nth-child(4) { background:#999; }
    
    .wrap .single_post_div:nth-child(5),
    .wrap .single_post_div:nth-child(6),
    .wrap .single_post_div:nth-child(7) { background:#aa0; }

    This will apply style to the (x) child from parent div (.wrap in the example)

    You can see it working in a lil jsfiddle i did.

    I like this solution cause yo don’t need mess on PHP or querys…

    I hope it be usefull toy you 🙂

    Thats what I ended up doing, a css approach. Only problem is it seems like handing off something like that to the next developer whoever handles the site might be confused by it all.

    use comments… a lot of comments xDDD

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Using Offset in the Loop??’ is closed to new replies.