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 %}

  {{ tag | capitalize}}

{% 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?

[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]

Can you share your main-article.liquid file?

[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?

[Jodiebe]

{{ ‘section-blog-post.css’ | asset_url | stylesheet_tag }}

{%- for block in section.blocks -%} {%- case block.type -%} {%- when '@app' -%}

{% render block %}

{%- when 'featured_image' -%} {%- if article.image -%}

{%- endif -%}

{%- when ‘title’ -%}

{{ article.title | escape }}

{%- if block.settings.blog_show_date -%} {{- article.published_at | time_tag: format: 'date' -}} {%- endif -%} {%- if block.settings.blog_show_author -%} {{ article.author }} {%- endif -%}

{%- when ‘content’ -%}

{{ article.content }}

{%- when ‘share’ -%}

{% assign share_url = request.origin | append: article.url %} {% render 'share-button', block: block, share_link: share_url %}

{%- endcase -%} {%- endfor -%}

{% render 'icon-arrow' %} {{ 'blogs.article.back_to_blog' | t: title: blog.title }}

{%- if blog.comments_enabled? -%}

{%- if article.comments_count > 0 -%} {%- assign anchorId = '#Comments-' | append: article.id -%}

{{ 'blogs.article.comments' | t: count: article.comments_count }}

{% paginate article.comments by 5 %}

{%- if comment.status == 'pending' and comment.content -%} {{ comment.content }} {{ comment.author }} {%- endif -%}

{%- for comment in article.comments -%}

{{ comment.content }} {{ comment.author }} {{- comment.created_at | time_tag: format: 'date' -}} {%- endfor -%} {% render 'pagination', paginate: paginate, anchor: anchorId %}

{% 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 -%}

{{ 'blogs.article.comment_form_title' | t }}

{%- if form.errors -%}

{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}

{%- for field in form.errors -%}
• {%- 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] }}
{%- endfor -%}

{%- elsif form.posted_successfully? -%}

{% render 'icon-success' %} {{ post_message | t }}

{%- endif -%}

{{- 'blogs.article.name' | t }} * {%- if form.errors contains 'author' -%} {%- render 'icon-error' -%} {{- 'blogs.article.name' | t }} {{ form.errors.messages.author }}. {%- endif -%}

{{- 'blogs.article.email' | t }} * {%- if form.errors contains 'email' -%} {%- render 'icon-error' -%} {{- 'blogs.article.email' | t }} {{ form.errors.messages.email }}. {%- endif -%}

{{ form.body }} {{- 'blogs.article.message' | t }} *

{%- if form.errors contains 'body' -%} {%- render 'icon-error' -%} {{- 'blogs.article.message' | t }} {{ form.errors.messages.body }}. {%- endif -%}

{%- if blog.moderated? -%}

{{ 'blogs.article.moderated' | t }}

{%- endif -%} {% endform %}

{%- endif -%}

{% 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:

[BrainStation23]

{% for tag in blog.tags %}

  {{ tag | capitalize}}

{% 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]

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:

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

  {{ tag | capitalize}}

[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.

[rhituja1]

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