Ghost Tips & Tricks #9 / Ghost Tags - Practical Examples to Use in Your Theme

Hello everyone,

This is issue number #9 of Ghost Tips & Tricks. Brought to you by Aspire Themes. Premium and high-quality Ghost themes.


In this practical issue, I will show how to work with Ghost Tags to show a list of all the website tags, to show specific tags, or to exclude some in a Ghost theme.

I will use the Ghost #get block helper to make custom queries to the Ghost API to get the tags data.

Show All Tags

Let’s start with a basic example to show all the website tags.

{{#get 'tags' limit='all'}}
  {{ tags }}
{{/get}}

Here, we have used the limit attribute with the all value to specify how many tags we want in return. In this case, we passed the all value to get all tags.

The default value of the limit attribute is 15. In addition to the all value, we can pass a number, for example, if we want to get 5 tags, we can use limit='5'.

{{#get 'tags' limit='5'}}
  {{ tags }}
{{/get}}

The {{ tags }} helper will automatically output the tags as link items. If we looked at the HTML output, the result will be.

<a href="/tag/inspiration/">Inspiration</a>, <a href="/tag/lifestyle/">Lifestyle</a>, <a href="/tag/money-managers/">Money Managers</a>, <a href="/tag/nature/">Nature</a>, <a href="/tag/retirement/">retirement</a>

Note that the links are returned with a comma (,) as a separator. We can control this from the {{ tags }} helper.

So, if we need to add a / instead of ,, the {{ tags }} helper will be {{ tags separator=' / ' }}.

{{#get 'tags' limit='5'}}
  {{ tags separator=' / ' }}
{{/get}}

The final result will be.

<a href="/tag/inspiration/">Inspiration</a> / <a href="/tag/lifestyle/">Lifestyle</a> / <a href="/tag/money/">Money</a> / <a href="/tag/nature/">Nature</a> / <a href="/tag/retirement/">retirement</a>

Show Specific Tags

To show only specific tags, use the filter attribute and pass the Slug of each tag you want to get.

You can find the tag Slug on the tag setting page.

In this case, the basic syntax for the #get block helper is.

{{#get 'tags' filter='slug:[SLUG, SLUG, SLUG]'}}

Note the comma separating each slug.

So, if we want to get the tags with the inspiration, lifestyle and money slugs, the previous example will be like.

{{#get 'tags' filter='slug:[inspiration, lifestyle, money]'}}
  {{ tags separator=' / ' }}
{{/get}}

Note

- If the tag is empty with no posts, it will not be visible. Add the tag to any post and it will appear.
- This way does not guarantee to get the same tags in the same order as you added the slugs. Probably a Ghost issue. Instead, use the following method.

In this method, we get each tag separately. For example, to get the tags with inspiration and lifestyle slugs.

{{#get 'tags' filter='slug:inspiration'}}
  {{ tags }}
{{/get}}

{{#get 'tags' filter='slug:lifestyle'}}
  {{ tags }}
{{/get}}

Note that I removed the separator attribute as we are getting only one tag. Also, I removed the [ ] around the slug as we only filtering with one slug.

Exclude Tags

Suppose you want to show all tags except a few ones. For example, you want to show all the website tags except the Inspiration and Lifestyle tags.

In this case, the basic syntax for the #get helper is.

{{#get 'tags' filter='slug:-[SLUG, SLUG, SLUG]'}}

The difference here from the previous example is the - sign in the filter attribute before the slugs. Note the following example.

{{#get 'tags' filter='slug:-[inspiration, lifestyle]'}}
  {{ tags }}
{{/get}}

Customize the Output Markup

As we have seen, the {{ tags }} helper automatically outputs the tags as links. How about adding a CSS class to the link or how to output a custom HTML markup?

Instead of using the {{ tags }} helper, we can use the #foreach loop helper. This helper iterates over the tags data and outputs the content placed inside its opening and closing tags {{#foreach}}{{/foreach}}.

The following example will output all the tags as an HTML unordered list.

<ul>
  {{#get 'tags' limit='all'}}
    {{#foreach tags}}
      <li>
        <a href='{{ url }}'>{{ name }}</a>
      </li>
    {{/foreach}}
  {{/get}}
</ul>

Note the new {{ url }} and {{ name }} attributes. The {{ url }} attribute will show the tag URL white {{ name }} will output the tag Name. For the list of the available attributes, check Tag Attributes.

The final result will be.

<ul>
  <li>
    <a href="/tag/inspiration/">Inspiration</a>
  </li>
  <li>
    <a href="/tag/lifestyle/">Lifestyle</a>
  </li>
  <li>
    <a href="/tag/money/">Money</a>
  </li>
  <li>
    <a href="/tag/nature/">Nature</a>
  </li>
</ul>

Show Post Count

Another practical example is how to show post count for each tag. Use the include attribute and pass the count.posts as a value.

<ul>
  {{#get 'tags' limit='all' include='count.posts'}}
    {{#foreach tags}}
      <li>
        <a href='{{ url }}'>{{ name }} ({{ count.posts }})</a>
      </li>
    {{/foreach}}
  {{/get}}
</ul>

The final result will be.

<ul>
  <li>
    <a href="/tag/inspiration/">Inspiration (4)</a>
  </li>
  <li>
    <a href="/tag/lifestyle/">Lifestyle (8)</a>
  </li>
  <li>
    <a href="/tag/money/">Money (1)</a>
  </li>
  <li>
    <a href="/tag/nature/">Nature (3)</a>
  </li>
</ul>

That’s all that I wanted to share today and I hope you find this issue useful…


Checkout previous parts of the Ghost Tips & Tricks series:


Also, check out my Ghost Websites Inspiration and Ghost Newsletter series.

Stay safe!

Ahmad

7 Likes

awesome piece of information

1 Like

Glad you found it helpful!

This is great but it’s well above my level. Can I ask you what books or resources you used to get to your level? How did you learn all this stuff?

It’s totally fine if you didn’t get it now. We all started from zero.

Not sure if you have a coding background. If not, I would suggest starting with HTML and CSS. This will be helpful to understand how a web page is made.

Resources for HTML & CSS

Then, the Ghost Handlebars Themes has everything about how a theme works, structure, helpers, and much more…

I’m currently learning HTML and CSS on Codecademy. I’ll add Freecodecamp to the mix and go through the resources you’ve so kindly linked. I’m going to learn HTML, CSS, Javascript and then Handlebars, in that order. Thank you for your suggestions, they are greatly appreciated.

1 Like

If you want to do things in an order, I’d suggest switching around JavaScript and Handlebars.

If I understand correctly, Handlebars is rather simple and straightforward, a form of accessing templates if you will. JavaScript on the other hand is a massive can of worms, and it’s not as if you could finish learning it in a few months (maybe not even a few years?).

If you think you’re going to hold off on learning Handlebars (which is rather crucial for putting together and customising Ghost themes) until after you’ve learned JavaScript (which isn’t necessarily crucial for Ghost themes), it’s gonna be a long time until you get to Handlebars.

Not to discourage you in the slightest if that’s what you want to do, but after learning HTML and CSS I abandoned my attempt of learning JavaScript upon realising it was a whole world of its own that would take up too much of my time to properly learn and understand. I leave the JavaScript to the pros. :wink:

1 Like

Thank you for your advice. I’ll learn Handlebars after CSS and then go on to Javascript afterwards.

I’ve done this in Nubia partials/footer.hbs a while ago with plain HTML without being sure I’ve done it correctly (not a developer, but have basic html/css skills) :slight_smile:

Updated now per tutorial using handlebars:

<ul class='c-footer-list o-plain-list'>
  {{#get 'tags' filter='slug:[civil_society, constitution, corruption, eu_affairs, political_parties]' include='count.posts'}}
    {{#foreach tags}}
      <li>
        <a href='{{ url }}'>{{ name }} ({{ count.posts }})</a>
      </li>
    {{/foreach}}
  {{/get}}
      <li><a href="https://www.codruvrabie.eu/tags/">View all tags...</a></li>
</ul>

Thanks!

PS @ahmadajmi you should edit your Nubia’s footer to also include website URL to website name, similar as with Ghost & Nubia links. :slight_smile:

&copy; {{ date format='YYYY' }} {{ @site.title }} &ndash;

Well done, Daniel! I can see your code before and after and it looks tiny and native now :slight_smile:

I will consider that, thank you! :slight_smile:

@ahmadajmi,

Great topic thank for this, I was wondering if you could help me for the below Example using the penang theme …

I have categories like below that works great :

But I would like those categories to only display the number of post they have with the #club,

I did the below code :

{{#get 'tags' limit='all' include='count.posts' order='count.posts desc' }}
  {{#foreach tags}}
      {{#get "posts" filter="tags:hash-club"}}
        {{> card-tag }}
      {{/get}}
  {{/foreach}}
{{/get}}

it display this :

Any idea on the way to get the result i want ?

many thanks,

Thank you!

Not sure about this use case or if I understood it well, but here are some comments about your code that might be helpful.

1.

This line of code will not work here as you are now inside the posts block.

2.

This posts block needs a loop helper inside.

{{#get "posts" filter="tags:hash-club"}}
  {{#foreach posts}}
    {{> card-tag }}
  {{/foreach}}
{{/get}}

Once you are inside the posts loop scope, you can only output the Post object attributes

{{#get "posts" filter="tags:hash-club"}}
  {{#foreach posts}}
    {{title}}
  {{/foreach}}
{{/get}}

Moving the card-tag line and adding the foreach helper, the code could be written as.

{{#get 'tags' limit='all' include='count.posts' order='count.posts desc' }}
  {{#foreach tags}}
  {{> card-tag }}

    {{#get "posts" filter="tags:hash-club"}}
      {{#foreach posts}}
        {{title}}
      {{/foreach}}
    {{/get}}
  {{/foreach}}
{{/get}}
2 Likes

Hi @ahmadajmi,
it does help me, many thanks for you support.

1 Like

My pleasure, Jeremie!

1 Like