Support » How-To and Troubleshooting » Styling the first post

Styling the first post

  • I want to style every first post that comes on my main page and then another style for every other post that comes after.

Viewing 5 replies - 1 through 5 (of 5 total)
  • This will likely be done in your theme’s index.php …

    <?php if (have_posts()) : while (have_posts()) : ?>
    <?php while (have_posts()) : ?>

    Update that to…
    <?php if (have_posts()) : $postCount = 1; while (have_posts()) : $postCount++; ?>

    Then find where you post element starts…

    Here’s an example:
    <div class="post" id="post-<?php the_ID(); ?>">

    Now update that to..
    <div <?php if($postCount == 1) { ?>class="specialclass"<?php } else { ?>class="post"<?php } ?> id="post-<?php the_ID(); ?>">

    All posts except the first will have the usual post class, the first will have “specialclass”, but you can change the name to whatever you want…

    Hope that helps.. 🙂

    NOTE: If on the first part you only had.
    <?php while (have_posts()) : ?>

    You’ll then also need to update this area…
    <?php endwhile; ?>
    <?php endwhile; endif; ?>


    hee.. hee.. I beat you to your own answer.



    At least i know i’m not going mad when i wonder if i’ve answered the post count question before… 🙂

    Although the whole point of the post class is so you can style individual posts etc…

    Whatever works though… 🙂


    I tried this solution and it works fine, but with one problemm – when you navigate to page #2, the first post there gets also the special class.
    How could that be avoided?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling the first post’ is closed to new replies.