WordPress Tip: Add a Divider After All But Last Post

January 8, 2009 – 2:56 pm

icon wordpressThis WordPress tip will show you how to include a divider in between all your posts but omit the divider after the last post. This method is best for pages that list more than one post or post summary per page. Examples include the index page, search results page, and archives page.

postdividers

Some WordPress templates already provide a nice divider in between posts, but in case yours does not and you would like this addition, simply follow these steps.

Where to add the divider

Let’s use the template file index.php to add our divider. You’ll find this template file in your themes folder (yourdirectory / wp-content / themes / yourthemefolder). Open the file in your favorite editor, Notepad or other. Within the text, you should see Click to visit this external linkThe Loop. The Loop will begin with something like this:


<?php while ( have_posts() ) : the_post(); ?>

and end with something like this:


<?php endwhile; ?>

Within The Loop is the code that will display each post. In your template file, you may find this code enclosed in <div> tags.

A divider can be a simple horizontal rule, an image, or something more complex. Normally, to insert a divider after each post, you would add your divider code just before the end of The Loop like this:


<hr />
<?php endwhile; ?>

The only problem here is that the divider will display after each post, even the last one on the page. This may be an undesirable effect, as a divider usually divides something. So let’s add some code to place a divider after each post except that last one.

Add a divider… conditionally

Add an incremental counter to The Loop.

Change this:


<?php while ( have_posts() ) : the_post(); ?>

to this:
Thanks to Click to visit this external linkNathan Rice!


<?php
$postsperpage = intval(get_option('posts_per_page')) - intval(count(get_option('sticky_posts')));
query_posts('showposts='.$postsperpage.'&paged='.$paged); // show # set in settings
?>

PLUS THIS:


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

This says — let’s start the counter at 0 and increase the counter by 1 for each post listed.

Your usual post information is next:


<div class="post">
the title, the content, etc.
</div>

Next, let’s round this up with our divider code. Just before the end of The Loop, add the following code:


<?php echo ($postsperpage == $postcounter) ? "End-Of-Posts" : "<hr />"; ?>

What’s happening here?

We’re using what’s called an expression. If it’s raining, carry an umbrella, else bring sunblock.

The function echo simply spits out whatever text we specify onto the screen. $postsperpage represents the number you have set in the Admin section under Settings / Reading. It’s the line: Blog pages show at most # posts. If the number of posts per page equals to the count we’re up to, print the text “End-Of-Posts” to the page. If not, print out our divider code, horizontal rule in this case. Of course, change the text and code as you see fit, even deleting the “End-Of-Posts” text and leaving it empty if you’d like (do leave the quotation marks, though!).

Extra! If you would like to use an image as a divider, here are some tips:

To use an image from your yourdirectory / wp-content / themes / yourthemefolder, use this code:


<?php echo ($postsperpage == $postcounter) ? "End-Of-Posts" : "<img src=\"".get_bloginfo('template_directory')."/MYIMAGE.jpg\" width=\"WIDTH\" height=\"HEIGHT\" alt=\"divider\" >"; ?>

Notice the quotation marks are backslashed! Fill in your image name, it’s width, and it’s height.

And you’re done! How did it work for you?

icon

Bookmark and share:

[del.icio.us] [Digg] [Facebook] [StumbleUpon] [Technorati] [Twitter] More »

Post 411:

This entry was filed under On The Computer, WordPress and tagged , , , , , , . Follow with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

12 Comments


  1. And what if the posts number smaller than $posts_per_page?
    For example: $posts_per_page = 5, but i have only two posts.
    So:

    Post
    ( divider, legal )
    Post
    ( divider, illegal — because it’s last )

  2. 2 ElleDoesIt said:
    Wed 01-14-2009 at 9:56 am     Reply to this comment

    Great question. The divider will show beneath every post as long as we haven’t yet reached $posts_per_page. When we do reach that number limit, no divider is shown. The only situation I can think of where the actual number of posts on the page is less than what is set in admin options is for a brand new blog with, say, 1 post and the $posts_per_page option set to 5. Once the site has a number of posts that equals or exceeds $posts_per_page, the divider will show as expected. For everyone else, it should work as expected from the beginning.


  3. Now I have another solution — show divider before post except first one :)

    <? $post_number = 0;
    while (have_posts()) : the_post(); ?>
    <? if($post_number) : ?>
    [delimiter]
    <? endif; ?>
    [post content]
    <? endif; $post_number++; ?>
    <? endwhile; ?>

  4. 4 ElleDoesIt said:
    Fri 01-16-2009 at 3:08 pm     Reply to this comment

    I like that! Just remove the extra “endif” at the end or it’ll toss an error. Otherwise, it’s beautiful.


  5. Hello there,

    Great tutorial :) I was wondering how I would go about applying a different css class to the post when it is the last post on the page?

    Many thanks
    Dan

  6. 6 ElleDoesIt said:
    Mon 01-26-2009 at 10:17 am     Reply to this comment

    Thanks! To specify a different class for the last post, replace <div class="post"> with <?php echo ($postsperpage == $postcounter) ? "<div class=\"post\">" : "<div class=\"post LASTPOST\">\n"; ?>. Replace LASTPOST with any class name you choose. You can optionally remove the class name of “post” altogether.


  7. Awesome stuff! really useful, thanks!


  8. This is a great tip. I have one problem though. This worked great for my home page which is static. However, when I added this to my “archiive.php” file, the while which displays posts w/in a specific category it only showed posts from my home page, w/ divider, no the correct content. Any thoughts?

  9. 9 ElleDoesIt said:
    Mon 02-23-2009 at 11:44 pm     Reply to this comment

    Hi Jeff. Thanks for the comment. Try removing the “query_posts” line and see if that works for you.


  10. Elle, that worked great, but the only other problem now is, I have my # of post to show set to 10. However, after 7 posts, it doesn’t display the divider and proceeds to put the divider under post 8, 9 and 10? Thanks so much for your help!

  11. 11 ElleDoesIt said:
    Tue 02-24-2009 at 11:35 pm     Reply to this comment

    Hi Jeff. That’s very interesting. It’s working well for me with a couple of different themes but your theme may be a bit different. Would you mind either telling me what theme you’re using, or, if you’ve made any changes to it, sending me the archive.php file from your theme? My address is elle / elledoesit.com. Thanks.


  12. Believe it or not I struggled with this for a while. Thanks For the tip.

Add a Comment

Pingbacks and Trackbacks