Display Post Divider In Between Posts

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

<?php
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.

Comments

  1. User Avatar
    Dan
    Permalink to comment#

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

  2. User Avatar
    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. User Avatar
    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. User Avatar
    Vincent
    Permalink to comment#

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

  5. User Avatar
    Boss
    Permalink to comment#

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

  6. User Avatar
    James Humphrey
    Permalink to comment#

    Thank You!!!

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

    Prakash,

    Check out http://codex.wordpress.org/The_Loop 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. User Avatar
    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. User Avatar
    NuriaDM
    Permalink to comment#

    Did it! Thak you! Now how can style it? http://blogdenuria.com

  13. User Avatar
    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
    }
    

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag