Better way to display posts from specific categories, in a grid layout

Question

I think the general suggestion is to use WP_Query instead of query_posts partly because query_posts used WP_query in a simplified way and can cause problems down the road. So for sure check out the WP_Query page, specifically the Multiple Loops example: http://codex.wordpress.org/Class_Reference/WP_Query#Multiple_Loops

So the code using WP_Query would look something like this:

<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 3 posts per page and eliminate all sticky posts) */
$query1 = new WP_Query( array('posts_per_page'=>3, 'category_name'=>'Mobile') );

if( $query1->have_posts()) :  while( $query1->have_posts()) : $query1->the_post(); 

    if( $counter == $grids ) : 
        $counter = 0; // Reset counter ?>
        <div class="col-cat3-last">
    <?php else: ?>
        <div class="col-cat3">
    <?php endif; ?>

        <div class="entry-featured"><?php x_featured_image(); ?></div>
        <div class="col-cat-pic"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
            <div class="hero-info">
                <h3><a href="https://wordpress.stackexchange.com/questions/181319/<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                <p class="p-meta"><?php the_author_posts_link(); ?>  /  <?php the_time('m.d.y'); ?></p>
            </div>
        </div>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
wp_reset_postdata(); // Reset post_data after each loop
?>

Notice the same $args can be used in the WP_Query. Also notice the addition of $query1-> in the loop setup. Just change $query1 to $query2 when you copy paste this code and most likely change the category_name in the query args to match your category.

I also cleaned up some repetative code as it looked like the only difference was the ‘-last’ added to the wrapping div class. So instead of having extra code to update in the future you could just use this.

I also added wp_reset_postdata(); in the end there to be safe and clear/reset the post data.

Let me know if you have any questions or concerns.

Related Posts: