{"id":77423,"date":"2012-05-04T10:00:30","date_gmt":"2012-05-04T14:00:30","guid":{"rendered":"http:\/\/wpmu.org\/?p=77423"},"modified":"2012-05-04T11:03:04","modified_gmt":"2012-05-04T15:03:04","slug":"how-to-group-wordpress-posts-by-date-on-your-homepage","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-group-wordpress-posts-by-date-on-your-homepage\/","title":{"rendered":"How to Group WordPress Posts by Date on Your Homepage"},"content":{"rendered":"

\"Post<\/a>
\nIf you\u2019ve 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:<\/p>\n

\"Post<\/a><\/p>\n\n

<\/h2>\n

The Code<\/strong><\/h2>\n

You will need to edit the code on your homepage for this to work, and so you may want to make a child theme<\/a> first so that you won\u2019t 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.<\/p>\n

Step 1:<\/strong> To edit you homepage, go to Archives > Editor > Main Index Template \u2013 index.php.<\/p>\n

Step 2:<\/strong> Find the spot in your code where the \u201ccontent\u201d begins. This will often be identified with a div that looks something along the lines of the following (yours may differ a little):<\/p>\n

<div id=\"content\" role=\"main\"><\/pre>\n
Step 3:<\/strong> 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 \u2013 there may be no notations for the closing div):<\/p>\n
\u00a0<\/div><!-- end #content --><\/pre>\n
 <\/p>\n
Step 4:<\/strong> Delete everything between the opening content div and the closing content div.<\/p>\n
Note:<\/span> 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.<\/strong><\/p>\n
 <\/p>\n
Step 5:<\/strong> Place the following code in between the opening content div and the closing content div.<\/p>\n
<?php\r\n$day_check = '';\r\nwhile (have_posts()) : the_post();\r\n\u00a0 $day = get_the_date('j');\r\n\u00a0 if ($day != $day_check) {\r\n\u00a0\u00a0\u00a0 if ($day_check != '') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 echo '<\/ul>'; \/\/ close the list here\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 echo get_the_date() . '<ul>';\r\n\u00a0 }\r\n?>\r\n<li><a href=\"<?php the_permalink() ?>\"><?php the_time(); ?> <b><?php the_title(); ?><\/b><\/a><\/li>\r\n<?php\r\n$day_check = $day;\r\nendwhile; ?>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php if ( have_posts() ) : ?>\r\n<?php endif; ?><\/pre>\n
 <\/p>\n
The Style of Your Grouped Posts<\/strong><\/h2>\n
The style of your list will be determined by your theme\u2019s styles. However, you should get something that looks somewhat like the following:<\/p>\n
\"Post<\/a><\/p>\n
 <\/p>\n
This will be a very basic look, of course, and so you may try styling it with CSS if you\u2019re comfortable doing that.<\/p>\n\n
 <\/p>\n
Some Basic Tips<\/strong><\/h2>\n
Tip 1:<\/strong> If you don\u2019t want the time of the posts to appear, then can remove the following piece of code from code given above:<\/p>\n
<?php the_time(); ?><\/pre>\n
 <\/p>\n
Tip 2:<\/strong> You can unbold the title by deleting the <b><\/strong> and the <\/b><\/strong> from the following snippet of code:<\/p>\n
<b><?php the_title(); ?><\/b><\/pre>\n
 <\/p>\n
Tip 3:<\/strong> 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<\/strong>:<\/p>\n
\"Post<\/a><\/p>\n
(Code adapted slightly from stackexchange<\/a>.)<\/p>\n\n
 <\/p>\n
Photo: Daily Planner<\/a> from BigStock<\/p>\n","protected":false},"excerpt":{"rendered":"
Make it easy for your visitors to skim down a list of your posts on your front page.<\/p>\n","protected":false},"author":84404,"featured_media":77424,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[],"tutorials_categories":[],"class_list":["post-77423","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=77423"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77423\/revisions"}],"predecessor-version":[{"id":216213,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77423\/revisions\/216213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/77424"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=77423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=77423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=77423"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=77423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}