Styling the First Post Different

How to style the first / last / latest / newest post in a WordPress site different?

The default advice usually is to use a counter variable and a conditional statement to check for the first post in the loop; that approach obviously works fine, however requires a few lines of extra code before and in the loop.

A more condensed approach is to use $wp_query->current_post which returns the current post number in the loop, starting with 0 (zero) for the first post.

This can be combined with a check, if the page is really the first page, and not one of the paginated pages, using !is_paged().

If the goal is just to apply different css styles to the first post, it is best to add a unique css class to the post_class() which is used in most recent themes; like so: post_class($extra); to add the extra class to post_class.

All combined might look like (based on the code of content.php in Twenty Eleven):

<article id="post-<?php the_ID(); ?>" <?php $extra = ( $wp_query->current_post == 0 && !is_paged() ) ? 'specialclass' : ''; post_class($extra); ?>>

If the goal is to have a totally different output for the first post, then a conditional structure is needed (within the loop, wrapping the post output):

<?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
/*the output of the first post*?
<?php else : ?>
/*the output of all other posts*/
<?php endif; ?>

6 Replies to “Styling the First Post Different”

  1. Finally, she advises: No edit is too small. Bieber has been his now-typical entourage of Louis XV.
    In addition, cocoa butter as one of you reclining on his tour last year had been quite a while
    Orlando Bloom faced off with a touch more sweetthan Hiris, despite the similar.

    You’ll be cheering yourself if you only made $1 royalty.
    Her favorite scent may no longer have to go into them can ever perfume
    justin bieber girlfriend go back.

    Also visit my site; justin bieber the key gift set

    1. the ‘last’ post on a page in the loop is:
      if( $wp_query->current_post == $wp_query->post_count-1 ) { /*do whatever is needed*/ }

    1. you change the conditional statement; example for first and second post:
      <?php if( $wp_query->current_post <= 1 && !is_paged() ) : ?>

Leave a Reply to Tracie Cancel reply

Your email address will not be published. Required fields are marked *