Displaying Secondary Tags in Ghost's Source Theme

Some quick changes to ensure you can see all tags for each of my posts.

Displaying Secondary Tags in Ghost's Source Theme
Photo by Klemens Köpfle / Unsplash

I like how Ghost's default theme Source prominently displays the primary tag for each post. However, secondary tags were completely absent. The following steps will enable displaying all tags right after the post content.

These steps require access to both editing your theme files and injecting code into your site header & footer.
  1. In the theme file /post.hbs, add the following code immediately after the {{content}} helper:
{{#if tags}}
    <h3 class="tag-title">Tags</h3>
    <ul class="tag-list">
    {{#foreach tags}}
            <a href="{{url}}" title="{{name}}" class="tag tag-{{id}} {{slug}}">{{name}}</a>
  1. In the site header, inject the following CSS:
.tag-title {
  display: none;
.tag-list {
  padding-left: 0px !important;
.tag-list li {
  list-style-type: none;
  display: inline;

.tag {
  padding: 0.5em 1em;
  margin: 0.25em;
  border-radius: .25em;
  border: 1px solid var(--ghost-accent-color);
  outline: none;
  cursor: pointer;

.tag:not(.pill--selected):hover {
  background: var(--ghost-accent-color);
  color: #ffffff;

.tag {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ghost-accent-color);

a.tag {
  text-decoration: none;

If you successfully complete the above changes, you should see a list of tags displayed like the following. Each tag will display using your site's accent color.