What is Filtering?
Post filtering is when you group similar posts/pages and output them onto a page or just of section of it.
One example is the ‘related videos’ section next to the video player on any YouTube video. Another is the related blog posts sections usually located underneath or to the side of a singular blog post on most websites. You can also see post filtering when you see clickable tags/category button or singular pages dedicated to posts about a specific topic.
Why Filtering Is Important
Filtering your post/pages is beneficial for web visitors because it allows them to further explore a topic and get more useful information about a topic they probably did not know they needed.
Grouping your content like this can also make you a reputable source of information to your visitors. This is great news because when your visitors value your website as a reliable resource they are more likely to listen to what you have to say and purchase the products/services that you offer or recommend.
Another way filtering your posts/pages can benefit your website is by improving your websites page rankings within Googles search results. Google and other web browser tend to favor website that can provide a lot of information about specific topics. The more information you can provide the more traffic you’re going to get.
Assigning A Category Name
To start off you’re going to want to assign a category name to the posts/pages you want to filter.
You can do this by adding the variable category: followed by the name of the posts/pages you want to group together in the front matter of each post/page.
The front matter is the chunk of variables followed by a colon and information about that variable. 3 dashes at the top and 3 dashes at the bottom signifies where the front matter starts and ends.
For this example I’ve chosen to use ‘colors' as the name of the variable for my category. You can use whatever name you’d like. My advice is to use a name that describes the posts/pages/information you are trying to group together.
To a add your category: and it’s name to a post you simply create a new line within the front matter like below:
---
title: red
category: colors
---After adding a category: to all the posts/pages you want to filter you’re going to want to output them.
Like I stated earlier, you can either create a new page for these posts or add them in a section somewhere as links to relevant content.
Outputting the filtered posts
To output these posts/pages your going to want to start off by writing a Liquid function and some HTML. Check it out below.
{% for post in site.posts %}
{% if post.category contains 'colors' %}
<div class="posts">
<a href="{{ post.url | absolute_url }}">
<h2>{{post.title}}</h2>
</a>
</div>
{% endif %}
{% endfor %}You can use whatever HTML that best fits your page structure.
The secret to this Jekyll trick is in second line after the word contain. Notice the word in quotations 'colors' is the name we assigned to all the post.pages we want to .
To make this work for you simply replace 'colors' with the name of the category: you’ve chosen to group your post with.
Happy coding, stay safe.
Contact Information
If you have any question about Jekyll or if you’re looking for a web designer/developer to help you out don’t hesitate to contact me