Custom template for Archives plugin to sort by Year / Months

Was looking around to see if anyone else was able to achieve this and aside from another plugin that didn’t quite accomplish what I wanted there wasn’t really a clean solution. I made a custom template from the included archives.html.twig to add Year tags above the months. Give it a try!

<!-- user/themes/custom_theme/templates/partials/year_month_archives.html.twig -->
{% set last_year = "" %}
{% for year,months in archives_data %}
    {% if last_year != year|date("Y") %}
    <a href="{{ archives_url ?? base_url }}/{{ config.plugins.archives.taxonomy_names.year }}{{ config.system.param_sep }}{{ year|date(config.plugins.archives.taxonomy_values.year)|lower|e('url') }}"><h2>{{ year|date("Y") }}</h2></a>
    {% endif %}
    {% set last_year = year|date("Y") %}
    <a href="{{ archives_url ?? base_url }}/{{ config.plugins.archives.taxonomy_names.month }}{{ config.system.param_sep }}{{ year|date(config.plugins.archives.taxonomy_values.month)|lower|e('url') }}">
    <h3>{{ year|date("M") }}{% if archives_show_count %}
        <span class="label">{{ months|length }}</span>
        {% endif %}</h3></a>

		{% for month, items in months if items|length > 0 %}
            <a href="{{}}">
            {{items.title|striptags|truncate(25, "...")|convert_encoding('UTF-8', 'HTML-ENTITIES')}}
		{% endfor %}
{% endfor %}

I still need to clean it up and style it for my custom theme but this is what I was looking to achieve.

1 Like

Thanks for sharing! It’s a nice easy plugin to customise. I made something very similar in the Receptar theme from a timeline style I pinched from somewhere (the Timeline plugin I think). The page collection “events” is defined as the list of blog posts, not sure why I named it that way:

<div class="years">
{% for year in 'now'|date('Y')'events')|date('Y') %}
{# #}
	<h2>{{ year }}</h2>
	<ol class="timeline">
	{% for event in page.collection('events') if|date('Y') == year %}
		<li><time datetime="{{|date('c') }}">{{|date('M j') }}</time> : <a class="event" href="{{ event.url }}">{{ event.title }}</a>
		{% if event.taxonomy.tag %}
		<div class="entry-category"> {# classnames and wrapper required to piggyback off theme styles #}
			<span class="tags-links entry-meta-element">
			{% for tag in event.taxonomy.tag %}
				<a href="/tag{{ config.system.param_sep }}{{ tag }}" rel="tag">{{ tag }}{% if not loop.last %}, {% endif %}</a>
			{% endfor %}
		{% endif %}
	{% endfor %}
{% endfor %}

Live example.