Make an Archive page for Jekyll without plugins
The archive pages are essential for blogs & CMS. The Jekyll haven’t any default way to generate archive pages. We want to use plugins to easily generate them.
But in Jekyll, we can get whole posts in reverse chronological order through site.posts
. With some additional liquid markup, we can make it as a month based archive page.
<h1 class="archive-header">Blog Archive</h1>
{% for post in site.posts %}
{% capture month %}{{ post.date | date: '%m%Y' }}{% endcapture %}
{% capture nmonth %}{{ post.next.date | date: '%m%Y' }}{% endcapture %}
{% if month != nmonth %}
{% if forloop.index != 1 %}</ul>{% endif %}
<h3 class="sub-header">{{ post.date | date: '%B %Y' }}</h3><ul>
{% endif %}
<li><span class="time">{{ post.date | date: "%d/%m/%Y" }}</span><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
The {% capture %}
tag used in this code help us to get the month and year of posts. First we capture latest post’s month & year and the one that follows it.
Then we compare them and if they’re different, the month and year inserted before a link to the post while if they’re the same, the post is simply added to the list for that month.
This process is repeating till the end by picking each post’s month & year and the one that follows it.
All credits are going to Mr. Zak for this awesome code snippet.
If you like a year based archive pages, just play with this code snippets. It is easier than you think.
Looking for a skilled WordPress/WooCommerce developer? I'm currently available for freelance, contract, or full-time remote opportunities! Let's create something amazing together. Send me a quick message, and I'll respond within 24 hours!
Recent Posts
- Automating Code Linting with GitHub Actions for WordPress Plugins
- Comprehensive Guide to Linting PHP, JavaScript, and CSS in WordPress Plugins Using Composer
- The Ultimate Guide to Indexing in Database Design
- Understanding 'update_meta_cache' in WordPress - When to Use It, When Not to, and Its Impact on Database Queries
- A Guide to Configuring JavaScript and SCSS Paths in WordPress Plugins with @wordpress/scripts
Your Questions / Comments
If you found this article interesting, found errors, or just want to discuss about it, please get in touch.