0

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

  • 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. – user6738171 Jan 11 '17 at 14:42
  • Hey, I updated my answer. In your updated code you are doing it wrong. When you want to alter the display of the posts on the frontend (multiple in a row) you just do this with css. – LWS-Mo Jan 11 '17 at 15:48
0

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
}
  • Would it look like the updated php I added to my question? – user6738171 Jan 11 '17 at 5:57
  • Yeah...Looks fine. Just take a look at {} for if and while. Closing of looks like misplaced. – Aniruddha Gawade Jan 11 '17 at 6:03
  • Is there any way you could help me further with this? The code above is producing a blank page. I'm still not the best at php, so I would really appreciate the help. – user6738171 Jan 11 '17 at 6:04
  • You need to debug the code, put debug on in wp_config.php and look at the errors. Also check if your code enters into your if and while loop – Aniruddha Gawade Jan 11 '17 at 6:29
0

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

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.