Estimated Reading Time

Hi there,

that code should work if the default theme post meta date is being displayed ... can you share a link to your site so i can see what the setup is ?

Sure, it’s quickbooksummary.com

Ok - so you're not displaying the Date in your posts which is required for that code to work ( as it hooks into beside the date ).

Where do you want the reading time displayed ? eg. below the author name
And do you want it on the Blog/Archives and the Single Posts?

I see. Ideally, it should be displayed beside the author name (on the right), or if it's hard to do, below the author name. I assume that it's possible to do it without displaying the post date, isn't it?

In the code you added to display the Estimated Time - see this line:

add_filter( 'generate_post_date_output', function( $output ) {

Change that to:

add_filter( 'generate_post_author_output', function( $output ) {

Solved! Thanks for your help and prompt response. Have a great day.

Glad to be of help

Hey @David, I followed the same steps but my reading time comes on second line. Have a look: https://furniturehow.com/how-to-clean-urine-from-velvet-sofa/

How can I arrange it like: May 19, 2022 by Usman · Reading time: 5 minutes

Looking Forward

Hi Usman,

Here’s a CSS you may try adding to Appearance > Customize > Additional CSS:

.entry-meta {
    display: flex;
}

.entry-meta span.posted-on {
    padding-right: 4px;
}

.entry-meta .read-time {
    padding-left: 4px;
}

You may modify the values to your preference.

Hope this helps! :)

Thank you @Fernando, it works fine. Can you Revise it for mobile too?

Will be thankful.

I guess it should be on the same line for mobile too. Mobile Screenshot: https://drive.google.com/file/d/1TYB4vULTZoyzP-db3FkyXzJxxk4YQQ84/view?usp=sharing

Thanks again. :)

I see. If that’s the case, it would be best to remove the CSS code, and then, modify the PHP snippet.

Replace this:

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

    return $output;
} );

with this:

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

    return $output;
} );

Overall, the code should be 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 . ' minutes';
}

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

    return $output;
} );

Kindly let us know how it goes.

Once again, thank you @Fernando. Now, all fine. Thanks.

Developers are SEO's underrated heroes. ;) :D

Have a great day.
Usman

You’re welcome Usman! Have a great day as well! :)