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

9 Responses to Styling the First Post Different

  1. Dominik comments:

    selling an akai mpk mini midi keyboard 61 (Curtis) controller with xy controller for 4k, PRICE IS NEGOTIABLE.

  2. Xiomara comments:

    Whats up very cool site!! Guy .. Beautiful .. Amazing ..
    I will bookmark your site and take the feeds also? I am satisfied to
    seek out so many helpful info right here in the post, we’d like develop extra strategies on this regard,
    thanks for sharing. . . . . .

    my blog post makeup artist los angeles near me

  3. Gabriel comments:

    The data included inside of should be collateralized to guard non-public information. The massive advantage of cloud internet hosting is
    that SMEs get all the computing power they want at a fraction of the associated
    fee and entry to a spread of specialist knowledge that might in any other case
    be prohibitive in a normal office. Picking the fitting firm to host your virtual keyboard for computer; http://www.deunvistazo.net, desktop
    is vital in order for you to take care of the suitable level of computing power mixed with a safe atmosphere.
    Facilitating constructive end-person experience and promise improved assist are necessary
    features in such an atmosphere. So what options should you get
    on your MIDI Keyboard? For most small MIDI controllers you may simply plug within the
    USB output cable into the converter and the iPad will power
    the MIDI keyboard. If the worth isn’t a priority for you, you might need to have
    a look on the controllers Midi Fighter Twister and
    Midi Fighter 3D by DJ TechTools.

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

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

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

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.