Custom Post Type, Two categories, Two columns with Pagination

Here is the actual code I use to resolve the initial need, this was taken for another question/answer an really works, the only thing I like to make is to put each position of the post of the column at the same row of the other term.

<?php
                // for a given post type, return all
                $post_type="evento";
                $tax = 'categorias-eventos';
                $tax_terms = get_terms($tax);
                $post_counter = 0; // reset so we can generate columns 
                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

                    if ($tax_terms) { ?>

                    <ul class="column_wrap" style="width:45%; float:left;">         
                    <?php foreach ($tax_terms as $tax_term) {
                         $args = array(
                        'post_type' => $post_type,
                        "$tax" => $tax_term->slug,
                        'post_status' => 'publish',
                        'posts_per_page' => 6,
                      //'posts_per_page' => -1,
                      //'paged' => $paged,
                        'orderby' => 'title',
                        'order' => 'ASC',
                        'caller_get_posts' => 1
                        ); // END $args

                        $my_query = null; // clear the query variable
                        $my_query = new WP_Query($args);

                        if( $my_query->have_posts() ) { ?>

                          <li class="column_row" style="float:left;">
                            <h4><?php echo $tax_term->name; ?></h4>
                          </li>

                            <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
                            <li class="column_row" style="float:left;">
                                <div class="retailer_wrap retailer_id-<?php the_ID(); ?>">
                                    <p><strong><?php the_title(); ?></strong></p>
                                    <p><?php echo get_post_meta($post->ID, 'eventdate', true);?></p>
                                    <p><?php echo get_post_meta($post->ID, 'eventplace', true);?></p>
                                </div>                                  
                            </li>
                            <?php $post_counter++; ?>

                            <?php if ( 0 == $post_counter % 6 ) { ?>
                      </ul>                          
                      <ul class="column_wrap noneed" style="width:45%; float:left;">
                    <?php } // END if $post_counter ?>
                  <?php
                  endwhile;
                  //wp_pagenavi( array( 'query' => $my_query ) ); 
                } // END if have_posts loop
                wp_reset_query();

              } // END foreach $tax_terms ?>
              </ul>
            <?php } // END if $tax_terms
            ?>

This is a graphical example of what I like to make:

<div class="term-row">
    <div class="col1"><h4>Term 1</h4></div>
    <div class="col2"><h4>Term 2</h4></div>
</div>
<div class="even-row">
    <div class="col1"> // here begins the 1st post of the 1st term
        <?php the_title(); ?>
        <?php the_excerpt(); ?>
    </div>
    <div class="col2"> // here begins the 1st post of the 2nd term
        <?php the_title(); ?>
        <?php the_excerpt(); ?>
    </div>
</div>
<div class="odd-row">
    <div class="col1"> // here begins the 2nd post of the 1st term
        <?php the_title(); ?>
        <?php the_excerpt(); ?>
    </div>
    <div class="col2"> // here begins the 2nd post of the 2nd term
        <?php the_title(); ?>
        <?php the_excerpt(); ?>
    </div>
</div>
<div class="even-row">
    <div class="col1"> // here begins the 3rd post of the 1st term
        <?php the_title(); ?>
        <?php the_excerpt(); ?>
    </div>
    <div class="col2"> // here begins the 3rd post of the 2nd term
        <?php the_title(); ?>
        <?php the_excerpt(); ?>
    </div>
</div>
<div class="pagination">
    <a href="#">Prev</a>
    <span class="current">1</span>
    <a href="#">2</a>
    <a href="#">Next</a>
</div>

Hope its clear enought 🙂

Leave a Comment