0

I have a WordPress Multisite that uses a special query that combines all the posts on the network and uses the main site to display all posts in the network.

Anyway, I would like to have my site use infinite scroll. No matter what plugins I use, it won't use infinite scroll.

Here's how the query works on my site:

<?php get_header(); ?> 
<section id="index">
<div class="container"> 
<div class="main"> 
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array( 'multisite' => 1, 'sites__not_in' => array(1), 'paged' => $paged, ); $query = new WP_Query( $args ); while($query->have_posts()) : $query->the_post(); ?> 

<?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> 

<?php if (is_front_page() ) { ?> <nav id="first-nav"> <?php next_posts_link( 'load more', $query->max_num_pages ); ?> </nav> <?php } else { ;?> <nav id="navigate"> <?php previous_posts_link( 'Previous' );next_posts_link( 'Next', $query->max_num_pages ); ?> </nav> <?php } ?>
<?php wp_reset_postdata(); ?> 
</div> </div> </section> 
<?php get_footer();?>

Any ideas on how to get this to work?

0

Infinite scroll usually requires some kind of Javascript library to load more results via Ajax. The basic idea is this:

  • User arrives at your page, you show, say, 5 posts per page
  • They scroll past a certain offset and you use JavaScript to trigger an Ajax request
  • Your request passes the requested paged, the endpoint receives the request, and returns just the HTML of the posts you want.
  • You handle the Ajax response and insert the HTML in to the page

Here is a good writeup from Smashing Magazine on how to determine if infinite scrolling, pagination, or "Load More" is best for you.

Some other tips:

  • You probably don't want to load all posts at once - this may not be an issue now, or for a long time, but eventually this will come back to bite you
  • There are plenty of plugins and tutorials for doing this, you just need a good understanding of how it works
0

So I decided to go with "load more" clicking option but the code I"m using doesn't work, click on load more and nothing happends.

Index.php:

<div id="content">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'multisite' => 1,
'sites__not_in' => array(1),
'paged' => $paged,);
$loop = new WP_Query($args); ?>
<?php while( $loop->have_posts() ): $loop->the_post();  ?>
<p><?php the_title(); ?></p>
<?php endwhile; ?>  

<a id="more_posts" href="#">Load More</a>

<?php wp_reset_postdata(); ?>

</div>

At the bottom of Index.php:

var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
var page = 1; // What page we are on.
var ppp = 3; // Post per page

$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    $.post(ajaxUrl, {
        action:"more_post_ajax",
        offset: (page * ppp) + 1,
        ppp: ppp
    }).success(function(posts){
        page++;
        $("#content").append(posts); // CHANGE THIS!
        $("#more_posts").attr("disabled",false);
    });

});

And on my functions.php:

function more_post_ajax(){
$offset = $_POST["offset"];
$ppp = $_POST["ppp"];
header("Content-Type: text/html");

$args = array(
    'posts_per_page' => $ppp,
    'offset' => $offset,
);

$loop = new WP_Query($args);
while ($loop->have_posts()) { $loop->the_post(); 
   the_content();
}

exit; 
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); 
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

Any help is greatly appreciated.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.