how to display posts in a grid layout

Question

Im trying to make a page that displays all of the archive posts of my posts with the category food(category id is 10). I am trying to set it up using col-md-4 so I would have three posts in one row. I think I added all of the necessary elements to my php file, I just don't know how to set it up now. I tried to set it up so that there is 4 column's of 3 posts (so 12 posts) and then after every 12 posts it would load the ajax load more button. Can anyone help me out in trying to get this to work. Thanks in advance.

UPDATED it is still not looping through the posts correctly - and it is only showing 1 post

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

You are missing a `,` on line 7. A blank page (unfortunately) in PHP usually means an error that caused your app to crash. You need to configure PHP (or your script) to display errors. http://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display — willoller, Jan 11 '17 at 04:54

score 0 · Answer 1 · answered Jan 11 '17 at 19:08

0

You are missing a loop that will repeat your posts code, once for each post.

Add this around your <article>:

<?php while ( $the_query->have_posts() ) : ?>

   <?php $the_query->the_post(); ?>

   <article> ...

   ... </article>

<?php endwhile; ?>

answered Jan 11 '17 at 19:08

willoller

7,106
1
35
63

how to display posts in a grid layout

1 Answers1