Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Display Post Divider In Between Posts

Right before the closing of the The Loop, insert this code:

if (($wp_query->current_post + 1) < ($wp_query->post_count)) {
   echo '<div class="post-item-divider">Post Divider</div>';

This will create a <div> you can style as a post divider. The cool part being, it only gets inserted between two posts, skipping the last one. Thanks to Craig Maclean.


  1. Permalink to comment#

    This piece of code is excellent and saved my day, thanks!

  2. What’s great is you can utilize this technique to output just about anything you want before and after your post data, including objects with specific id’s for manipulation with javascript.

    Gotta love the loop.

  3. Permalink to comment#

    Wow, this code is awesome! I’ve been looking for ways to separate posts easily for a while, this is definitely something I’ll set up!

  4. Permalink to comment#

    Could you use this to insert adverts or adsense – how?
    many thanks

  5. Boss
    Permalink to comment#

    What if you have excluded posts. Then the divider will show up even when it’s blank. Help?

  6. James Humphrey
    Permalink to comment#

    Thank You!!!

  7. Toni
    Permalink to comment#

    Thanks for this snippet.

    So I imagine that the CSS looks like:

    .div.postdivider { background image: url(whatever)


    What other coords should be in place for this to work? I’m a fairly new designer so please forgive me. Thanks.

  8. chrismccoy
    Permalink to comment#

    nice snippet ;) i did something similar recently, i had a design that i needed to add a last class to every 4th post.

     if (!((1+$wp_query->current_post) % 4)) echo 'last' ; 
  9. seeems this code is for experts only, it assumes a lot….

    would you please clear what do you mean by….

    “Right before the closing of the The Loop, insert this code”?

  10. Prakash,

    Check out for an explanation of The Loop. The short story is you paste the code above before this bit of code:

    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
  11. Permalink to comment#

    Thanks, this worked great! Now I’m off to create my first web app (had to wait until the kids started school full time).

  12. Did it! Thak you! Now how can style it?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";