WP_Query + Infinite Scroll - php

Question

I've stucked while working on my brand new blog template (on wordpress). I've got following query/php code:
echo '<div id="posts-container" class="fusion-blog-layout-medium fusion-blog-infinite fusion-posts-container-infinite fusion-blog-archive fusion-clearfix">';
$args = array( 'post_type' => 'era', 'post_status' => array('publish', 'future'), 'paged' => $paged );
$custom_query = new WP_Query($args);
while($custom_query->have_posts()) : $custom_query->the_post();
$post_classes = $post_class . ' ' . $alignment_class . ' ' . $thumb_class . ' post fusion-clearfix';
ob_start();
post_class( $post_classes );
$post_classes = ob_get_clean();
echo '<article id="post-' . get_the_ID() . '" ' . $post_classes . '>';
get_template_part( 'new-slideshow' );
echo '<div class="fusion-post-content koncert post-content">';
echo ( '<h2 class="entry-title fusion-post-title" data-fontsize="18" data-lineheight="27">' .get_the_title() . '</h2>' );
if ( get_field( "data_i_miejsce_koncertu", get_the_ID() ) ) {
echo ( '<div class="lista-koncert-podtytul">' . get_field( "data_i_miejsce_koncertu", get_the_ID() ) . '</div>' );
}
echo '<div class="fusion-post-content-container">';
do_action( 'avada_blog_post_content' );
if ( get_field( "opis", get_the_ID() ) ) {
echo '<div class="lista-koncert-opis">' . wp_trim_words(get_field( "opis", get_the_ID() ), 60, ' [...]') . '<br><br>Zobacz więcej ></div>';
}
echo '</div>';
echo '</div>'; // End post-content.
echo '</article>';
endwhile;
wp_reset_postdata(); // reset the query
echo '</div>';
What I would like to achieve is to not have regular pagination (I've already removed the controls from my template), but I would like to use jquery infinite scroll script. But being honest - i have no clue how to even start ;/ mainly because there are no that many live examples/tutorials in the internet.. thanks for any tips

Answer 1

You need to invovle javascript to make infinte scrolling work.
Basically what you need to have:
Page that displays first few posts and loads the infinite scrolling javascript function
Hook on wp_ajax to provide next posts data as you call it
After scroll/"click on load more" you call this with javascript and append the loaded posts at the bottom
Repeat this until all posts are loaded
This should give you a good starting point: https://www.billerickson.net/infinite-scroll-in-wordpress/
Also please don't write your HTML in Wordpress themes/plugins with echo. This is far more readable and helps you to keep your indentation right:
?>
<div id="posts-container" class="fusion-blog-layout-medium fusion-blog-infinite fusion-posts-container-infinite fusion-blog-archive fusion-clearfix">
<?php
$args = array( 'post_type' => 'era', 'post_status' => array('publish', 'future'), 'paged' => $paged );
$custom_query = new WP_Query($args);
while($custom_query->have_posts()) : $custom_query->the_post();
$post_classes = $post_class . ' ' . $alignment_class . ' ' . $thumb_class . ' post fusion-clearfix';
ob_start();
post_class( $post_classes );
$post_classes = ob_get_clean();
?>
<article id="post-<?php echo get_the_ID() ?>" <?php echo $post_classes ?>>
...