How to move an element below a certain element

This topic has 16 replies, 4 voices, and was last updated 4 years, 2 months ago by David.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
February 17, 2022 at 1:55 pm #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.
https://i.imgur.com/jrbuiwm.png

This is the desired view.
https://i.imgur.com/XH5xUkw.png

I hope you can help me 🙂

February 17, 2022 at 2:51 pm #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:

February 17, 2022 at 3:32 pm #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)?

February 17, 2022 at 3:48 pm #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.

February 17, 2022 at 3:55 pm #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.

February 17, 2022 at 3:56 pm #2123414

Stefan

Is this what I write:

https://i.imgur.com/qNLq4Cp.png

February 17, 2022 at 3:56 pm #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?

February 17, 2022 at 3:59 pm #2123416

Stefan

Yes, it still shows below the featured image.

February 17, 2022 at 4:00 pm #2123417

Leo
Staff
Customer Support

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

February 17, 2022 at 5:25 pm #2123466

Stefan

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

February 17, 2022 at 5:59 pm #2123485

Leo
Staff
Customer Support

Can you try after_entry_header with a priority of 5?

February 18, 2022 at 2:55 am #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.

February 18, 2022 at 3:29 am #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. 🙂

February 18, 2022 at 4:15 am #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

February 18, 2022 at 5:25 am #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]
Author

Posts