Feature
Post

Category
Code


WordPress Tip: Group Posts by Date in Listings

Some of you might be furrowing your brows at this one. What does he mean, add dates to listings? They are right there, in my post meta section, so what’s this nonsense? And since posts are chronological, they are already listed together with other posts with the same date, or the closest one at least.

That is true, in some themes each post got a date, and that’s fine. However, perhaps you’d like to group your posts by date in your listings, adding a divider to show that a new day has started. Like we do over at The Blog Herald, for instance. There, in listings, you’ll see a little divider telling you that the posts below are of this and that date, and when you’ve read them all, you’ll find another little divider with the next date, and so on. One date can have one or several posts under it, the important thing is that the actual date is only displayed once.

This is actually really easy to make happen, with the_date WordPress tag. Here is how.

How the_date Tag Works

Some WordPress versions ago, the_date tag changed. Suddenly, you couldn’t use it to display the date of each posts, because it would only output the results once per page and date. So if you had two posts on one date, only the first one would see any output from the_date tag. Theme designers solve this by using the_time instead, if they want to make sure that there is a date on every post in listings.

So the_date can only output every individual date once per page. Let’s use that!

Wait! Why Would I Want to Do That?

My main reason for using the_date like this is to avoid cluttering the page with the same date over and over again. I’m also reminding the reader of how often we update, and how many stories we actually publish every day. It is a way to help readers see your update schedule. Think about it, a small little timestamp in your post meta section will either be completely overlooked, or just not read since the reader already know that it is there. That is a good thing of course, you’ll want to check the date on posts sometimes, but I think it is a bit of an overkill in listings on some sites and blogs.

avoid cluttering the page with the same date over and over again

By using the_date like this, I make sure that the reader just sees the date once for each day and page, and since that means that it appears irregularly, it will have a greater impact. Again, that reminds the readers of the frequency of updates in a way a small timestamp never will.

However, you shouldn’t remove all your date formatting just because of this. Having dates printed on single posts is still a good thing, and if you’re not updating as often as, say, The Blog Herald, it might even look bad when there are several days between updates, which then will be very visible since the date pops out in listings. Use with care, and use when appropriate.

Group Posts by Date in Listings

So we have the front page of The Blog Herald, right? I want to output the date once, using a small little divider, get the posts for that date below it, and then output another divider. Like so:

Illustration for the_date use in The Blog Herald listsings

Illustration for the_date use in The Blog Herald listsings

You want that on your blog? It is easy, just put the_date in the appropriate spot, and it will spit out the date, just once. In the case of The Blog Herald, it is within the loop:

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

    	<div class="post" id="post-<?php the_ID(); ?>">
    		<?php the_date('', '<p class="the_date"><span>', '</span></p>'); ?>
    		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    		<div class="meta">
    			<div class="left">
    				<p>Filed as <?php the_category(', '); ?> with <?php comments_popup_link('no comments', '1 comment', '% comments'); ?> <?php edit_post_link('Edit', ' &bull; ', ''); ?></p>
    			</div>
    			<div class="right">
    				<p>by <?php the_author_posts_link(); ?></p>
    			</div>
    		</div>
    		<div class="entry"><?php the_content('read more'); ?></div>
    		<?php the_tags('<p class="taglist">Tags: ',', ','</p>'); ?>
    	</div>

    <?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

Something similar is used in every WordPress theme, since it is the loop that makes the magic happen. You should have no problem finding it in your theme’s files, just remember that different pages might use different files, so you might need to edit both home.php and index.php, as well as category.php, search.php, and so on. It all depends on your theme.

Let’s take a look at the_date part of that, shall we?

<?php the_date('', '<p class="the_date"><span>', '</span></p>'); ?>

That’s a bit more than just the basic the_date call, right? It is quite simple, this is how it works:

the_date('date formatting', 'stuff before the date', 'stuff after the date')

Edit the bold parts, or just use the_date without any special options, it is your call. As you can see, for The Blog Herald, I’m outputting a p tag with the class the_date, and a span, before actually printing the date, and then I just close these tags after it. Since I don’t want to litter the page with this code when there is not date outputted, I’m using the tag to output it, hence it won’t be there if there is no date to output for that particular post.


  1. By Uli Iserloh posted on August 30, 2008 at 12:11 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Mmmh,
    the tip made me wonder about something else: Let’s say you have a newsletter for each month, and you want to show in its sidebar a list of the previous month’s posts (i.e. the February 2008 newsletter page would include in the sidebar all posts with a datestamp of January 2008). Ideally, this would be accomplished with a database query based on the newsletter’s date stamp, so that you can just forget about dealing with this in the future.

    Any ideas how to tackle this? Maybe that would make for a good topic for another “WordPress Tip”…

    Cheers,
    Uli

  2. By Thord Daniel Hedengren posted on September 1, 2008 at 3:21 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I’m pretty sure you could do this with a second loop, although I personally haven’t tried fetching content from a set period of time. I’ll take a look at it, possibly it could be an upcoming WordPress tip. Thanks for the suggestion!

  3. By Andrew Brown posted on July 20, 2009 at 9:29 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I’ve written a snippet of code to allow you togroup your wordpress posts by month. instead of just by day.

  4. By Alex Leonard posted on August 27, 2009 at 1:11 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for pointing me in the right direction for what I needed – whilst this article didn’t give a direct answer for grouping posts by year, it set me up and I’ve put my findings up on the link below. Just using the_date and no need for any direct database queries.

    http://alex.leonard.ie/2009/08/27/wordpress-grouping-posts-by-monthyear/

  5. By Rod Boev posted on December 1, 2009 at 9:45 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Genius. Thanks!

  6. Trackbacklinks for 2009-05-31 - Patrick :)Stupid WordPress Tricks | SeritaStupid Wordpress tricks | Linux ShtuffWordpress Super Ninja » Stupid WordPress Tricks