# Ghost Tips & Tricks #9 / Ghost Tags - Practical Examples to Use in Your Theme **URL:** \ **Category:** Marketplace\ **Created:** [December 10, 2020, 4:32pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817 "2020-12-10T16:32:57Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\ **Post date:** [December 10, 2020, 4:32pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/1 "2020-12-10T16:32:57Z")
Hello everyone, _This is issue number #9 of Ghost Tips & Tricks. Brought to you by [**Aspire Themes**](https://aspirethemes.com/). 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**](https://ghost.org/docs/themes/helpers/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. ```html {{#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'`. ```html {{#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. ```html Inspiration, Lifestyle, Money Managers, Nature, retirement ``` 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=' / ' }}`. ```html {{#get 'tags' limit='5'}} {{ tags separator=' / ' }} {{/get}} ``` The final result will be. ```html Inspiration / Lifestyle / Money / Nature / retirement ``` ### 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. ![Ghost Tag Slug](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/6/63574dd369ad74ba5e9c57ce0e916590a9039815.png) In this case, the basic syntax for the `#get` block helper is. ```auto {{#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. ```html {{#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. ```html {{#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. ```auto {{#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. ```html {{#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**](https://ghost.org/docs/api/v3/handlebars-themes/helpers/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. ```html ``` 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](https://ghost.org/docs/api/v3/handlebars-themes/helpers/tags/#list-of-attributes). The final result will be. ```html ``` #### 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. ```html ``` The final result will be. ```html ``` 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: - [Ghost Tips & Tricks #1 / Show Publish Date in the day time with AM and PM format](https://forum.ghost.org/t/ghost-tips-tricks-1-show-publish-date-in-the-day-time-with-am-and-pm-format/14289) - [Ghost Tips & Tricks #2 / Ghost Admin Right to Left (RTL) Support.](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357) - [Ghost Tips & Tricks #3 / Deploy Your Ghost Theme Using Github Actions](https://forum.ghost.org/t/ghost-tips-tricks-3-deploy-your-ghost-theme-using-github-actions/14966) - [Ghost Tips & Tricks #4 / Create a Tags List Page](https://forum.ghost.org/t/ghost-tips-tricks-4-create-a-tags-list-page/15653) - [Ghost Tips & Tricks #5 / Create an Authors List Page](https://forum.ghost.org/t/ghost-tips-tricks-5-create-an-authors-list-page/16437) - [Ghost Tips & Tricks #6 / Change Casper Theme Fonts Using Google Fonts](https://forum.ghost.org/t/ghost-tips-tricks-6-change-casper-theme-fonts-using-google-fonts/16691) - [Ghost Tips & Tricks #7 / Tools I Use to Develop, Edit and Deploy Ghost Themes](https://forum.ghost.org/t/ghost-tips-tricks-7-tools-i-use-to-develop-edit-and-deploy-ghost-themes/17031) - [Ghost Tips & Tricks #8 / Membership Troubleshooting Tips](https://forum.ghost.org/t/ghost-tips-tricks-8-membership-troubleshooting-tips/17294) * * * Also, check out my [Ghost Websites Inspiration](https://forum.ghost.org/t/ghost-websites-inspiration-1/14185) and [Ghost Newsletter](https://forum.ghost.org/t/ghost-newsletter-1/17885) series. Stay safe! _Ahmad_ ---
**Author:** ![inoryum](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/inoryum/32/11866_2.png) [@inoryum](https://forum.ghost.org/u/inoryum)\ **Post date:** [December 10, 2020, 6:58pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/2 "2020-12-10T18:58:27Z")
awesome piece of information ---
**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\ **Post date:** [December 11, 2020, 3:02pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/3 "2020-12-11T15:02:52Z")
Glad you found it helpful! ---
**Author:** ![Beric](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@Beric](https://forum.ghost.org/u/Beric)\ **Post date:** [December 15, 2020, 7:25pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/4 "2020-12-15T19:25:11Z")
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? ---
**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\ **Post date:** [December 16, 2020, 8:03am UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/5 "2020-12-16T08:03:35Z")
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 - [Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/) - [Getting started with the Web [MDN]](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web) - [freeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/) Then, the [Ghost Handlebars Themes](https://ghost.org/docs/themes/) has everything about how a theme works, structure, helpers, and much more… ---
**Author:** ![Beric](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@Beric](https://forum.ghost.org/u/Beric)\ **Post date:** [December 16, 2020, 8:16am UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/6 "2020-12-16T08:16:50Z")
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. ---
**Author:** ![Stromfeldt](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/stromfeldt/32/13572_2.png) [@Stromfeldt](https://forum.ghost.org/u/Stromfeldt)\ **Post date:** [December 16, 2020, 10:38am UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/7 "2020-12-16T10:38:33Z")
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. 😉 ---
**Author:** ![Beric](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@Beric](https://forum.ghost.org/u/Beric)\ **Post date:** [December 16, 2020, 2:20pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/8 "2020-12-16T14:20:56Z")
Thank you for your advice. I’ll learn Handlebars after CSS and then go on to Javascript afterwards. ---
**Author:** ![dsecareanu](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/dsecareanu/32/413_2.png) [@dsecareanu](https://forum.ghost.org/u/dsecareanu)\ **Post date:** [December 16, 2020, 3:39pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/9 "2020-12-16T15:39:08Z")
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) 🙂 Updated now per tutorial using handlebars: ``` ``` Thanks! PS @ahmadajmi you should edit your Nubia’s footer to also include website URL to website name, similar as with Ghost & Nubia links. 🙂 `© {{ date format='YYYY' }} {{ @site.title }} –` ---
**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\ **Post date:** [December 17, 2020, 12:04pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/10 "2020-12-17T12:04:00Z")
Well done, Daniel! I can see your code before and after and it looks tiny and native now :) > [@dsecareanu](#): > > PS @ahmadajmi you should edit your Nubia’s footer to also include website URL to website name, similar as with Ghost & Nubia links. I will consider that, thank you! :) ---
**Author:** ![jeremielondon](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeremielondon/32/31714_2.png) [@jeremielondon](https://forum.ghost.org/u/jeremielondon)\ **Post date:** [December 25, 2020, 7:21pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/11 "2020-12-25T19:21:47Z")
@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 : ![Screenshot 2020-12-25 at 19.07.03](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/2/2fdec7b426760acd7435dd169b4063f50beb0e69.jpeg) 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 : ![Screenshot 2020-12-25 at 19.20.28](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/8/83066e0658422237c00e0537ab4b2bd5e86d49b3.jpeg) Any idea on the way to get the result i want ? many thanks, ---
**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\ **Post date:** [December 28, 2020, 1:55pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/12 "2020-12-28T13:55:08Z")
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. > [@jeremielondon](#): > > `{{> card-tag }}` This line of code will not work here as you are now inside the `posts` block. ## 2. > [@jeremielondon](#): > > `{{#get "posts" filter="tags:hash-club"}}` 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](https://ghost.org/docs/themes/contexts/post/#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}} ``` ---
**Author:** ![jeremielondon](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeremielondon/32/31714_2.png) [@jeremielondon](https://forum.ghost.org/u/jeremielondon)\ **Post date:** [December 28, 2020, 2:32pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/13 "2020-12-28T14:32:41Z")
Hi @ahmadajmi, it does help me, many thanks for you support. ---
**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\ **Post date:** [December 28, 2020, 3:08pm UTC](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817/14 "2020-12-28T15:08:55Z")
My pleasure, Jeremie!