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

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Show Reading time on WP Show Posts (home page)

Viewing 15 posts - 1 through 15 (of 52 total)
  • Author
    Posts
  • #35157
    Charbel
    Participant

    Hello @David and @Leo and @Elvin

    I am using an Element to display the estimated reading time on every article (post).

    Here is PHP code from the Element (generate_after_entry_title):

    <?php
    function custom_estimated_reading_time() {
        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 );
        return $time . ' Min. ';
    }
    ?>
    <div class="read-time"><?php echo custom_estimated_reading_time() ; ?>Read</div>

    How can I use the same Element to display it on WP Show Posts next to the Author name (right side)?
    The author’s name is on the left, I need to add the estimated reading time on the right-hand side.

    Your help is highly appreciated.

    Article: https://charbelnemnom.com/passing-the-azure-security-center-ninja-training/

    Many Thanks!
    -Charbel

    #35166
    elvin
    Moderator

    Hi there,

    Here’s a list of hooks you can try to insert this on
    https://wpshowposts.com/support/topic/bbpress-metadata-and-dates-in-wpshowposts/#post-28854

    You can try wpsp_before_title or wpsp_after_title

    #35170
    Charbel
    Participant

    Hello @Elvin,

    Thank you for your reply.

    Do I need to create a new Element for that and use a Custom Hook?

    Could you please clarify more details on how to do it?

    Please note that the code I shared above is counting the words from the article and then adding the estimated time.
    If I take the same code and put it in a new Element, it won’t work because it’s Excerpt only and not the entire article.

    Please help!

    Thank You!
    -Charbel

    #35172
    elvin
    Moderator

    Do I need to create a new Element for that and use a Custom Hook?

    That’s correct. Selecting custom hook should display a custom field to enter your custom hook name in.

    Please note that the code I shared above is counting the words from the article and then adding the estimated time.
    If I take the same code and put it in a new Element, it won’t work because it’s Excerpt only and not the entire article.

    You should save the pre-calculated estimated reading time as a meta of the post so we can just pull the post meta from the hook for display.

    #35174
    Charbel
    Participant

    How do I know the name of the pre-calculated estimated reading time as a meta of the post?

    #35176
    Charbel
    Participant

    What should I choose for the Display Rules in the new Element? ‘BLOG‘?

    #35192
    elvin
    Moderator

    How do I know the name of the pre-calculated estimated reading time as a meta of the post?

    It’s up to you. The function to add post meta is this one – https://developer.wordpress.org/reference/functions/add_post_meta/

    What should I choose for the Display Rules in the new Element? β€˜BLOGβ€˜?

    The display rule location is the page where you’ll be placing the WP Show posts list. πŸ˜€

    #35199
    Charbel
    Participant

    Hello @Elvin,

    I am still not understanding the logic yet. I am sorry.

    I will step back and start from the beginning.

    1) I have an existing Element as follows:
    Name: Reading time Posts β€” Hook: generate_after_entry_title β€” Display Rules: Post
    With this PHP code:

    <?php
    function custom_estimated_reading_time() {
        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 );
        return $time . ' Min. ';
    }
    ?>
    <div class="read-time"><?php echo custom_estimated_reading_time() ; ?>Read</div>

    The estimated time is generated every time a user reads an article. The estimated time is displayed at the top of the article. How can I use a meta, if the estimated time is NOT stored somewhere, it’s generated by the (Hook above) each time a user enters an article.

    My question is, how can I take the estimated reading time for each article, and display it next to the author name (right-hand side) on WP Show Posts homepage. Here is a screenshot of what I want to accomplish (text in red).

    11.03.2021-07.31.51

    Could you please illustrate the steps in more detail?

    Thank You Elvin!

    • This reply was modified 3 weeks, 6 days ago by Charbel.
    #35202
    elvin
    Moderator

    The estimated time is generated every time a user reads an article. The estimated time is displayed at the top of the article. How can I use a meta, if the estimated time is NOT stored somewhere, it’s generated by the (Hook above) each time a user enters an article.

    Yes, that’s why I recommended add_post_meta() so you can store the calculation you’ve create into a post meta key.

    My question is, how can I take the estimated reading time for each article, and display it next to the author name (right-hand side) on WP Show Posts homepage. Here is a screenshot of what I want to accomplish (text in red).

    Yes I understood what you were trying to do. that’s why I’ve linked a list of hook on my reply here –
    https://wpshowposts.com/support/topic/bbpress-metadata-and-dates-in-wpshowposts/#post-28854

    You can try hooking the code you’ve created on wpsp_after_content. You either do it with GP Premium’s hook element or do it manually like this:

    add_action('wpsp_after_content','custom_estimated_reading_time', 10);
    
    function custom_estimated_reading_time() {
        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 );
    
        echo '<div class="read-time">'.$time.' Min. Read</div>'
    
    }
    #35204
    Charbel
    Participant

    Hello @Elvin,

    The code you shared above is not working. The ; was missing after the div at the end.
    I added the code manually in my child theme (functions.php), I saw the time was added on WP Show Posts home page, but when I click on any article, the site crashed (the article is not displaying well).

    I prefer to use the meta option with a Hook Element. Yes, I have GP Premium.
    I need to display it on the Frontpage of the site. I tried to play with the Hook, but it’s NOT displaying anything.

    Please let’s focus on GP Premium’s hook element.

    For my existing Element:
    Name: Reading time Posts β€” Hook: generate_after_entry_title β€” Display Location: Post
    Execute PHP is checked.
    What do I need to add to the code that I shared above to add the meta?
    I am not an expert, I need more guidance, please.

    For the new WP Show Posts Element:
    Name: Reading time WP Show Posts β€” Hook: wpsp_after_content β€” Display Location: Front Page
    Execute PHP is checked.

    ????

    Thank You!

    • This reply was modified 3 weeks, 6 days ago by Charbel.
    • This reply was modified 3 weeks, 6 days ago by Charbel.
    #35208
    Charbel
    Participant

    The location for the new Element should be set to Front Page and not to Page so it can show for the WP Show Posts home page.
    I just added a sample text message to see if it’s displaying and I can see the text.

    Now the remaining 3 points:

    1) Add meta to the code so the time gets generated and displayed correctly.
    2) I would like to inherit the font size/density of the Author’s meta.
    3) Aligning the display output for the time on the right side and NOT under the Author’s name.

    Thank You!

    • This reply was modified 3 weeks, 6 days ago by Charbel.
    #35235
    elvin
    Moderator

    The code you shared above is not working. The ; was missing after the div at the end.

    Ah that’s right. You can add ; to the end of the echo-ed value.

    For my existing Element:
    Name: Reading time Posts β€” Hook: generate_after_entry_title β€” Display Location: Post
    Execute PHP is checked.
    What do I need to add to the code that I shared above to add the meta?
    I am not an expert, I need more guidance, please.

    Don’t change anything here. Since this is already working for your default archive pages (GP) then we can leave it alone.

    For the new WP Show Posts Element:
    Name: Reading time WP Show Posts β€” Hook: wpsp_after_content β€” Display Location: Front Page
    Execute PHP is checked.

    It’s something like this – https://share.getcloudapp.com/d5u6A4JQ

    For point 1:

    I’m not sure what you mean. If it’s about displaying it in a certain manner, it’s usually all about CSS.

    For points 2 and 3:

    We can just copy the CSS. IF you’ve successfully hooked it, let us have a look for the CSS write-up. πŸ™‚

    #35237
    Charbel
    Participant

    Hello @Elvin,

    Unfortunately the code you shared in the screenshot here is not working – https://share.getcloudapp.com/d5u6A4JQ
    The home page crashed. I have exactly used the same code and settings.

    Could you please try it on a dev/test site on your end first and confirm?

    I cannot keep playing in production and crashing the site.

    Thank you for your support and understanding.

    • This reply was modified 3 weeks, 5 days ago by Charbel.
    #35240
    elvin
    Moderator

    Ah my bad. I thought you already fixed the missing ;. The code on the screenshot was meant as a placeholder.

    The exact code is :

    <?php
    function custom_estimated_reading_time() {
        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 );
    
        echo '<div class="read-time">'.$time.' Min. Read</div>';
    
    }
    
    custom_estimated_reading_time();
    ?>
    #35242
    Charbel
    Participant

    Hello @Elvin,

    It’s still not working:

    Here the new Hook Element in details. Display Location: Front Page

    11.04.2021-10.19.40

    And here you can see that the homepage crashed:
    11.04.2021-10.20.49

    Please test it in your environment.

    Please advise?

    Thank You!

Viewing 15 posts - 1 through 15 (of 52 total)
  • You must be logged in to reply to this topic.