DEV Community

Cover image for How to show reading time in Ghost blog posts
lukapg
lukapg

Posted on • Originally published at bloomthemes.com

How to show reading time in Ghost blog posts

As we all know by know, the attention span of an average visitor browsing your website is very short. They often just skim through the contents of the homepage and move. A good tactic for increasing the time the visitor spends on your website is to give them an accurate estimate of how much time they need to spend on a particular post.

By providing them with a reading time estimate, the visitor won't get bored of the post content as he/she knows what to expect. Let's see how to do this in Ghost!

The Ghost way

The easiest way to add post reading time in Ghost is by using Ghost's native reading_time helper in your theme. This helper simply counts all the words in a post and assumes a reading speed of 275 words/minute. You can use the reading_time helper both in the single post context and in a posts loop.

To use it in a single post, go to the post.hbs file in your Ghost theme and somewhere within the #post context add the helper:

{{#post}}
  ...
  <span class="reading-time-class">{{reading_time}}</span>
  ...
{{/post}}
Enter fullscreen mode Exit fullscreen mode

If you want to show a reading time for every post in your post list, you can add it in a foreach loop in which you list your posts. For example:

{{#foreach posts}}
  <h1>{{title}}</h1>
  <p>{{excerpt}}</h1>
  <span>{{reading_time}}</span>
{{/foreach}}
Enter fullscreen mode Exit fullscreen mode

Customizing the values

The reading_time helper also accepts two optional arguments which enable you to customize how it outputs the values for the reading time of 1 minute and multiple minutes. The optional arguments are:

  • minute - the text shown for the reading time of 1 minute
  • minutes - the text show for the reading time of more than 1 minute Let's see and example of the helper with arguments:
{{reading_time minute="1 minute" minutes="% minutes" }}
Enter fullscreen mode Exit fullscreen mode

As you can see, in the case of multiple minutes, you can get the value of minutes by using the % character in the argument.

Give this helper a try if you are not using it already, as it may just help you decrease your website bounce rates. You can see it in action in the Memo theme demo.

Top comments (0)