WP_Query + Infinite Scroll

user_3972920 0
Viewed 2457

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"><a href="' . get_post_permalink( '','','true') . '">' .get_the_title() . '</a></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><a href="' . get_post_permalink( '','','true') . '">Zobacz więcej &gt;</a></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

infinite-scroll wordpress php jquery
1 Answers

You need to invovle javascript to make infinte scrolling work. Basically what you need to have:

  1. Page that displays first few posts and loads the infinite scrolling javascript function
  2. Hook on wp_ajax to provide next posts data as you call it
  3. After scroll/"click on load more" you call this with javascript and append the loaded posts at the bottom
  4. 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 ?>>
        ...
user_35902380
Related