Posts are not looping through correctly

Question

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();
?>

Answer 1

I just tested the following example code:

<?php

$the_query = new WP_Query( array(
    'posts_per_page' => 12,
    'paged' => get_query_var('paged', 1)
 ));

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>
        </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

?>

The <div id="ajax"> should wrap around the whole post-list and not every single post, correct? Than this container should be outside the while loop!

Also, when you not specify any post-type in the WP_Query, it defaults to "any" type. So make sure you want this!

'any' - retrieves any type except revisions and types with 'exclude_from_search' set to true.

In the <article> tag you should also use <?php post_class(); ?> instead of class="post" to get some more and helpful classes automaticly. (including current post-type, status and category)

Update:

I've pasted the updated code above in my answer. It works at showing the posts. However it only showed one post in a row, so I added 2 more col-md-4. But now it just repeats the same post 3 times. How would I fix this? Also the ajax button will not appear.

OK so, first ... the loop has nothing to do how you will show the posts on the frontend.(in a grid or just below each other) I can see you tried to add 3 <article> elements in the while loop. This is wrong, you just define the template of 1 <article> here, and all following will use the same.

You use CSS to define how the articles will display on the frontend. So for example use a % width on the article elements to display 3 in a row. (100% / 3)

Maybe you can also use existing CSS classes. In your code I see <div class="col-md-4">, so this seems to already be a class of a grid/column system. So maybe look in the docs of the theme which you are using. If that is already a class to display 3 cols in a row, maybe some CSS is overriding the width.

Yeah, you just need 1 article element, and than style with CSS.

Answer 2

Your code doesn't have while loop

if ( $the_query->have_posts() ) {
    while($the_query->have_posts()){
        $the_query->the_post();
        //your html here
    }
    //code for load more
}

Answer 3

I think you should mention post_type as well, like:

$the_query = new WP_Query( array(
    'post_type' => 'yourpost_type'
    'posts_per_page' => 12,
    'paged' => get_query_var('paged', 1)
) );