Archived topic
How to move an element below a certain element
16 replies · Started by Stefan on February 17, 2022
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 :)
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:
https://youtu.be/txJcxZoheoA?t=174
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)?
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.
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.
Is this what I write:
The screenshot looks good to me.
Is it still showing up below the featured image?
Have you tried clearing the caching plugin?
Yes, it still shows below the featured image.
It shouldn't. Can you try clearing and disabling your caching plugin first?
It did not work by deleting the cache and disabling the plugins.
Can you try after_entry_header with a priority of 5?
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.
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. :)
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
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]