How to add a reading time and a number of views to your blog posts?

Published on 23/06/2020 | 3 comments

You may have noticed the little bar at the end of the Divi Tips articles? In this bar, you'll find the number of words in the article, the reading time, the number of views and a clap vote system.

barre d'infos pour articles

Recently, I sent you an e-mail (newsletter whose registration form is in the sidebar of this article) to ask you if you would be interested in knowing how to add this data to your articles. You've been very enthusiastic! So here's my answer...

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Count the number of words and reading time with WP Word Count

WP Word Count
Add the number of words and reading time

WP Word Count is a free extension (freemium) and light available on the official WordPress extensions directory.

Its adjustments are simple to make. After installing and activating the extension, here is what you need to do:

Parametrage Wp Word Count
  1. Go to the Word Count > Calculate tab.
  2. Click on "Calculate Word Count" and wait. The extension will retrieve the number of words contained in your publications.
  3. Then, from the Reading Time tab, you can enter how many words correspond to one minute of reading. By default, 250 words are equivalent to 1 minute of reading time.
  4. You can activate the automatic display of the reading time within your publications by simply checking the box provided for this purpose (not useful for the rest of the tutorial).
  5. You can also insert a text that will be placed before and/or after the reading time.

Finally, in the other tabs (Top Content, All Content...), you will find statistics: how many articles, how many pages, how many words, total reading time, etc.

2 - Display the number of views of an article with Post Views Counter

Post View Counter
Add the number of views

Post Views Counter is also a free and easy to set up plugin. What's not bad, with this plugin, you can display or not the number of views in a public way. This means that you can install Post Views Counter for back-office statistics purposes.

Once the extension is installed and activated, you will find its setting options in the Settings tab > Post Views Counter. Its parameters are separated in 2 tabs: General and Display.

Parametrage Post View Counter
  1. You can activate the counting of views according to publication types. Just check the box. You can also decide the counting method (PHP, JS, etc.).
  2. You can add a new column in the back office. This one will appear in the list of articles (and/or pages, depending on your choices checked) in order to obtain the statistics of views per publication.
  3. You can adjust the frame counting methods and intervals.
  4. You can exclude certain visitors from the count.
  5. Then, from the View tab, you will be able to set up everything related to the display of the number of front views. For example, you can add a text next to the number of views.
  6. You can automatically insert the number of views according to the type of publication (not useful for the rest of the tutorial).
  7. But also the position of the automatic display, for example: before the content.
  8. Finally, you will be able to choose whether or not to display an icon next to the number of views and you will be able to modify the Dashicons icon, which is the official WordPress icon font.

That's it, it's pretty simple as an extension but the options are enough to enhance your blog posts.

3 - Add applause with WP Applauding

Wp Applaud
Add a voting system

The last item I propose to add in your articles is a voting system with WP Applause. But we could very well have chosen a system with a star like KK Star Rating...for example.

This extension is free but, let's say it right away, it is not often updated...

Once installed and activated, this is how it works:

Parametrages Wp Applaud
  1. Go to the WPApplaud tab to check the types of publications on which you would like to see the "little applause" appear.
  2. You can exclude publications manually.
  3. You can disable the CSS in order to embark your own.
  4. You can choose the counting method (Ajax and maximum count per user).
  5. You have the possibility to add custom titles.
  6. Finally, and this is what interests us most for the rest of the tutorial: other display methods. You can use a shortcode to display applause in the desired location rather than automatically.

4 - Integrate elements to blog posts with the Theme Builder

So, now that you have installed and set up the 3 extensions, I suggest you display this reading information in your blog posts.

For this, you will need a article template created with the Builder Theme. If you haven't done so yet, you can follow this tutorial to create a Divi article template.

Modele Article Theme Builder
Create or change a material template with the Theme Builder

So you have understood that you either create or modify your article template created with the Theme Builder.

1 Ajout Ligne Modele Article
Insert a new line 4/4

You add a new row (the green "+") cut into 4 columns.

2 Ajout Shortcodes

In each column of this row, you add a text module in which you will place the appropriate shortcodes:

  • [ wp-word-count ]* to display the number of words.
  • [ wp-word-count-reading-time ]* to display the playback time.
  • Press [ post-views ] * to display the number of frames.
  • [ wp_applause ]* to display the voting system.

*Please note: do not copy-paste the above shortcodes as I deliberately added a space between the square brackets to allow them to be displayed.

Well, it's as simple as this, here's the result:

3 Resultat Infos Lecture
Displaying the number of frames and playback time within a Divi article

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

5 - Adjusting the display with some CSS

Finally, it is possible that you are not entirely satisfied with the final rendering, in this case, you can add some CSS code to perfect the display.

In the following example, I have added a Code module with a little CSS but you have a lot of other solutions for adding code in Divi.

Ajuster Affichage Infos Articles
Adjust the display with CSS if needed

For example, you can add a "before" and an "after" to display text around the reading time. This is possible in the options of the WP Word Count plugin but the visual is not optimal. You can also change the color of the vote counter (WP Applaud).

So, how about these tips for enhancing your blog posts with Divi?

Ajouter Temps De Lecture Article WordPress
Ajouter Compteur De Vue Articles WordPress
Reading Time Blog Post

1,120 words


You should like it too:

Vidéo mise en avant dans les articles Divi avec ACF

Video highlighted in Divi articles with ACF

This step-by-step tutorial shows you how to create a new custom field in your Divi Articles to add highlighted YouTube videos. You can do this easily with the Theme Builder and ACF.

3 Commentaires

  1. Harold

    Magnifique tout ça, merci !

  2. Decoster

    Merci pour cet article très intéressant.
    Comment procéder pour afficher le nombre de mots et le temps de lecture juste sous le titre de l’article, à la suite des méta.
    J’aurais bien voulu joindre une capture d’écran mais je ne trouve pas le lien ???
    Bien cordialement.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Share This