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:

<?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. 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 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. 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? http://blogdenuria.com

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".