Effectively adding in a load more button, my current one does not work

On my front page I have a load more button appear after every 14 posts. I have an example below of the desired layout. The problem is the load more button only works for 2 rotations. So after I have already loaded more posts 2 times the load more button will not show up even though there are more posts that could be loaded. However if I do something like add another post then the load more button will work somewhat correctly. But then if I add another say 3 posts the button will stop working again. It has nothing to do with the overall total number of posts I already checked, but there is for sure a problem with the button. I don’t know if it is because of how I have added it to my code. I am still new at coding, so I could have made a mistake. All I know is this button isn’t totally working correctly, and I don’t know how to explain the situation correctly because it is just so fidgety. Could anyone provide a solution for a load more button that would appear after every 14 posts? I would really appreciate it, I’ve been trying to find a solution for a while now.

example of what I want…

my front-page.php

<?php 
/* 
* Template Name: 
*/ 

get_header(); 
get_template_part ('inc/carousel'); 

$the_query = new WP_Query( [ 
'posts_per_page' => 14, 
'paged' => get_query_var('paged', 1) 
] ); 

if ( $the_query->have_posts() ) { ?> 
<div id="ajax"> 
<?php 
$i = 0; 
$j = 0; 
while ( $the_query->have_posts() ) { $the_query->the_post(); 

if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> 
<div class="row"> 
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>> 
<div class="large-front-container"> 
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
</div> 
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
<div class="front-page-post-info"> 
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
<?php get_template_part( 'front-shop-the-post' ); ?> 
<?php get_template_part( 'share-buttons' ); ?> 
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
</div> 
</article> 
</div> 

<?php 

} else { // Small posts ?> 
<?php if($j % 3 === 0) echo '<div class="row">'; ?> 
<article <?php post_class( 'col-md-4' ); ?>> 
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
<div class="front-page-post-info"> 
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
<?php get_template_part( 'front-shop-the-post' ); ?> 
<?php get_template_part( 'share-buttons' ); ?> 
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
</div> 
</article> 

<?php $j++; if($j % 3 === 0) echo '</div>'; ?> 
<?php 
} 
$i++; 
}?> 

</div> 
<?php if(get_query_var('paged') < $the_query->max_num_pages) { 
load_more_button(); 
} 
} 
elseif (!get_query_var('paged') || get_query_var('paged') == '1') { 
echo '<p>Sorry, no posts matched your criteria.</p>'; 
} 
wp_reset_postdata(); 
get_footer();

Currently I’m utilizing the easy load more button plugin (https://wordpress.org/plugins/easy-load-more/) where I just had to wrap the content I wanted to load in agax and then add in load_more_button();

Leave a Reply Cancel reply