# Monthly Archive Index Pages **URL:** \ **Category:** Themes\ **Created:** [February 18, 2020, 9:01pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110 "2020-02-18T21:01:02Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![pts](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/pts/32/3549_2.png) [@pts](https://forum.ghost.org/u/pts)\ **Post date:** [February 18, 2020, 9:01pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/1 "2020-02-18T21:01:02Z")
Hi. I’m relatively new to Ghost—I’m working on my second site with it, and my second custom theme—and I’ve run into a dead end. (I’m prototyping the site on Glitch using Ghost 3.0.0) I want to have an archive index page with no individual entries, but rather a list of months/years, i.e. “January 2020”. Following a month link would then bring you to a page containing all the posts for that month. I’m having trouble figuring out how to do either of these things. There doesn’t seem to be a way to iterate over post _dates_ using something like {{foreach}}, and I’m also having trouble figuring out how to create a combination of template & route that would result in listing all the posts for a given month. Any help in approaching either of these problems would be very appreciated! ---
**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\ **Post date:** [February 19, 2020, 12:07pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/2 "2020-02-19T12:07:11Z")
You’re in luck @pts, we’ve got something just for that. The post loop looks like this: ```auto {{#foreach posts}}
{{date format="MMMM YYYY"}}

{{title}}
{{/foreach}} ``` This renders each post with the date above it in the format of Month and year, e.g. January 2020. They key part is the `
` element has a class which includes the post month as a single digit number, e.g. `post-date-1` for January. We can then hook into that class using some CSS: ```css .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; } ``` This CSS will pick out any post which immediately follows a post with a matching `post-date-X` class. The result is exactly as desired and meets accessibility expectations. Even works with pagination. Hope this helps! ✌ ---
**Author:** ![John](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/john/32/29288_2.png) [@John](https://forum.ghost.org/u/John)\ **Post date:** [February 19, 2020, 12:44pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/3 "2020-02-19T12:44:53Z")
You can see that code in action here :) [The Listener – We hear and see everyting](http://thelistener.co/archive/) ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/4/41344e40b4830170f63de71dede80074a86b655e.png) ---
**Author:** ![pts](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/pts/32/3549_2.png) [@pts](https://forum.ghost.org/u/pts)\ **Post date:** [February 19, 2020, 5:30pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/4 "2020-02-19T17:30:33Z")
Holy cow, thank you so much! This is _fantastically_ helpful, and I would never have figured it out on my own; it didn’t even cross my mind that CSS would factor into the solution. ---
**Author:** ![pts](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/pts/32/3549_2.png) [@pts](https://forum.ghost.org/u/pts)\ **Post date:** [February 19, 2020, 5:31pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/5 "2020-02-19T17:31:19Z")
An example to work from!!! Thank you so much! This—no joke—makes my day. ---
**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\ **Post date:** [February 19, 2020, 5:35pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/6 "2020-02-19T17:35:05Z")
You’re very welcome 🥰. I’d love to take the credit but in this case it was @John who figured out this CSS trick ⚡ ---
**Author:** ![rolando](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/rolando/32/1826_2.png) [@rolando](https://forum.ghost.org/u/rolando)\ **Post date:** [February 21, 2020, 8:37am UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/7 "2020-02-21T08:37:51Z")
Do you think this feature could be built-in some time in Ghost? Most of the blogs use this feature ---
**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\ **Post date:** [April 12, 2020, 3:13am UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/8 "2020-04-12T03:13:18Z")
Here is another implementation of a “Post Archive”, which the developer has kindly included in his [free “Fizzy” theme](https://github.com/huangyuzhang/Fizzy-Theme/) as a [custom template](https://github.com/huangyuzhang/Fizzy-Theme/blob/master/custom-post-archive.hbs) (so you can copy it and use in your own site too): [https://fizzy.cc/archive/](https://fizzy.cc/archive/) ![fizzy-post-archive](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/e/e7fa2dd29396767862f1e38f324d1b0d26a75d29.png) ---
**Author:** ![jsh4](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jsh4/32/9756_2.png) [@jsh4](https://forum.ghost.org/u/jsh4)\ **Post date:** [May 18, 2020, 1:45pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/9 "2020-05-18T13:45:36Z")
how did you get on with this, @pts? I’m now attempting the same with [John’s](https://forum.ghost.org/t/channels-or-collections-for-my-blog/14463) helpful suggestion :) ---
**Author:** ![eriohm](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/eriohm/32/10245_2.png) [@eriohm](https://forum.ghost.org/u/eriohm)\ **Post date:** [November 8, 2020, 6:39pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/10 "2020-11-08T18:39:09Z")
How do I do this?! Looks awesome but a few more hints would be appreciated. Want to add an archive page just like this to the Attila theme and I’m very new at Ghost (since 2020-11-07) after being a long time WordPress user. ---
**Author:** ![lorcand](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lorcand/32/11466_2.png) [@lorcand](https://forum.ghost.org/u/lorcand)\ **Post date:** [April 3, 2021, 5:48am UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/11 "2021-04-03T05:48:43Z")
Hi, I am looking through this again. Have you come across any themes that do this, but maybe group by month? I would like an archive page for nearly 2K posts over about a 15 year period, and this would be too long. Thought I would ask 🙂 Thanks. ---
**Author:** ![harsht](https://avatars.discourse-cdn.com/v4/letter/h/22d042/32.png) [@harsht](https://forum.ghost.org/u/harsht)\ **Post date:** [April 30, 2021, 4:45pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/12 "2021-04-30T16:45:40Z")
I am having the same issue as @pts @DavidDarnes The code you shared needs to be embedded in one of the base files that comes with the downloaded theme, or do I need to create a new .hbs file. I’m using this code with the Alto and Dawn themes and can’t seem to get it to work. I have very minimal web development knowledge and would appreciate any extra input you can share. Thanks so much, I’m glad to have joined this forum and excited to learn from other members. ---
**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\ **Post date:** [May 1, 2021, 4:47pm UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/13 "2021-05-01T16:47:17Z")
You’ll need to create a new template file and insert the first block of code into it, the second part goes into your css file ---
**Author:** ![MorganConrad](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/morganconrad/32/41626_2.png) [@MorganConrad](https://forum.ghost.org/u/MorganConrad)\ **Post date:** [October 10, 2026, 5:24am UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/14 "2026-10-10T05:24:42Z")
Here is an alternative solution using Javascript instead of CSS. Might be cleaner for some situations. > **[GitHub - MorganConrad/ghost-archive-grouper: Group your gost blog article archive by date (e.g....](https://github.com/MorganConrad/ghost-archive-grouper)** > > Group your gost blog article archive by date (e.g. year or month) with \\ tags. ---
**Author:** ![MichaelThompson](https://avatars.discourse-cdn.com/v4/letter/m/7ea924/32.png) [@MichaelThompson](https://forum.ghost.org/u/MichaelThompson)\ **Post date:** [October 10, 2026, 10:42am UTC](https://forum.ghost.org/t/monthly-archive-index-pages/12110/15 "2026-10-10T10:42:28Z")
Nice solution! Using CSS to hide repeated month labels keeps the archive clean without adding extra template logic.