[Resolved] infinite scroll (using load more button) is not working

[Ginaphi]

Hi, im having an issue with the infinite scroll (using load more button).
unfortunately it’s in localhost mode as we are not live yet so i cant show you.
but here is the gist, i have a custom post type called “events”.
and on archive page of this “events” i showed grid of “events” posts.
pagination works fine automatically, but when i switch to infinite scroll (using load more button),
the button is not working. as what i check, the href of the button is only “#” which of course does nothing.

am i missing anything?

the only plugins i installed are : yoast, smart slider, generate blocks, forminator, CPT UI, ACF, branda, code snippets

[David]

Hi there,

is the archive page, the default themes archive template ?

[Ginaphi]

yes, i copied from archive template. here is my complete code.

<?php
/**
 * The template for displaying Events archive pages.
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

get_header(); ?>

	<div class="w-full" <?php generate_do_attr( 'content' ); ?>>
		<main <?php generate_do_attr( 'main' ); ?>>
			<?php
			/**
			 * generate_before_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_before_main_content' );

			if ( generate_has_default_loop() ) {
				if ( have_posts() ) :

					/**
					 * generate_archive_title hook.
					 *
					 * @since 0.1
					 *
					 * @hooked generate_archive_title - 10
					 */
					do_action( 'generate_archive_title' );

					/**
					 * generate_before_loop hook.
					 *
					 * @since 3.1.0
					 */
					do_action( 'generate_before_loop', 'archive' );

		

					?> 
<div class="relative  pt-16 pb-20 px-4 lg:pt-24 lg:pb-28 lg:px-8">
  <div class="absolute inset-0">
    <div class="bg-white h-1/3 lg:h-2/3"></div>
  </div>
  <div class="relative max-w-7xl mx-auto mt-12">
    <div class="text-center">
      <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 lg:text-4xl">Events</h2>
      <p class="mt-3 max-w-3xl mx-auto text-xl text-gray-500 lg:mt-4">Your Ultimate Guide to Past and Upcoming Events and Activities</p>
    </div>
    <div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-7xl">

					<?php
					while ( have_posts() ) :

						the_post();

						
						get_template_part('pages/template/archives','grid');
						// generate_do_template_part( 'archive' );

					endwhile;
					?> 
			</div>
  </div>
</div>
					<?php

					/**
					 * generate_after_loop hook.
					 *
					 * @since 2.3
					 */
					do_action( 'generate_after_loop', 'archive' );

				else :

					generate_do_template_part( 'none' );

				endif;
			}

			/**
			 * generate_after_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_after_main_content' );
			?>
		</main>
	</div>

	<?php
	/**
	 * generate_after_primary_content_area hook.
	 *
	 * @since 2.0
	 */
	do_action( 'generate_after_primary_content_area' );

	//generate_construct_sidebars();

	get_footer();

[Ying]

Hum…this is not the default GP archive template, there has been lots of editing.

This disabled GP’s archive template.

get_template_part('pages/template/archives','grid');
// generate_do_template_part( 'archive' );

[Ginaphi]

yes, i’m developing my own layout. here is the template content

<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
  <div class="flex-shrink-0">
    <a href="<?php the_permalink(); ?>" class="hover:underline"> 
    <img class="h-48 w-full object-cover" src="<?php echo get_the_post_thumbnail_url( get_the_ID(), 'medium' ); ?>" alt=""> 
    </a>
  </div>
  <div class="flex-1 bg-white p-6 flex flex-col justify-between">
    <div class="flex-1">
      <?php
        $post_type = get_post_type(get_the_ID());
        $post_type_slug = get_post_type_archive_link($post_type);
          echo '<a href="'. $post_type_slug .'" class="inline-block"><span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-50 text-brand hover:text-content2">' . ucfirst($post_type) . '</span></a> ';
      ?>
      <a href="<?php the_permalink(); ?>" class="block mt-2"> 
        <p class="my-0  text-xl font-semibold text-gray-900">
          <?php the_title(); ?> 
        </p>
      </a>
      <div class=" text-sm text-gray-500" > 
        <?php echo get_the_date(); ?> 
      </div>
      <div class="mt-4 text-base text-gray-500">
      <?php the_excerpt(); ?> 
      </div>
    </div>
    
  </div>
</div>

is it necessary to use generate_do_template in order for the infinite scroll to work properly?

[David]

The infinite scroll relies on the structure the theme provides, so its not just a case of the generate_do_template_part but the additional HTML around the loop that will interfere.

Is it possible to get a screenshot of the site or a mockup, so i can get a better understanding of what you’re trying to achieve ? As we should be able to achieve most things without having to do that much work to the theme templates.

[Ginaphi]

aside from elements and theme global appearances that comes from generatepress, most of the website structure are custom made with custom pages , archive, and tailwind css. as much as we can, we still use generatepress default pages hooks.
hmmm… if the default generatepress infinite scroll relies on the structure, nevermind then, it’s easier for me to manually create an Ajax load more functionality.
Thank you for the information and fast response.

[David]

OK, that makes sense.
Glad to hear you have a plan 🙂

[Author]

Posts