49 | Styling the First Post Different

g+

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; ?>
This entry was posted in Easy Coding for Wordpress, WordPress and tagged , , , . Bookmark the permalink.

6 Responses to Styling the First Post Different

  1. Horacio comments:

    hey there and thank you for your information ཿ Iཿve
    certainly picked up anything new from right here.

    I did however expertise a few technical issues using
    this web site, since I experienced to reload the web
    site a lot of times previous to I could get it to load
    correctly. I had been wondering if your web host is OK?

    Not that I’m complaining, but sluggish loading instances
    times will sometimes affect your placement in google and can damage your quality score if ads and marketing with Adwords.
    Anyway Iཿm adding this RSS to my email and can look out for a lot more
    of your respective exciting content. Make sure you update this again very soon..

    My page: bankruptcy lawyer move

  2. KIDO comments:

    Nice..
    but what if i want to last post?

    • michael replies:

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

  3. kamil comments:

    thanks!
    but what if I want not just first but first and second?

    • michael replies:

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

  4. Matt comments:

    Great post. Exactly what I was looking for after lots of digging. Thanks!

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>