highlighting posts by category on mediumish homepage
Why Categorize Featured Posts?
Organizing featured content by category helps guide readers to topics they care about. For example, a digital marketing blog may want to highlight SEO, email marketing, and affiliate tips in distinct sections. On a Mediumish Jekyll theme, you can build category-based sections on your homepage to improve readability and content segmentation.
Step-by-Step Guide to Highlighting Posts by Category
Step 1: Define Your Target Categories
Review the categories used in your existing posts. Pick 2–4 core categories that are central to your blog's mission. Let’s assume:
- seo
- email-marketing
- content-creation
Step 2: Group Posts Using Liquid Filters
In your index.html or homepage layout, create blocks to display posts from each category. Here’s an example structure:
<section class="category-highlight">
<h2>SEO Insights</h2>
{% assign seo_posts = site.posts | where_exp: "post", "post.categories contains 'seo'" | sort: "date" | reverse | slice: 0, 3 %}
<div class="category-block">
{% for post in seo_posts %}
<div class="post-card">
<a href="{{ post.url }}">
<h3>{{ post.title }}</h3>
</a>
<p>{{ post.excerpt | strip_html | truncatewords: 25 }}</p>
</div>
{% endfor %}
</div>
</section>
<section class="category-highlight">
<h2>Email Marketing Tactics</h2>
{% assign email_posts = site.posts | where_exp: "post", "post.categories contains 'email-marketing'" | sort: "date" | reverse | slice: 0, 3 %}
<div class="category-block">
{% for post in email_posts %}
<div class="post-card">
<a href="{{ post.url }}">
<h3>{{ post.title }}</h3>
</a>
<p>{{ post.excerpt | strip_html | truncatewords: 25 }}</p>
</div>
{% endfor %}
</div>
</section>Step 3: Apply CSS to Separate the Sections
Make sure each category section is visually distinct using a bit of custom CSS:
.category-highlight {
margin: 2rem 0;
padding: 1.5rem;
background: #fcfcfc;
border-left: 5px solid #00b894;
}
.category-block {
display: grid;
gap: 1rem;
}
.post-card {
background: white;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}Bonus: Add Navigation to Filter by Category
To make the experience more interactive, add clickable tabs or buttons at the top of the homepage to filter content by category using client-side JavaScript or anchor links. While Jekyll doesn’t support real-time filtering, this technique improves UX with minimal effort.
Use Case: Segmenting Posts for Different Readers
Let’s say your site serves two types of visitors: freelance marketers and business owners. By featuring one block for tactical SEO content and another for broader strategy articles, you allow each user type to self-select into the part of the blog most relevant to them. This kind of segmentation keeps bounce rates low and increases content depth per visit.
Dynamic Category Handling (Advanced)
If you want to avoid hardcoding category names, iterate dynamically:
{% assign target_categories = "seo,email-marketing,content-creation" | split: "," %}
{% for cat in target_categories %}
<section class="category-highlight">
<h2>{{ cat | replace: "-", " " | capitalize }} Posts</h2>
{% assign posts_by_cat = site.posts | where_exp: "post", "post.categories contains cat" | sort: "date" | reverse | slice: 0, 3 %}
<div class="category-block">
{% for post in posts_by_cat %}
<div class="post-card">
<a href="{{ post.url }}">
<h3>{{ post.title }}</h3>
</a>
<p>{{ post.excerpt | strip_html | truncatewords: 25 }}</p>
</div>
{% endfor %}
</div>
</section>
{% endfor %}This creates a scalable, low-maintenance system for highlighting category-specific content blocks without repeating yourself in Liquid.
Conclusion
Highlighting posts by category in Mediumish-powered Jekyll sites helps users discover more relevant content, improves homepage UX, and lets you emphasize what’s most important in your content strategy. With just a few Liquid filters and category checks, you can transform a flat homepage into a dynamic, editorial experience that evolves as you publish more.
