[Resolved] Show Reading time on WP Show Posts (home page)

Would it be fine to remove the ellipsis? (...)

If yes, try this filter:

add_filter( 'generate_excerpt_more_output', 'add_read_time_to_read_more', 10, 1 );
add_filter( 'generate_content_more_link_output', 'add_read_time_to_read_more', 10, 1 );

function add_read_time_to_read_more($output){

    global $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 );
	
	$readtime = '<div class="archive-read-time">'.$time.' Min. Read</div>';
	
	$settings = wp_parse_args(
		get_option( 'generate_blog_settings', array() ),
		generate_blog_get_defaults()
	);
	
	$output = sprintf(
		'<p class="read-more-container"><a title="%1$s" class="read-more button" href="%2$s" aria-label="%4$s">%3$s</a></p>%5$s',
			the_title_attribute( 'echo=0' ),
			esc_url( get_permalink( get_the_ID() ) . apply_filters( 'generate_more_jump', '#more-' . get_the_ID() ) ),
			wp_kses_post( $settings['read_more'] ),
			sprintf(
				/* translators: Aria-label describing the read more button */
				_x( 'More on %s', 'more on post title', 'gp-premium' ),
				the_title_attribute( 'echo=0' ),
			), 
			$readtime
		);

    $output = '<div class="read-more-with-time">'.$output.'</div>';

    return $output;
}

And then add this CSS: ( It’s a slight improvement. I’ve added align-items so the buttton and the read time are vertically aligned)

.read-more-with-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

It’s pretty tricky to align w/ the way it was addd. But we can try adding it back w/ CSS.

Can you try this?

.entry-summary > p:first-child:after,
.entry-content > p:first-child:after {
    content: '...';
}

This should apply on the Blog index, Archive pages and the search page only –

body.blog .entry-summary > p:first-child:after,
body.blog .entry-content > p:first-child:after,
body.search .entry-summary > p:first-child:after,
body.search .entry-content > p:first-child:after,
body.archive .entry-summary > p:first-child:after,
body.archive .entry-content > p:first-child:after {
    content: '...';
}

One question, what is the Blog index, please?

Blog index page is the default main blog page of WordPress sites. It’s like an archive page but for ALL the posts of the site.

It’s the “post page” you set on Dashboard > Settings > Reading as shown here – https://share.getcloudapp.com/L1ueDRyd

Because I can see the ellipsis? (…) on the text excerpt, or this is a part of WP Show Posts by default?

That’s part of WPSP.

Last, is there any performance hit by adding this code and styling it?

It’s very minimal. I don’t think it will have any significant effect as it’s basically just adding ... which won’t effect any metric.

No problem. 😀

You probably meant the AJAX pagination.

I’ve checked the page and I didn’t see what you were pertaining to.

Here’s a recording of what I see when I checked it –
https://share.getcloudapp.com/E0uKNBkZ

On the video, I’ve scrolled through the for a whole minute. All the AJAX loaded pages had ellipsis and Read time.