[Resolved] Creating an Estimated Reading Time

[Zad]

Is there any way to create an estimated reading time for blog posts?

There two links seem to provide some code to do so and I was wondering if it was implementable on GeneratePress.

https://birchtree.me/blog/reading-time-wp-php/

https://www.binarymoon.co.uk/2013/10/wordpress-estimated-reading-time/

GeneratePress 2.1.3

GP Premium 1.6.2

[Tom]

Those should both work just fine with GeneratePress. Where do you want it to show up?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zad]

Hi,

I want to make it similar to stuff that I often see from Medium.com or the Hugo framework. Reading time would be next to date etc.

View post on imgur.com

View post on imgur.com

[Tom]

So first you’d add this function to your site:

function tu_estimated_reading_time() {

	$post = get_post();

	$words = str_word_count( strip_tags( $post->post_content ) );
	$minutes = floor( $words / 120 );
	$seconds = floor( $words % 120 / ( 120 / 60 ) );

	if ( $minutes < 2 ) {
		$estimated_time = $minutes . ' minute' . ($minutes == 1 ? '' : 's') . ', ' . $seconds . ' second' . ($seconds == 1 ? '' : 's');
	} else {
		$estimated_time = $seconds . ' second' . ($seconds == 1 ? '' : 's');
	}

	return $estimated_time;

}

Then you’d do this:

add_filter( 'generate_post_date_output', function( $output ) {
    return $output . ' ' . tu_estimated_reading_time();
} );

Let me know if that works or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zad]

Thanks! Where would I add these codes? To the function.php file? Code snippets? Or hooks?

[Leo]

One of these methods here:
https://docs.generatepress.com/article/adding-php/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Zad]

Hi, when I try to insert the code I get an error for this line

if ( 1 < = $minutes ) {

Apparently the = sign is unexpected

[Tom]

I just made an adjustment to the code above – can you check again?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zad]

Seems to put it in a weird place and also estimate the time in a weird way

I generally want the time below the author and date. My date is also the last updated date rather than the original post date, added CSS from the Documentation page for that

View post on imgur.com

[Tom]

You can try this for your second function instead:

add_filter( 'generate_post_author_output', function( $output ) {
    $output .= '<div class="read-time">Reading time: ' . tu_estimated_reading_time() . '</div>';

    return $output;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zad]

It looks good now but for some reason the function isn’t calculating the times correctly

View post on imgur.com

Its estimating it to be abnormally low

[Tom]

That’s just one of the functions you found.

We could try simplifying it..

function tu_estimated_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );

    return $time;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zad]

Doesn’t seem to work. Maybe the function itself is fine but I think the add filter may need to be updated?

I have a gravatar entry meta and css code for last Updated.

View post on imgur.com

[Tom]

Did you keep this filter added?: https://generatepress.com/forums/topic/creating-an-estimated-reading-time/#post-645787

Your full functions should look like this:

function tu_estimated_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );

    return $time;
}

add_filter( 'generate_post_author_output', function( $output ) {
    $output .= '<div class="read-time">Reading time: ' . tu_estimated_reading_time() . '</div>';

    return $output;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zad]

Yup, doesn’t seem to work

[Author]

Posts