Ghost Tips & Tricks #5 / Create an Authors List Page

Hello everyone,

This is the fifth 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 how to add a custom Authors page to show a list of all the blog Authors. I will use the default Casper theme as an example.

1. Create the Authors Page Theme File

In your theme directory, create a new file and name it custom-authors.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 'authors' limit='all' include='count.posts' order='count.posts desc'}}
      <div class="post-feed">
        {{#foreach authors}}
          <article class="post-card {{#unless profile_image}} no-image{{/unless}}">
            {{#if profile_image}}
              <a class="post-card-image-link" href="{{url}}">
                <div class="post-card-image" style="background-image: url({{profile_image}})"></div>
              </a>
            {{/if}}
            <div class="post-card-content">
              <a class="post-card-content-link" href="{{url}}">
                <header class="post-card-header">
                  <h2 class="post-card-title">{{name}}</h2>
                </header>
                <section class="post-card-excerpt">
                  <p>{{bio}}</p>
                </section>
              </a>
            </div>
          </article>
        {{/foreach}}
      </div>
    {{/get}}
  </div>
</main>

{{/post}}

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

Next, the foreach helper used to loop through each author and render the list with the author profile image, name, URL, and bio.

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 Authors Static Page

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

The end result would be like.

This is an initial example of what you can do to the Authors page. You can take the code further and show the author social media accounts, location, cover image, and posts count.

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

Penang Ghost Theme Authors Page

Penang Ghost Theme Authors 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

Awesome tip :slight_smile:

If I want to exclude a specific account/author from showing on the page, how would I do that? Can you do limit=all but xyz?

You can try filter property like this

filter="slug:-author-slug"

Replace the author-slug with actual slug.

P.S. - It’s from my head, I have not testes it.

2 Likes

@GBJsolution solution should work fine. So, if you have an author with ahmad slug, the code should be something like:

{{#get 'authors' limit='all' filter='slug:-ahmad' include='count.posts' order='count.posts desc'}}

{{/get}}
1 Like

Worked like a charm :slight_smile:
Thank you both!

1 Like