How can I easily add tag-based navigation to my blog?

[Jodiebe]

Hello!

I would like to add navigation to my blog so that people can quickly access blog posts based on tags.

Is there an easy way to do this?

Thanks!

[BrainStation23]

Hi @Jodiebe . Do you want something like this?

It is a article page. It is showing all the tags of the article which is clickable. Upon click it will redirect you to the page where you can view all the articles with that tag.

You can use the following code in your main-article.liquid file.

{% for tag in article.tags %}
<a href="{{ blog.url }}/tagged/{{tag | handle}}">
  {{ tag | capitalize}}
</a>
{% endfor %}

Let us know if this works for you or not.

[Jodiebe]

Thank you for the reply but that didn't seem to work. Is there a particular spot in the main-article.liquid file where that code needs to go?

[BrainStation23]

Can you share your main-article.liquid file?

[Jodiebe]

{{ 'section-blog-post.css' | asset_url | stylesheet_tag }}

<article class="article-template" itemscope itemtype="http://schema.org/BlogPosting">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
<div class="page-width page-width--narrow">
{% render block %}
</div>
{%- when 'featured_image' -%}
{%- if article.image -%}
<div
class="article-template__hero-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
{{ block.shopify_attributes }}
>
<div
class="article-template__hero-{{ block.settings.image_height }} media"
itemprop="image"
{% if block.settings.image_height == 'adapt' and article.image %}
style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
{% endif %}
>
<img
srcset="
{% if article.image.width >= 350 %}{{ article.image | image_url: width: 350 }} 350w,{% endif %}
{% if article.image.width >= 750 %}{{ article.image | image_url: width: 750 }} 750w,{% endif %}
{% if article.image.width >= 1100 %}{{ article.image | image_url: width: 1100 }} 1100w,{% endif %}
{% if article.image.width >= 1500 %}{{ article.image | image_url: width: 1500 }} 1500w,{% endif %}
{% if article.image.width >= 2200 %}{{ article.image | image_url: width: 2200 }} 2200w,{% endif %}
{% if article.image.width >= 3000 %}{{ article.image | image_url: width: 3000 }} 3000w,{% endif %}
{{ article.image | image_url }} {{ article.image.width }}w
"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
src="{{ article.image | image_url: width: 1100 }}"
loading="eager"
fetchpriority="high"
width="{{ article.image.width }}"
height="{{ article.image.height }}"
alt="{{ article.image.alt | escape }}"
>
</div>
</div>
{%- endif -%}

{%- when 'title' -%}
<header
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
{{ block.shopify_attributes }}
>
<h1
class="article-template__title"
itemprop="headline"
>
{{ article.title | escape }}
</h1>
{%- if block.settings.blog_show_date -%}
<span class="circle-divider caption-with-letter-spacing" itemprop="dateCreated pubdate datePublished">
{{- article.published_at | time_tag: format: 'date' -}}
</span>
{%- endif -%}
{%- if block.settings.blog_show_author -%}
<span class="caption-with-letter-spacing" itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">{{ article.author }}</span>
</span>
{%- endif -%}
</header>

{%- when 'content' -%}
<div
class="article-template__content page-width page-width--narrow rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
itemprop="articleBody"
{{ block.shopify_attributes }}
>
{{ article.content }}
</div>

{%- when 'share' -%}
<div
class="article-template__social-sharing page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
>
{% assign share_url = request.origin | append: article.url %}
{% render 'share-button', block: block, share_link: share_url %}
</div>
{%- endcase -%}
{%- endfor -%}

<div class="article-template__back element-margin-top center{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<a href="{{ blog.url }}" class="article-template__link link animate-arrow">
<span class="icon-wrap">{% render 'icon-arrow' %}</span>
{{ 'blogs.article.back_to_blog' | t: title: blog.title }}
</a>
</div>
{%- if blog.comments_enabled? -%}
<div class="article-template__comment-wrapper background-secondary">
<div
id="comments"
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
>
{%- if article.comments_count > 0 -%}
{%- assign anchorId = '#Comments-' | append: article.id -%}

<h2 id="Comments-{{ article.id }}" tabindex="-1">
{{ 'blogs.article.comments' | t: count: article.comments_count }}
</h2>
{% paginate article.comments by 5 %}
<div class="article-template__comments">
{%- if comment.status == 'pending' and comment.content -%}
<article id="{{ comment.id }}" class="article-template__comments-comment">
{{ comment.content }}
<footer class="right">
<span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span>
</footer>
</article>
{%- endif -%}

{%- for comment in article.comments -%}
<article id="{{ comment.id }}" class="article-template__comments-comment">
{{ comment.content }}
<footer class="right">
<span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span
><span class="caption-with-letter-spacing">
{{- comment.created_at | time_tag: format: 'date' -}}
</span>
</footer>
</article>
{%- endfor -%}
{% render 'pagination', paginate: paginate, anchor: anchorId %}
</div>
{% endpaginate %}
{%- endif -%}
{% form 'new_comment', article %}
{%- liquid
assign post_message = 'blogs.article.success'
if blog.moderated? and comment.status == 'unapproved'
assign post_message = 'blogs.article.success_moderated'
endif
-%}
<h2>{{ 'blogs.article.comment_form_title' | t }}</h2>
{%- if form.errors -%}
<div class="form__message" role="alert">
<h3 class="form-status caption-large text-body" tabindex="-1" autofocus>
{% render 'icon-error' %}
{{ 'templates.contact.form.error_heading' | t }}
</h3>
</div>
<ul class="form-status-list caption-large">
{%- for field in form.errors -%}
<li>
<a href="#CommentForm-{{ field }}" class="link">
{%- if form.errors.translated_fields[field] contains 'author' -%}
{{ 'blogs.article.name' | t }}
{%- elsif form.errors.translated_fields[field] contains 'body' -%}
{{ 'blogs.article.message' | t }}
{%- else -%}
{{ form.errors.translated_fields[field] }}
{%- endif -%}
{{ form.errors.messages[field] }}
</a>
</li>
{%- endfor -%}
</ul>
{%- elsif form.posted_successfully? -%}
<div class="form-status-list form__message" role="status">
<h3 class="form-status" tabindex="-1" autofocus>
{% render 'icon-success' %}
{{ post_message | t }}
</h3>
</div>
{%- endif -%}

<div
{% if blog.moderated? == false %}
class="article-template__comments-fields"
{% endif %}
>
<div class="article-template__comment-fields">
<div class="field field--with-error">
<input
type="text"
name="comment[author]"
id="CommentForm-author"
class="field__input"
autocomplete="name"
value="{{ form.author }}"
aria-required="true"
required
{% if form.errors contains 'author' %}
aria-invalid="true"
aria-describedby="CommentForm-author-error"
{% endif %}
placeholder="{{ 'blogs.article.name' | t }}"
>
<label class="field__label" for="CommentForm-author">
{{- 'blogs.article.name' | t }}
<span aria-hidden="true">*</span></label
>
{%- if form.errors contains 'author' -%}
<small id="CommentForm-author-error">
<span class="form__message">
{%- render 'icon-error' -%}
{{- 'blogs.article.name' | t }}
{{ form.errors.messages.author }}.</span
>
</small>
{%- endif -%}
</div>
<div class="field field--with-error">
<input
type="email"
name="comment[email]"
id="CommentForm-email"
autocomplete="email"
class="field__input"
value="{{ form.email }}"
autocorrect="off"
autocapitalize="off"
aria-required="true"
required
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-describedby="CommentForm-email-error"
{% endif %}
placeholder="{{ 'blogs.article.email' | t }}"
>
<label class="field__label" for="CommentForm-email">
{{- 'blogs.article.email' | t }}
<span aria-hidden="true">*</span></label
>
{%- if form.errors contains 'email' -%}
<small id="CommentForm-email-error">
<span class="form__message">
{%- render 'icon-error' -%}
{{- 'blogs.article.email' | t }}
{{ form.errors.messages.email }}.</span
>
</small>
{%- endif -%}
</div>
</div>
<div class="field field--with-error">
<textarea
rows="5"
name="comment[body]"
id="CommentForm-body"
class="text-area field__input"
aria-required="true"
required
{% if form.errors contains 'body' %}
aria-invalid="true"
aria-describedby="CommentForm-body-error"
{% endif %}
placeholder="{{ 'blogs.article.message' | t }}"
>{{ form.body }}</textarea>
<label class="form__label field__label" for="CommentForm-body">
{{- 'blogs.article.message' | t }}
<span aria-hidden="true">*</span></label
>
</div>
{%- if form.errors contains 'body' -%}
<small id="CommentForm-body-error">
<span class="form__message">
{%- render 'icon-error' -%}
{{- 'blogs.article.message' | t }}
{{ form.errors.messages.body }}.</span
>
</small>
{%- endif -%}
</div>
{%- if blog.moderated? -%}
<p class="article-template__comment-warning caption">{{ 'blogs.article.moderated' | t }}</p>
{%- endif -%}
<input type="submit" class="button" value="{{ 'blogs.article.post' | t }}">
{% endform %}
</div>
</div>
{%- endif -%}
</article>

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"articleBody": {{ article.content | strip_html | json }},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": {{ request.origin | append: page.url | json }}
},
"headline": {{ article.title | json }},
{% if article.excerpt != blank %}
"description": {{ article.excerpt | strip_html | json }},
{% endif %}
{% if article.image %}
"image": [
{{ article | image_url: width: 1920 | prepend: "https:" | json }}
],
{% endif %}
"datePublished": {{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' | json }},
"dateCreated": {{ article.created_at | date: '%Y-%m-%dT%H:%M:%SZ' | json }},
"author": {
"@type": "Person",
"name": {{ article.author | json }}
},
"publisher": {
"@type": "Organization",
"name": {{ shop.name | json }}
}
}
</script>

{% schema %}
{
"name": "t:sections.main-article.name",
"tag": "section",
"class": "section",
"blocks": [
{
"type": "@app"
},
{
"type": "featured_image",
"name": "t:sections.main-article.blocks.featured_image.name",
"limit": 1,
"settings": [
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__4.label"
}
],
"default": "adapt",
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.label",
"info": "t:sections.main-article.blocks.featured_image.settings.image_height.info"
}
]
},
{
"type": "title",
"name": "t:sections.main-article.blocks.title.name",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "blog_show_date",
"default": true,
"label": "t:sections.main-article.blocks.title.settings.blog_show_date.label"
},
{
"type": "checkbox",
"id": "blog_show_author",
"default": false,
"label": "t:sections.main-article.blocks.title.settings.blog_show_author.label"
}
]
},
{
"type": "content",
"name": "t:sections.main-article.blocks.content.name",
"limit": 1
},
{
"type": "share",
"name": "t:sections.main-article.blocks.share.name",
"limit": 2,
"settings": [
{
"type": "text",
"id": "share_label",
"label": "t:sections.main-article.blocks.share.settings.text.label",
"default": "Share"
},
{
"type": "paragraph",
"content": "t:sections.main-article.blocks.share.settings.featured_image_info.content"
},
{
"type": "paragraph",
"content": "t:sections.main-article.blocks.share.settings.title_info.content"
}
]
}
]
}
{% endschema %}

[BrainStation23]

@Jodiebe. You didn't include the code that we gave you.

I've inserted the code here:

[Jodiebe]

@BrainStation23 - I can see how this solution will show the specific tag for a specific blog post, which then links to other blog posts with the same tag.

But is there a way to have all the tags represented on a blog post so people can click through to any of the tags from any of the blog posts?

I'm using the Dawn theme.

Thanks!

[BrainStation23]

Not sure whether fully understood your question. But you've article.tags to access all the tags of a specific article and blog.tags to access all the tags of a specific blog.

[Jodiebe]

Thank you for clarifying. Is there a way for all blog.tags (all the tags of a specific blog) to appear on every blog post? 

[BrainStation23]

{% for tag in blog.tags %}
<a href="{{ blog.url }}/tagged/{{tag | handle}}">
  {{ tag | capitalize}}
</a>
{% endfor %}

[Jodiebe]

This is brilliant @BrainStation23 - thank you! The tags are in the right place now and all are showing. Is it possible for the tags to be buttons like in your first example rather than text only links? 

[BrainStation23]

You're most welcome @Jodiebe . Glad to hear that. If our reply has helped you then please mark it as accepted and give it a like. Thanks.

[Jodiebe]

Yes, will do. I just had one more question about whether the links can be buttons instead of text? Like in your original pic - like above? Thanks!

[BrainStation23 · Accepted solution]

Sorry, didn't notice your query. In the above image, those tags are actually links, but we've styled them to look like button.

You need to update the code like followings:

1. In your main-article.liquid file, at the very top add the following code:

<style>
  .blog-tag {
    text-decoration: none;
    background: black;
    color: white;
    padding: 0.5rem 1rem;
  }
</style>

2. Add the class "blog-tag" in your a tag like below:

<a class="blog-tag" href="{{ blog.url }}/tagged/{{tag | handle}}">
  {{ tag | capitalize}}
</a>

[Jodiebe]

Thank you!

[MayaDesigns]

Alternatively, you can try out one of those blog filter apps that uses tags to build dropdown style filtering, with built-in blog search ability.