How to Group WordPress Posts by Date on Your Homepage


If you’ve ever wanted a way for your visitors to quickly scan down a list of your posts on your homepage, then the following little trick will allow you to group your posts together by date so they will look something along the lines of the following:

Featured Plugin - WordPress Appointments Plugin

Take, set and manage appointments and client bookings without having to leave WordPress. Appointments+ makes it easy.
Find out more

The Code

You will need to edit the code on your homepage for this to work, and so you may want to make a child theme first so that you won’t need to touch your original theme. Barring that, it would be a good idea to make sure you have a copy of your homepage (index.php) safely stored away.

Step 1: To edit you homepage, go to Archives > Editor > Main Index Template – index.php.

Step 2: Find the spot in your code where the “content” begins. This will often be identified with a div that looks something along the lines of the following (yours may differ a little):

<div id="content" role="main">

Step 3: After finding the opening div, go toward the bottom of the page and find the closing div for the content. This div will look something along the lines of the following (again, your theme may differ – there may be no notations for the closing div):

 </div><!-- end #content -->

 

Step 4: Delete everything between the opening content div and the closing content div.

Note: This is a radical step that will completely wipe out your posts on your front page (temporarily). For this reason you should make sure you have a copy of your original index.php file in case something goes wrong.

 

Step 5: Place the following code in between the opening content div and the closing content div.

<?php
$day_check = '';
while (have_posts()) : the_post();
  $day = get_the_date('j');
  if ($day != $day_check) {
    if ($day_check != '') {
      echo '</ul>'; // close the list here
    }
    echo get_the_date() . '<ul>';
  }
?>
<li><a href="<?php the_permalink() ?>"><?php the_time(); ?> <b><?php the_title(); ?></b></a></li>
<?php
$day_check = $day;
endwhile; ?>
                                             <?php if ( have_posts() ) : ?>
<?php endif; ?>

 

The Style of Your Grouped Posts

The style of your list will be determined by your theme’s styles. However, you should get something that looks somewhat like the following:

 

This will be a very basic look, of course, and so you may try styling it with CSS if you’re comfortable doing that.

Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

 

Some Basic Tips

Tip 1: If you don’t want the time of the posts to appear, then can remove the following piece of code from code given above:

<?php the_time(); ?>

 

Tip 2: You can unbold the title by deleting the <b> and the </b> from the following snippet of code:

<b><?php the_title(); ?></b>

 

Tip 3: Because this will greatly reduce the amount of space it takes to list a post on your homepage, you may want to increase the number of posts shown there. Do this by going to Settings > Reading:

(Code adapted slightly from stackexchange.)

Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

 

Photo: Daily Planner from BigStock

Comments (5)

    • Hi – You’d like display the dates only for a specific category? I’m afraid I’m not sure how you would do that, though I suspect it could probably be done. Wish I could have been more help.

Participate