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

admin管理员组

文章数量:1130349

I'm using the following code to display posts from a specific category, in a grid layout, on my home page. It works exactly how I want it to, but I keep reading that I shouldn't ever use query_posts. How can I achieve the same results, without using query_posts?

Also, I will eventually need to display posts from maybe ten different categories on the home page - using this exact same grid layout. Would it cause issues if I duplicated all of the code below for each category, or is there a more efficient way to do this?

Any advice would be greatly appreciated - as you will probably be able to work out from my code and questions, I'm fairly new to WordPress development :)

<?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) */
query_posts( array('posts_per_page'=>3, 'category_name'=>'Mobile') );

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>

<?php
//Show the left hand side column
if($counter == 1 || $counter == 2) :
?>
            <div class="col-cat3">
                <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="<?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
//Show the right hand side column
elseif($counter == $grids) :
?>
             <div class="col-cat3-last">
                <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="<?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 = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>

I'm using the following code to display posts from a specific category, in a grid layout, on my home page. It works exactly how I want it to, but I keep reading that I shouldn't ever use query_posts. How can I achieve the same results, without using query_posts?

Also, I will eventually need to display posts from maybe ten different categories on the home page - using this exact same grid layout. Would it cause issues if I duplicated all of the code below for each category, or is there a more efficient way to do this?

Any advice would be greatly appreciated - as you will probably be able to work out from my code and questions, I'm fairly new to WordPress development :)

<?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) */
query_posts( array('posts_per_page'=>3, 'category_name'=>'Mobile') );

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>

<?php
//Show the left hand side column
if($counter == 1 || $counter == 2) :
?>
            <div class="col-cat3">
                <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="<?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
//Show the right hand side column
elseif($counter == $grids) :
?>
             <div class="col-cat3-last">
                <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="<?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 = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>

• loop
• query-posts
• homepage

Share Improve this question edited Mar 16, 2015 at 13:23 Paul Dixon asked Mar 16, 2015 at 13:16 Paul DixonPaul Dixon 4511 silver badge55 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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/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="<?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.

I'm using the following code to display posts from a specific category, in a grid layout, on my home page. It works exactly how I want it to, but I keep reading that I shouldn't ever use query_posts. How can I achieve the same results, without using query_posts?

Also, I will eventually need to display posts from maybe ten different categories on the home page - using this exact same grid layout. Would it cause issues if I duplicated all of the code below for each category, or is there a more efficient way to do this?

Any advice would be greatly appreciated - as you will probably be able to work out from my code and questions, I'm fairly new to WordPress development :)

<?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) */
query_posts( array('posts_per_page'=>3, 'category_name'=>'Mobile') );

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>

<?php
//Show the left hand side column
if($counter == 1 || $counter == 2) :
?>
            <div class="col-cat3">
                <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="<?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
//Show the right hand side column
elseif($counter == $grids) :
?>
             <div class="col-cat3-last">
                <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="<?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 = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>

I'm using the following code to display posts from a specific category, in a grid layout, on my home page. It works exactly how I want it to, but I keep reading that I shouldn't ever use query_posts. How can I achieve the same results, without using query_posts?

Also, I will eventually need to display posts from maybe ten different categories on the home page - using this exact same grid layout. Would it cause issues if I duplicated all of the code below for each category, or is there a more efficient way to do this?

Any advice would be greatly appreciated - as you will probably be able to work out from my code and questions, I'm fairly new to WordPress development :)

<?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) */
query_posts( array('posts_per_page'=>3, 'category_name'=>'Mobile') );

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>

<?php
//Show the left hand side column
if($counter == 1 || $counter == 2) :
?>
            <div class="col-cat3">
                <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="<?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
//Show the right hand side column
elseif($counter == $grids) :
?>
             <div class="col-cat3-last">
                <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="<?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 = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>

• loop
• query-posts
• homepage

Share Improve this question edited Mar 16, 2015 at 13:23 Paul Dixon asked Mar 16, 2015 at 13:16 Paul DixonPaul Dixon 4511 silver badge55 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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/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="<?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.

本文标签： loopBetter way to display posts from specific categoriesin a grid layout