Home › Forums › Pro Support › Show Reading time on WP Show Posts (home page)
- This topic has 51 replies, 2 voices, and was last updated 6 months, 4 weeks ago by
elvin.
-
AuthorPosts
-
November 15, 2021 at 11:32 pm #35508
Charbel
ParticipantThank you @Elvin, much appreciated!
Now it’s working as expected except for the styling:
The Read More is centered, it should remain like before on the left and the read time is correct on the right.
I used this CSS code:
.read-more-with-time { display: flex; justify-content: space-between; }
Please advise?
Thank You!
November 15, 2021 at 11:54 pm #35510elvin
ModeratorWould 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; }
November 16, 2021 at 12:11 am #35512Charbel
ParticipantThank you so much @Elvin, well done!
It’s beautifully aligned now… Here you go 🙂
So it’s not possible to keep the ellipsis? (
...
) It does not make sense, right?
How the text excerpt looks like after removing the ellipsis?Last, is there any performance hit by adding this code and styling it?
Thank You!
November 16, 2021 at 12:31 am #35514elvin
ModeratorIt’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: '...'; }
November 16, 2021 at 5:31 am #35524Charbel
ParticipantThank You @Elvin,
I tried the CSS code above, it works for the Archives and Search Results, however, it affected my home page (I saw the … directly under the Featured Post), and then I saw the … after the first paragraph at the beginning of each and every article (post).
We are almost there, could please advise if you can customize it further?
Thanks!
November 16, 2021 at 4:22 pm #35549elvin
ModeratorThis 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: '...'; }
November 16, 2021 at 11:34 pm #35576Charbel
ParticipantThank you @Elvin, much appreciated!
You are great. It works now as expected so beautiful 🙂
One question, what is the Blog index, please?
I have tested on Archive pages and the search pages and it works.Many Thanks, keep up the good work!
November 17, 2021 at 12:19 am #35583elvin
ModeratorOne 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
November 17, 2021 at 11:20 am #35595Charbel
ParticipantThank you @Elvin!
Yes, it’s working too on my Blog page here: https://charbelnemnom.com/blog
One question please, is the updated CSS code you shared here: https://wpshowposts.com/support/topic/show-reading-time-on-wp-show-posts-home-page/page/3/#post-35549 will show the ellipsis (…) on the WP Show Posts (Home Page) too?
Because I can see the ellipsis? (…) on the text excerpt, or this is a part of WP Show Posts by default?Last, is there any performance hit by adding this code and styling it?
Many Thanks!
November 17, 2021 at 4:10 pm #35600elvin
ModeratorBecause 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.November 18, 2021 at 1:34 am #35604November 18, 2021 at 2:12 am #35606elvin
ModeratorNo problem. 😀
November 28, 2021 at 6:47 am #35838Charbel
ParticipantHello @Elvin,
Hope you are doing well.
I need to come back to this topic, please. If you look at the archive page here: https://charbelnemnom.com/category/microsoft-azure/ and then keep scrolling down.
You will see that the Read Time is gone and the ellipsis (…) becomes double (6 dots).
I have a feature enabled (I don’t know what’s called) that when you scroll down for archived pages, more posts will load, however, what we have done above is not applicable in this case.
Could you please advise?
-
This reply was modified 7 months ago by
Charbel.
November 28, 2021 at 4:06 pm #35852elvin
ModeratorYou 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/E0uKNBkZOn the video, I’ve scrolled through the for a whole minute. All the AJAX loaded pages had ellipsis and Read time.
November 29, 2021 at 12:26 am #35861Charbel
ParticipantHello @Elvin,
Thank you for sending the video. This is really weird!
I’ve just checked now using Google Chrome in Incognito mode and I don’t see the time for the AJAX pagination: https://charbelnemnom.com/category/microsoft-azure/
Please see the screenshot below. The Read Time is gone and the ellipsis (…) becomes double (6 dots).Which browser did you use?
-
This reply was modified 7 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.