1

The front page needs to have the first six posts in a carousel and then the next eight in a grid. What's the best practice for looping through that kind of design? I'm currently using "get_posts" to call the first 14 posts, and then manually calling each one after that, but I figured there has to be a better way.

Here's what I do at the beginning of index.php:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$offset = ($paged - 1) * 14;

$args = array(
    'numberposts'       => 14,
    'offset'            => $offset,
    'orderby'           => 'date',
    'order'             => 'DESC',
    'post_type'         => 'post',
    'post_status'       => 'publish',
    'suppress_filters'  => true
);
$front_page_posts = get_posts( $args );

The problem is that I can't call "get_template_part" because there isn't actually a post loop, so the rest of my code looks something like this:

<div class="carousel">
    <?php   get_carousel_slide($front_page_posts[0]->ID, true); ?>
    <?php   get_carousel_slide($front_page_posts[1]->ID); ?>
    <?php   get_carousel_slide($front_page_posts[2]->ID); ?>
    <?php   get_carousel_slide($front_page_posts[3]->ID); ?>
    <?php   get_carousel_slide($front_page_posts[4]->ID); ?>
    <?php   get_carousel_slide($front_page_posts[5]->ID); ?>
</div>

[...]

<div class="grid">
    <?php
    $count = 6;
    while($count < 14){
        get_front_eighth($front_page_posts[$count]->ID);
        $count++;
    }
?>

As you can see, I have to call a separate function to get the template instead of using "get_template_part".

So what's best practice for doing this?

1

Use WP_Query with offset like this

   <?php
    $offset = 6;
    $post_args = array(
        'post_type' => 'post',
        'posts_per_page' => $offset,
    );

    $slider_blog_posts = new WP_Query( $post_args );
    ?>

    <?php if ( $slider_blog_posts->have_posts()  ): ?>
      <div class="carousel">
        <?php while( $slider_blog_posts->have_posts() ): $slider_blog_posts->the_post(); ?>
          <?php   get_carousel_slide( get_the_ID, true); ?>
        <?php endwhile; ?>
      </div>
    <?php endif; ?>
    <?php wp_reset_postdata(); ?>

and then create a new query for the rest of the posts:

 <?php
    $new_args = array(
          'post_type' => 'post',
          'posts_per_page' => 8,
          'offset' => $offset
        );

       $grid_blog_posts = new WP_Query( $new_args );
    ?>   
        <?php if ( $grid_blog_posts->have_posts()  ): ?>
            <div class="grid">
               <?php while( $grid_blog_posts->have_posts() ): $grid_blog_posts->the_post(); ?>
                  <?php get_front_eighth( get_the_id() ); ?>
                <?php endwhile; ?>
             </div>
        <?php endif; ?>
        <?php wp_reset_postdata(); ?>

as for the functions use them to return data not to display HTML. Displaying HTML should be done in fragments.

| improve this answer | |
  • The offset only applies to the grid. – Fernando Baltazar Nov 3 '17 at 16:54
  • I don't think you are following :)) – Yuxel Yuseinov Nov 3 '17 at 17:21
  • You don't close your php tag in the line that starts "$grid_blog_posts". Also, your offset only works for the first page, not additional pages (hence why my offset looks so complicated). However, i think your solution with using WP_QUERY and a while loop will work. – mediocre_bro Nov 3 '17 at 18:05
  • Another issue is that the get_carousel_slide() function has an optional second variable so that the div can get a class of "active". Is there any way to achieve the same goal with get_template_part() in a loop? – mediocre_bro Nov 3 '17 at 18:15
  • @mediocre-bro sorry for the missing closing php tags.... 1st of all for you to have pagination you should add "paged" to the query ( look it up its easy ). 2nd for the function that take parameter to make a class active you can achieve that with include ( locate_template ) but the better solution will be to use jQuery. – Yuxel Yuseinov Nov 7 '17 at 16:27

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.