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.

9 Responses to Styling the First Post Different

  1. Stella comments:

    What this means is that the therapist who is providing a sensual massage actively promotes and encourages feelings of sensual and erotic pleasure within the receiver’s body as they are receiving the sensual massage, rather than giving a more traditional strictly therapeutic massage such as a deep tissue massage, swedish massage,
    or Thai massage. Although she becomes a strong leader for the
    X-Men, Storm has been portrayed as having trouble adjusting to western culture
    (for example, not understanding why she needs to
    cover herself in a public bath), and eventually leaves
    the X-Men when she marries Black Panther, King of Wakanda,
    and becomes Queen. Society will tell you that “a good girl doesn’t do that or this” and I’ll tell you – forget about
    society.

    My website cam girls naked (vitalyoga.org)

  2. Mazie comments:

    I like the valuable info you provide for your articles.
    I’ll bookmark your weblog and take a look at again right here regularly.
    I am relatively sure I will be told plenty of new stuff right here!
    Good luck for the next!

    My website: Fuzion Pirates Hack (Youtube.Com)

  3. Delilah comments:

    I know this if off topic but I’m looking into starting my own blog and
    was wondering what all is required to get set up? I’m assuming having a blog
    like yours would cost a pretty penny? I’m not very web savvy so I’m not 100% certain. Any recommendations or advice would be greatly appreciated.

    Kudos

    My web site; call of duty hacks

  4. Chanda comments:

    I like the valuable information you provide in your articles.
    I will bookmark your blog and check again here frequently.
    I am quite certain I’ll learn many new stuff right here! Good
    luck for the next!

    my weblog :: hair highlights ideas pictures

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

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

  7. 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>