[Resolved] Read time for a blog post

[June]

Hello, I want to display estimated read time for a blog post. I want it display on the Blog Post Archives and the Single Posts both. I referred to the below link but couldn’t get it to work
https://generatepress.com/forums/topic/creating-an-estimated-reading-time/page/2/
Please help me in this regard.

[Ying]

Hi there,

What’s the exact code you are using currently?

[June]

I have the below code in function.php file

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 .= ‘

Reading time: ‘ . tu_estimated_reading_time() . ‘

‘;

return $output;
} );

I want to show the output on blog post archive and single post where my other meta elements exist but I don’t know how to make it display there 🙁

[Ying]

You are using dynamic content template for the blog page, and block element page hero for the single post, neither of them using the default theme meta.

So the code won’t work on your site.

Give this one a try:

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_dynamic_element_text', function( $post_date, $block ){
	if ( 'post-date' === $block['attrs']['gpDynamicTextType'] ) {
		$post_date .= '<div class="read-time">Reading time: ' . tu_estimated_reading_time() . '</div>';
	} 
	return $post_date;
},15,2);

[June]

Wow! Thank you so much. It worked perfectly but the CSS is disturbed in both desktop and mobile. Would appreciate your assistance in this regard.

[Ying]

It’s better to add an additional CSS to the published date headline block in both block elements, for example: date-reading.
https://wordpress.com/support/adding-additional-css-classes-to-blocks/

Then we can use this CSS for blog and archive:

@media (min-width: 769px) {
    .blog .dynamic-content-template .gb-headline.date-reading, .archive .dynamic-content-template .gb-headline.date-reading{
         display: flex;
    }
    .blog .read-time, .archive .read-time {
        padding-left: 11px;
    }
}

For single post:

.single-post .gb-container.inline-post-meta-area .gb-headline.date-reading {
    display: flex;
}
.single-post .read-time {
    padding-left: 10px;
}

[June]

Unfortunately, it didn’t work 🙁

[Ying]

The additional CSS class has been added to the Container block, not the Headline block, can you confirm?

[June]

Yes, I have added it to the container block.

[Ying]

It’s better to add an additional CSS to the published date headline block in both block elements, for example: date-reading.

I mean add the class to the headlineblock, NOT the containerblock.

[June]

Oops, my bad. I apology for misunderstanding.
It is working very well.
I have found some styling disturbance in blog post archive for mobile display.
And also I want to put the dot between date and reading time just like I have between comments and author name.
Finally, I want to display reading time after the author’s name.
Sorry for the hassle.

[Ying]

To add the•, you can simply modify this line:
<div class="read-time">Reading time: ' . tu_estimated_reading_time() . '</div>

to this:
<div class="read-time"><span class="gp-icon">•</span>Reading time: ' . tu_estimated_reading_time() . '</div>

Then add this CSS to match the spacing:

.read-time span.gp-icon {
    padding: 0 0.5em 0 0;
}

[June]

Thank you, Ying. I really appreciate your overall assistance for the whole thing. I’m just left with two more things where I need help. Please assist me in below:

1. I want to display reading time after the author’s name.
2. CSS styling for blog post archive for mobile display as the layout is disturbed.

Looking forward.

[Ying]

To add after the author name we have to start from the beginning again, try this PHP code instead:

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_dynamic_element_text', function( $post_author, $block ){
	if ( 'post-author' === $block['attrs']['gpDynamicTextType'] ) {
		$post_author .= '<div class="read-time"><span class="gp-icon">•</span>Reading time: ' . tu_estimated_reading_time() . '</div>';
	} 
	return $post_author;
},15,2);

And the additional CSS class need to be added to the author name headline block instead.

[June]

Made the suggested changes but the CSS is not responding well in both mobile and desktop 🙁 Please help. This would be the final edit hopefully.

[Author]

Posts