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 need help in styling the first post differently than the rest. What makes this differently is that I'm using this get_template_part in order for infinite scroll to work on my site.

This is what I use on index.php

<?php while (have_posts()) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; ?>

which will load the loop from content.php. This was my old loop:

<?php if (have_posts()) : ?>
<?php $post = $posts[0]; $c=0;?>
<?php while (have_posts()) : the_post(); ?>
<?php $c++; if( !$paged && $c == 1) :?>

<-! first post -->

<?php else :?>

<-! the rest -->

<?php endif;?>
<?php endwhile; ?>
<?php endif; ?>

Thanks for the help.

share|improve this question

2 Answers 2

up vote 3 down vote accepted

If you are using post_class() in your content template like this …

<div <?php post_class(); ?>>

… you can filter that and add a special class:

add_filter( 'post_class', 'mark_first_post' );

function mark_first_post( $classes )
{
    remove_filter( current_filter(), __FUNCTION__ );
    $classes[] = 'first-post';
    return $classes;
}

Your first post in a loop will now have the class first-post. The nice thing is: this filter will run just one time and deactivate itself then.

You can also use another helper function:

function is_first_post()
{
    static $called = FALSE;

    if ( ! $called )
    {
        $called = TRUE;
        return TRUE;
    }

    return FALSE;
}

You can test for the first post then in your template:

if ( is_first_post() )
{
    // render the first post
}
else
{
    // the other posts
}
share|improve this answer
    
Will this work if I use the 'if' statement? <php if { link post <?php } elseif { ?> aside I'm asking because the first post will have a large image while the rest will use the thumbnail. –  Gregory Schultz Apr 28 '13 at 4:18
    
@GregorySchultz Hm, in this case you need another way. See my update with an alternative. –  toscho Apr 28 '13 at 4:31
    
Turns out it didn't work! Is there a way to make it work on the first page only? Add !&=is_paged? –  Gregory Schultz Apr 29 '13 at 1:46
    
First page: if ( 2 > get_query_var( 'paged' ) ) –  toscho Apr 29 '13 at 1:52
    
Can you refresh the above example? –  Gregory Schultz Apr 29 '13 at 23:21

Got it to work!

<?php if ( 1 > get_query_var( 'paged' ) ) { ?>
<?php if ( is_first_post() ) { ?>
    first! <br />
    <?php the_title();?>
    <?php the_excerpt();?>
<?php } else { ?>
<?php the_title();?>
<?php the_excerpt();?>
<?php } ?>
<?php } else { ?>
<?php the_title(); ?>
<?php the_excerpt();?>
<?php } ?> 

You can see it in action - http://openbayou.staging.wpengine.com

Next question I have (same topic) is can this be cleaned up to make it simply as the code underneath is_first_page are duplicates

<?php } else { ?>
<?php the_title();?>
<?php the_excerpt();?>
<?php } ?>
<?php } else { ?>
<?php the_title(); ?>
<?php the_excerpt();?>
<?php } ?> 

Thank you so much for the help!

share|improve this answer

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.