Wordpress services, tutorials and news

Creating a WordPress Posts Separator

Do you want to make a separator between posts in WordPress (and don’t know how to handle the last post case where you don’t need to show the separator?) This requires a bit of coding, but it’s quite easy to do. There are a few steps needed to create a WordPress posts separator:

  • identify what php page generates the WordPress posts list
  • locate “the loop”
  • Insert the separator code
  • Handle the last post case (where you don’t want to show the separator)

Identify what php page generates the WordPress posts list

First thing first, the pages where you need to add the separator code for the WordPress posts list is inside the wp-content/themes/your_theme_name folder. If you are not sure what theme the site is using, login to the WordPress dashboard and go to Appearance and look for the “Current theme”. The theme folder name should be similar to the theme name you can see in the dashboard.

Second, depending on where you are in the WordPress site, the list of posts can be generated by various php files inside the template directory. For example, if you are on the homepage, the list of posts can be generated by either home.php or by the index.php. If you are on a non homepage, then the list could be generated by category.php or some other page where the loop is inserted (for example if special template pages are created). The first step to locate what page handles the posts list is to have a look and understand the WordPress Template Hierarchy then edit the php page that you believe handles the posts lists and add a bit of text to it, refresh the site page in the browser and search for the text you just added. If you can locate the text, then you have located the right php file.

Locate “the loop”

The loop” is the specific WordPress code that generates the list of posts. While the_loop content might be different from implementation to implementation, you should be able to easily recognize the_loop start:

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

and the_loop end:

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

Insert the separator code

The separator can be anything: a line, an image, a block of text. If it’s an image, the best practice would be to insert a div and style it to point to an image. Using styles it’s easier to change the look&feel of the separator later. Let’s see a separator example:

<div class=”post-item-divider”>&nbsp;</div>

To make this div actually display something you need to locate the .css file inside the theme folder and add the new class to it. The new class might look something like this:

.post-item-divider {
background-image:url(images/separator.jpg);
height:1px;
line-height:1px;
width:300px;
margin-bottom:20px;
}

Of course, you need to upload the separator.jpg image inside the images folder.

To see if the separator shows, add the div just above the <?php endwhile; ?> Most likely the separator image should appear between the posts, problem is that it’s going to appear after the last post as well.

Handle the last post case (where you don’t want to show the post separator)

To handle the last post case as a separate case, you need at least 3 things:

  • find out how many posts are displayed on the page
  • find out the current post number
  • remove (or alter) the separator code if the current post number equals the total number of posts on the page

How many posts are displayed on the page?

You might think that the number of posts displayed on the page is the number of posts per page you set at the settings page in the WordPress dashboard. Well, that’s true, unless you are in a category or page that has less than the maximum number of posts you set in the WordPress admin. So, we need a bit of code to find out the number of posts on the current page. The Wp query function comes to the rescue, because it has a property called $post_count that indicated the number of posts being displayed.

So $wp_query->post_count gives us the total number of posts on a particular page.

Find out the current post number

As in any loop, “the_loop” in WordPress executes the code “while” there are posts. So basically the posts content is shown each time a loop takes place:

the content
the content
the content
.
.
.

If there is a way to count the loop number, then we know the content inside the look belongs to a particular loop and we can check if it’s the last post. There is a Wp query property to count the number of posts: current_post.

So $wp_query->current_post gives us the current loop number.

Compare the total number of posts with the current post number and remove the separator code

The only thing to do right now is to compare the total number of posts with the current post number and remove the separator code. First, we need to do and if statement and echo the separator code inside:

<?php if () {
echo ‘<div class=”post-item-divider”>&nbsp;</div>’;
} ?>

Let’s see the condition that compares the total number of posts with the current post number:

($wp_query->current_post) < ($wp_query->post_count-1)

What this condition says is: if the current post number is smaller than the total number of post -1. For example, if there are 9 total posts on the page and we are at a post number smaller than 8, show the separator. Hey, but wait, doesn’t this mean that the last post to show the separator is <8, so 7 which doesn’t put a separator between post 8 and 9? Well, the numbering of current posts starts from…0.

Here is the complete code that needs to be added inside the_loop:

<?php
if (($wp_query->current_post) < ($wp_query->post_count-1)) {
echo ‘<div class=”post-item-divider”>&nbsp;</div>’;
}
?>

Related Posts

7 Comments

  1. Hey there, thanks a lot for this step by step explanation. very helpful. I managed to add a divider, but when copied the code to solve the last post problem just below “” I get an error message. (“Parse error: syntax error, unexpected T_CLASS, expecting ‘,’ or ‘;’ in /home/www/78f062a2bf4c57d909f45879cefd34fd/web/blog/wordpress/wp-content/themes/twentyeleven-child/index.php on line 28”, 28 is this line: echo ‘ ’; ) I don’t know much about php. So it would be awesome if you could help me.

    best,
    S

  2. Great resource – followed your instructions and was able to insert the separator into loop etc…

    However when I copy/paste that last bit of code into the loop the whole blog crashes. Any thoughts on that?

  3. For anyone who has the same problem as mentioned above:

    After you copy-paste the code, replace the single quotes.
    Or… just copy the code below.

    current_post) post_count-1)) {
    echo ‘ ‘;
    }
    ?>

  4. Hi Elaine,

    Replace the ‘ characters.
    Just delete them and type them again.
    That’s the ‘ before the opening div and the ‘ behind the closing div.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Wordpress templates

responsive_wp_468x60