[Resolved] How to move an element below a certain element

Home Forums Support [Resolved] How to move an element below a certain element

Home Forums Support How to move an element below a certain element

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #2123319
    Stefan

    Dear Generate Press,

    I would like to move the reading time element (on the screenshot it says 34 mins). I would like to position it to be below the date meta tag on all my blog posts. The image is a featured image and I would like to remain where it is, but the date meta tag and the reading time to be above it.

    This is the current view.

    View post on imgur.com

    This is the desired view.

    View post on imgur.com

    I hope you can help me 🙂

    #2123358
    Leo
    Staff
    Customer Support

    Hi there,

    Try adding the reading time with the after_entry_header or after_entry_title hook:
    https://docs.generatepress.com/article/hooks-visual-guide/#single-post

    You might find this section of the video recently published helpful:

    #2123396
    Stefan

    Hi Leo,

    Thanks for the quick response. This is clear.

    I just don’t know how to do the first part, i.e., adding the “reading-time” part to a hook (I should add it as a hook, right, not as a block as explained in the video)?

    #2123406
    Leo
    Staff
    Customer Support

    Yup if you are using a function then using a hook element is the way to go.

    The video I linked is mainly to show the hook locations and demonstrates priority.

    #2123413
    Stefan

    The video helps me understand how the locations work, but I don’t have a hook element for the reading time and I don’t know what code to write in the hook element portion. If you can help me with that I would appreciate it.

    #2123414
    Stefan

    Is this what I write:

    View post on imgur.com

    #2123415
    Leo
    Staff
    Customer Support

    The screenshot looks good to me.

    Is it still showing up below the featured image?

    Have you tried clearing the caching plugin?

    #2123416
    Stefan

    Yes, it still shows below the featured image.

    #2123417
    Leo
    Staff
    Customer Support

    It shouldn’t. Can you try clearing and disabling your caching plugin first?

    #2123466
    Stefan

    It did not work by deleting the cache and disabling the plugins.

    #2123485
    Leo
    Staff
    Customer Support

    Can you try after_entry_header with a priority of 5?

    #2123829
    Stefan

    Hi Leo,

    I tried, including by clearing the cache and disabling the cache plugins. It still does not work.
    I have a hunch that the reading time hook element code is off. I think it is not linking it, but I don’t know how to resolve it.

    #2123860
    Fernando
    Customer Support

    Hi Stefan,

    How are you adding this Reading Time?

    I can see that the specific hook you’re putting above the Featured image is indeed going on top of it.

    However, it seems that the “34 min read” is being generated a different way?

    Can you try disabling this Hook Element temporarily and see if the 34 min read will disappear? If it doesn’t then you’re generating it another way.

    Hope to hear from you soon. 🙂

    #2123909
    Stefan

    Hi Fernando,

    I use the following plugin (https://wordpress.org/plugins/reading-time-wp/). I think this is the issue.

    Also, if you can guide me how to “natively” setup a reading time in GP, I would gladly do it and integrate it with the existing hook element.

    Regards,
    Stefan

    #2123998
    David
    Staff
    Customer Support

    Hi there,

    1. Add this PHP Snippet to your site:

    function tu_estimated_reading_time() {
        ob_start();
        $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 ='<div class="read-time"><span class="gp-icon">•</span>Reading time: '. ceil( $word_count / $wpm ) . ' minutes'. '</div>';
    
        return  $time; 
        return ob_get_clean();
    }
    
    add_shortcode('tu_reading_time', 'tu_estimated_reading_time');

    2. IN your Element you can add this shortcode to display the Reading Time: [tu_reading_time]

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