Wordpress Pagination on custom post type when using two loops.

Question

I've always sucked at pagination when using a WP query Loop. So I would like some help figuring out how to get it to work.

Why am I using two of the same loops? I've ended up doing this because I would like the cards to stack up neatly upon each other as seen in the image below.

alt text

This is the code used to display this.

<?php
/*
Template Name: Blog
*/
?>

<?php get_header(); ?>
<div class="container">
    <div id="content" class="clearfix row">

        <div id="main" class="col col-lg-8 clearfix blog-page-padding" role="main">

            <?php
            $thumb_id = get_post_thumbnail_id();
            $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
            $thumb_url = $thumb_url_array[0];
            ?>

            <?php 
            $args = array (
                'post_type' => 'blog',
                'orderby'   => 'menu_order',
                'order'     => 'ASC'                    
                );
            $the_query = new WP_Query( $args );
            ?>
            <?php $count =0; ?>
            <div class="col-md-6 remove-padding"> 
                <?php if ( have_posts() ) : while ( $the_query->have_posts()  ) : $the_query -> the_post(); ?>
                    <?php if($count%2==0):?>
                        <?php get_template_part( 'cardui' ); // Card UI (cardui.php) ?>
                    <?php endif; ?>
                    <?php $count++;?>
                <?php endwhile; endif; ?>
            </div>
            <?php $count =0; ?>
            <div class="col-md-6">
                <?php if ( have_posts() ) : while ( $the_query->have_posts()  ) : $the_query -> the_post(); ?>
                    <?php if($count%2!=0):?>
                        <?php get_template_part( 'cardui' ); // Card UI (cardui.php) ?>
                    <?php endif; ?>
                    <?php $count++;?>
                <?php endwhile; endif; ?>
            </div>

            </div> <!-- end #main -->

            <?php get_sidebar('blog'); // Blog ?>

        </div> <!-- end #content -->
    </div>

<?php get_footer(); ?>

I would like to be able to limit it to 4 posts for now. Thank you.

Answer 1 · 2014-09-08T16:47:43Z

September 8, 2014 4:47pm

Can I suggest you ditch this idea and use a solution that will allow you to stack your post as cards with unequal heights, while only having one loop, and thus making your pagination problem a thing of the past?

I'd use a library like Masonry (http://masonry.desandro.com/) to accomplish this. This will be dramatically easier to maintain from a developer standpoint, while still providing the same end result.

Welcome to the Treehouse Community

Looking to learn something new?

jack hamilton

jack hamilton

Wordpress Pagination on custom post type when using two loops.

1 Answer

Kevin Korte

Kevin Korte

jack hamilton

jack hamilton

Kevin Korte

Kevin Korte