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 Infinite SEO Plugin

Fully integrated with the SEOMoz API, complete with automatic links, sitemaps and SEO optimization of your WordPress setup - this is the only plugin you need to help you rank your site number 1 on Google - nothing else compares.
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 Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
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 Ecommerce Shopping Cart Plugin

Out of all the WordPress ecommerce plugins available, MarketPress has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
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