Ajax load more post button loads posts in wrong place.

From memory I just changed the hook and it worked fine, but as you now see after the last premium plugin update it stopped working. I was hoping there might be something you’d notice that caused it to stop working. But maybe the safest option is just to avoid utilising the generate grid layout and create my own grid/flex layout... would that avoid this issue occurring?

Are you doing something like this?

add_action( 'wp', function() {
remove_action( 'generate_after_main_content', 'generate_blog_load_more', 20 ); //remove the default load more button.
add_action( 'your_hook_after_that_post_loop', 'generate_blog_load_more', 20 ); //re-add it under the first post loop.
} );

If not, I think this is worth trying. I'm not sure what's the hook after the <div class="eventsWrapper headerEvents"> element but if there isn't one. You can insert a portable hook in it using my suggested shortcode here - https://generatepress.com/forums/topic/hook-in-hook/#post-1636333

I have now solved the issue. For anyone else that wants to add another loop before the infinite scroll/load more loop the "infinite-scroll-item" class needs to be removed by applying a filter to post_class.

Nice one! Thanks for sharing. Glad you got it resolved. :)

Issues with the load more posts is happening on another website now... Link to issue sent privately.
Please advise what can be done to fix this. This page has been working fine up until some recent generatePress updates.

Hi there,

can you temporarily disable the Autoptimize plugin so i can see whats going on?

I disabled Autoptimize and no change. I've reactivated it now.

You will need to keep Autoptimize deactivated for us to try to help.

Thank you.

Ok re-deactivated :)

Hi Kirsty,

I see you have a child theme on your site.

I think some CSS in it may be causing the issue.

Can you test again without it? (use only the parent theme)

Let us know how it goes.

Hi Elvin,

I should have referred to my older comment above where I say I used a filter to remove the infinite-scroll-class.
In this instance I couldn't use a filter but this worked:

document.addEventListener( 'DOMContentLoaded', function() {
  
var targetFeature = document.getElementsByClassName('my_featured_post')[0];

  if (targetFeature.classList.contains('infinite-scroll-item')) {
    targetFeature.classList.remove('infinite-scroll-item');
  }

});

Nice one. Thanks for sharing it with us. :D

Is it fully sorted out? Let us know if you still need help with this. Thank you. Let us know. :D