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

10 Responses to Styling the First Post Different

  1. Flor comments:

    Water puppet shows can be seen at the small Museum of Vietnamese History, located within a large
    park and zoo, for a fraction of the price of a tourist show.

    Ho Chi Minh is a sight to be seen, and many people say that
    seeing this amazing space in person is the highlight of
    their Vietnam trip. One can also choose not recognized airlines which operate in few sectors
    and they will serve you much better when you are in your flight.

    my blog – vietnam tour offers

  2. astral projection comments:

    This weblog is very astounding, just what i am looking for to go through on my travels. Thanks Again

  3. Mainio comments:

    After looking over a handful of tthe blog
    articles on your web site, I truly like your technique of writing a blog.
    I saved it to my bookmark site list and will be checking
    back in the near future. Please visit my website too
    and tell me what you think.

    Tsekkaa: Laihdutus kevyesti (http://marknadsplatsen.se/index.php?do=/blog/150153/tallentavat-autokamerat/)

  4. Victoria comments:

    krafom extract bluelight
    kratom 15x extract experience
    kratom goloden extract
    kratom extract gold reserve

    She averaged numerous.5 points per game this coming year.

    The flowers of the catalpa are white by incorporating yellow during.
    I list in chronological order orr it should be there.

    kratom extract powder dosage
    kratom extract forum
    kratom 15x extract effects
    kratom resin bluelight

  5. Tracie comments:

    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

  6. KIDO comments:

    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*/ }

  7. kamil comments:

    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() ) : ?>

  8. 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=""> <s> <strike> <strong>