I am trying to make the page have 3 posts in each row, and then after 3 columns (12 posts) show the ajax load more button. Right now only one post is showing up. I don't know how to make it correctly loop through everything. Can anyone provide help? Thanks in advance.
<?php
get_header();
get_template_part ('inc/carousel-food');
$the_query = new WP_Query( [
'posts_per_page' => 12,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<article class="post">
<div class="row">
<div class="col-md-4"><?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
<?php get_template_part( 'share-buttons' ); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
</div>
</div>
</article>
</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();
UPDATED
<?php
get_header();
get_template_part ('inc/carousel-food');
$the_query = new WP_Query( array(
'posts_per_page' => 12,
'paged' => get_query_var('paged', 1),
'cat' => 10,
));
if ( $the_query->have_posts() ) {
// display #ajax wrapper only if we have posts
echo '<div id="ajax">';
while($the_query->have_posts()) {
$the_query->the_post(); ?>
<article <?php post_class(); ?>>
<div class="row">
<div class="col-md-4"><?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
<?php get_template_part( 'share-buttons' ); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
</div>
<div class="col-md-4"><?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
<?php get_template_part( 'share-buttons' ); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
</div>
<div class="col-md-4"><?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
<?php get_template_part( 'share-buttons' ); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
</div>
</div>
</article>
<?php }//end while
echo '</div>'; // close the #ajax wrapper after the post list
if(get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
} else { // if there are no posts
echo '<p>Sorry, no posts matched your criteria.</p>';
}//end if
get_footer();
?>