The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Display Post Divider In Between Posts

Last updated on:

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. Dan
    Permalink to comment#

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

  2. Aidan Boyle
    Permalink to comment#

    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. Bryce
    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. Vincent
    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. Prakash Heda
    Permalink to comment#

    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. William Ortiz
    Permalink to comment#


    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. Christine
    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. NuriaDM
    Permalink to comment#

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

  13. PayteR
    Permalink to comment#

    I think this technique is obsolete in this days, its better to use pure CSS technique something like

    .post + .post {
      border-top: 1px solid #000

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>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed