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:

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.

 

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.)

 

Photo: Daily Planner from BigStock