Dawn Theme: How to group posts by months on homepage?

Themes
1

Hello

I am using the Dawn theme on my blog - merecivilian.com

On the home page, I want to group posts by month so it breaks it up a bit instead of showing a long list of pots. Any guidance on how I can do this?

Many thanks

2

I have done group by year in a “hacky” way in my customized Dawn in this commit: Groups posts by year on index page · srijan/Dawn@150391e · GitHub

But, this has two major limitations:

  1. Works only for year, and needs hardcoded years in the CSS
  2. This breaks pagination. (I’m sure this part can be solved, just haven’t gotten around to it)

@MereCivilian - if you have any example of existing site or theme which does group by month, then maybe we can take a look at it’s HTML/CSS and try to figure out how they’re doing it?

3

I found an example, the Ubud theme from https://aspirethemes.com/

The archive page in the demo has grouping by month: Archive

From it’s CSS, I can see that grouping by month might actually be easier (than by year), because year does not have to be hardcoded in the CSS, only month numbers, which are limited to 12.

4

This forum post has the solution:

5

@srijan

How do I incorporate that into the dawn theme? As in what code in which file ? I am complete novice.

6

This requires editing the theme. If you’re okay with that, then this is the main diff required:

diff --git a/assets/css/blog/feed.css b/assets/css/blog/feed.css
index 4a7f3ed..f11cec9 100644
--- a/assets/css/blog/feed.css
+++ b/assets/css/blog/feed.css
@@ -23,6 +23,21 @@
     border-top: 1px solid var(--light-gray-color);
 }

+.post-date-1 + .post-date-1 .post-label,
+.post-date-2 + .post-date-2 .post-label,
+.post-date-3 + .post-date-3 .post-label,
+.post-date-4 + .post-date-4 .post-label,
+.post-date-5 + .post-date-5 .post-label,
+.post-date-6 + .post-date-6 .post-label,
+.post-date-7 + .post-date-7 .post-label,
+.post-date-8 + .post-date-8 .post-label,
+.post-date-9 + .post-date-9 .post-label,
+.post-date-10 + .post-date-10 .post-label,
+.post-date-11 + .post-date-11 .post-label,
+.post-date-12 + .post-date-12 .post-label {
+    display: none;
+}
+
 .feed + .feed.feed-paged {
     margin-top: 3rem;
     border-top: 0;
diff --git a/partials/loop.hbs b/partials/loop.hbs
index 90e3b51..879199d 100644
--- a/partials/loop.hbs
+++ b/partials/loop.hbs
@@ -1,4 +1,5 @@
-<article class="feed {{post_class}}">
+<article class="feed {{post_class}} post-date-{{date format="M"}}">
+    <div class="post-label">{{date format="MMMM YYYY"}}</div>
     <div class="feed-calendar">
         <div class="feed-calendar-month">
             {{date published_at format="MMM"}}

This might need further tweaking of the CSS, for example to fix the borders between posts, to style the post label, etc.

1 Like