Jetpack Infinite Scroll not working

Question

I have been trying to get infinite scroll to work but can not seem to get it to work.

I have three files the post loop content-post-ft.php , the functions.php and then my front page where the posts are loading frontpage.php

Functions.php

  add_theme_support( 'infinite-scroll', array(
  'container' => 'main-content',
  'type' => 'scroll',
  'footer' => 'foot',
  'render' => 'infinite_scroll_render'
   ));

 function infinite_scroll_render() {
   get_template_part( 'content-post-ft', 'standard' );
  }

content-post-ft.php

<div class="hub-cont">
<?php

 $thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
$thumb_url = $thumb_url_array[0];
 ?>
<div id="newsitem">
<div id="newsimg" style="background-image: url('<?php echo $thumb_url ?>')">
<a href="<?php the_permalink(); ?>"></a>
</div>
 <div id="newsname"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>          </div>
 <div id="newstext"><?php $text = $post->post_content; $trimmed = wp_trim_words( $text, 40, null );   echo $trimmed; ?></div>
 <div class="clear"></div>
 </div>

 <?php
// endwhile;
// endif;

wp_reset_postdata();?>

</div>

Frontpage.php

<div id="main-content">
 <?php

 $myargs = array (
 //'showposts' => 2,
'post_type' => 'post',
'category_name' => 'News'
);
$myquery = new WP_Query($myargs);
if($myquery->have_posts() ) :
while($myquery->have_posts() ) : $myquery->the_post();
    get_template_part( 'content-post-ft', get_post_format() );
endwhile;
 endif;
?>
 </div>

I have tried looking at so many tutorials and other people having similar problems but nothing seems to be working.

The page is showing 10 posts because of the loop but its just adds the 10 and does not "scroll"

Getting this fixed would really help my stress levels!

Answer 1

Solved it. I had to make Jetpack allow the infinite scroll to be used on Custom fields and pages. By default it only works on the original posts page.

Functions file:

function tweakjp_custom_is_support() {
return true;
$supported = current_theme_supports( 'infinite-scroll' ) && ( is_home() ||      is_archive() || is_front_page() );

return $supported;
}
  add_filter( 'infinite_scroll_archive_supported',      'tweakjp_custom_is_support' );

 function mm_infinite_scroll_render() {
    while ( have_posts() ) : the_post();
        get_template_part( 'content' );
    endwhile;
 }

  function mm_infinite_scroll_query_args($args) {

$new_args = array(
    'posts_per_page'   => $args['posts_per_page'],
    'paged'   => $args['paged'],
    'orderby'          => 'date',
    'order'            => 'DESC',
    'post_type'        => 'post',
    'post_status'      => 'publish',
);

return $new_args;
}

function mm_infinite_scroll_posts_where($clause) {
return "";
}

add_filter( 'infinite_scroll_posts_where', 'mm_infinite_scroll_posts_where' );

add_filter( 'infinite_scroll_query_args', 'mm_infinite_scroll_query_args',  9999 );
add_theme_support( 'infinite-scroll', array(
'container' => 'main-content',
'render' => 'mm_infinite_scroll_render'
) );

Then the content.php file has the rendering code. Mine looks like this to help those who are unsure.

<div class="news-list">
<ul class="promo-list-items">
    <?php
    // Fetch all posts relating to a certain tag then display 4 of them
    //Get the Thumbnail URL
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 720,405 ), false, '' );
    ?>
    <div id="promolink"></div><li class="news-list-item" style="background-image: url(' <?php echo $src[0];?> '); background-repeat: no-repeat; background-size: cover;"> <a class="gdbnewslink" href="<?php echo get_permalink();?>" >
            <?php the_title();?>
        </a>
        <?php wp_reset_postdata(); ?>
    </li>
    <div class="clear"></div>
</ul>
</div>

Hope this helps someone with the same problem as me.