Columbus, Ohio SEO Expert | Jacob Stoops

Styling Posts by Post-Count Using PHP Conditional Count Script

Post Comments
0 Comments

Hello all. Welcome to 2012! For my first post of the year, I’m going to show you a little trick I learned using PHP post-count functions to style my WordPress posts differently based on the post count – i.e. where that post falls in the numbered order (in relation to the other posts).

Styling Posts by Post-Count Using PHP Conditional Count Script

For example, you’ll be able to use this script to make sure that your most recent post has different styling than your second-most recent, and your second-most recent can be styled differently than your third.

Furthermore, you can use this script to style your WordPress category and search archives differently as well.

There are several files within your WordPress template where you can plug this script in if you want to count your posts and style them accordingly:

  • loop.php
  • index.php
  • archive.php
  • author.php
  • category.php
  • search.php
  • tag.php

Why is this script worthwhile? A couple reasons:

  1. It gives you the opportunity to jazz up your post loop by styling each post differently.
  2. Good design is a hallmark of memorable sites, and this gives you the chance to make your design unique from other sites.
  3. Allows you the flexibility to do things such as adding website ads and more right in the middle of your loop.
  4. I’m sure there’s much more…

So, let’s get to the code.

The Beginning

Here is the first part of the script:

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>

As you can see, this template will begin working if you have posts. If you have any posts, it will begin counting them starting at 0.

The Meat

Here is the next part of the script that lets you begin to count and style the posts.

<?php if ($count == 1) : ?>

<div class="item1">

     <!-- Put Your Stuff Here -->

</div><!-- .item# --> 




<?php elseif ($count == 2) : ?>      

<div class="item2">

     <!-- Put Your Stuff Here -->

</div><!-- .item# --> 




<?php elseif ($count == 3) : ?>      

<div class="item3">

     <!-- Put Your Stuff Here -->

</div><!-- .item# --> 




<?php elseif ($count == 4) : ?>      

<div class="item4">

     <!-- Put Your Stuff Here -->

</div><!-- .item# --> 




<?php elseif ($count == 5) : ?>      

<div class="item5">

     <!-- Put Your Stuff Here -->

</div><!-- .item# -->

You can pretty much keep repeating and renumbering the elseif loop infinitely (or until you run out of posts). The idea is, if you have 1 post, it will show it. If it is found that you have two posts, it will show both. If you have three posts, it will show three. If four, it will show four, and so on and so forth all the way up until the point where you’ve designated as a stopping point.

If you are using this script on your category archive page and stop the loop at say 10 posts, but there are 20 in the category that you’re showing. It will show and style the first 10, and then after that point, you can use a pagination script to show the next 10 (or however many). I’d recommend the WP-Paginate WordPress Plugin for this.

Wrapping It Up

Here is the code that stops the loop and wraps it all up:

<?php else : ?>

<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

A nice little close.

The Whole Thing

And now here is the whole script together:

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>

<div class="item1">

     <!-- Put Your Stuff Here -->

</div><!-- .item# --> 




<?php elseif ($count == 2) : ?>      

<div class="item2">

     <!-- Put Your Stuff Here -->

</div><!-- .item# --> 




<?php elseif ($count == 3) : ?>      

<div class="item3">

     <!-- Put Your Stuff Here -->

</div><!-- .item# --> 




<?php elseif ($count == 4) : ?>      

<div class="item4">

     <!-- Put Your Stuff Here -->

</div><!-- .item# --> 




<?php elseif ($count == 5) : ?>      

<div class="item5">

     <!-- Put Your Stuff Here -->

</div><!-- .item# -->


<?php else : ?>

<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

Keep in mind, most of the templates will utilize the WordPress loop, so you can either edit the loop or overwrite it in the other files. I prefer to overwrite the loop in the various files to ensure maximum control and flexibility in how my posts are displayed and styled.

Here is the blank CSS:

.item1 {
   /* STYLE IT HOWEVER YOU WANT */
}
.item2 {
   /* STYLE IT HOWEVER YOU WANT */
}
.item3 {
   /* STYLE IT HOWEVER YOU WANT */
}
.item4 {
   /* STYLE IT HOWEVER YOU WANT */
}
.item5 {
   /* STYLE IT HOWEVER YOU WANT */
}

That’s it. Hope you enjoyed the script, and have fun using it in your WordPress template. Happy 2012 all!

GD Star Rating
loading...
Styling Posts by Post-Count Using PHP Conditional Count Script, 5.0 out of 5 based on 2 ratings

This entry was posted in Wordpress and tagged , , , . Bookmark the permalink.

Jacob Stoops

About the Author

is an SEO professional living in Columbus, Ohio and working for Rosetta Marketing. He's been working in the SEO industry since 2006, and has been blogging since 2009. Learn more about , a Columbus, Ohio SEO Expert.

Comments & Social Reactions

  • Megan Tegtmeyer

    Love the new site! Great post, Can’t wait to try the script!

    GD Star Rating
    loading...
    • http://agent-seo.com Jacob Stoops

      Thanks Megan. Glad you liked it! Hope it works as well for you as it did for me…

      GD Star Rating
      loading...
  • http://twitter.com/manlioma Manlio Massimetti

    Hi, how I can show one link only after the 5 post if exists ??
    I tryed to put if count > 5 , but doesn’t works …any idea ??
    thank you so much!! 

    GD Star Rating
    loading...
    • http://agent-seo.com/ Jacob Stoops

      Hi, thanks for leaving a comment. You can add the link after all of the conditional statements, or in the template for the 5th result, but I’m not sure if this is what you’re asking or not?

      GD Star Rating
      loading...
My Work
Agent SEO Portfolio | Ohio SEO

Connect with Me

802 Subscribers & Followers
  • Subscribe to the Agent SEO RSS Feed
  • Follow Jacob Stoops on Twitter
  • Follow Jacob Stoops on Facebook