Ghost Tips & Tricks #4 / Create a Tags List Page

Hello everyone,

This is the fourth issue of Ghost Tips & Tricks. I will be happy to share with you some practical Ghost tips that I find useful. Brought to you by Aspire Themes .


In this issue, I will share with you how to add a custom tags page to show a list of all your tags. I will use the default Casper theme as an example.

1. Create the Tags Page Theme File

In your theme directory, create a new file and name it custom-tags.hbs and then copy the following code inside it.

{{!< default}}

<header class="site-header">
  <div class="outer site-nav-main">
    <div class="inner">
      {{> "site-nav"}}
    </div>
  </div>
</header>

{{#post}}

<main id="site-main" class="site-main outer" role="main">
  <div class="inner">
    <header class="post-full-header">
      <h1 class="post-full-title">{{title}}</h1>
    </header>
    {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
    {{#foreach tags}}
        <a href='{{ url }}'>
        <h2>{{ name }} <small>({{ count.posts }})</small></h2>
        </a>
    {{/foreach}}
    {{/get}}
  </div>
</main>

{{/post}}

In this code, the get helper used to get the blog tags. The include attribute used to include the posts count. The order attribute used to order the tags based on the number of posts attached to them.

Next, the foreach helper used to loop through each tag and render the list with the tag URL, title, and the posts count.

At this stage, you may need to do a server restart. This will help the Template dropdown to show up in the next step.

2. Create the Tags Static Page

  • Create a new page and call it Tags for example.
  • From Page settings, select the Tags template from the Template dropdown.
  • Publish the page.

This is an initial example of what you can do to the tags page. You can take the code further and show the tag image with a custom design.

As an example, you can create something like what I have done with the Krabi and Penang themes.

Ghost Krabi Theme Tags Page

Ghost Penang Theme Tags Page


That’s it for today and I hope you find this useful…

Checkout previous parts of the Ghost Tips & Tricks series:


Also, I started a Ghost Websites Inspiration series share inspiring websites created with Ghost. I hope you can find it inspiring and useful too.


Stay safe!

Ahmad

3 Likes

HI there,

This works really well - but I’d be really interested to know how to show tag images, in the way you describe.

What additions to the code are required for this?

Many thanks,

Andrew

Hey Andrew, inside the foreach you can use something like.

  <img src='{{ img_url feature_image }}' alt='{{ title }}'/>

For other tag attributes, check out

Hi Ahmadajmi, I’m sorry I missed your reply, until today. Thanks for this - I’ll give it a try!

Andrew

Is there a way to sort the list of tags into alphabetical order? My list seems to appear in the order of whichever tags I’ve most recently used.

Hi, Yes, you can use. Use you get helper like this

{{#get "posts" limit="5" order="name asc"}}{{/get}}

You will get your tags into alphabetical order

Thanks

Thanks! That worked perfectly.