How to show posts of an columnized different categories on the same line or row?

2 Views

I use a custom query retrieving the two categories of the post type, each column show only 6 posts of the category, if was more use pagination.

Than I like to do is to show each post on each column on the same line or row, this just for design purposes, I thought than the query must count for the first two post, put on two divs (for example) and then put the next two, and the next later, until complete the sixth row to paginate if there are more.

Read More

Really appreciate any comment or idea to solve this, didn’t really know how to do.

Here is the custom query I use: 

<?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
            ?>
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. One way to output the same query yet style it differently is to use current_post or in combination with rewind_posts, or using rewind_posts alone.

    So for example:

    Your initial query

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

  $counter_id = $my_query->current_post + 1;   //this is the counter

// then use a conditional to style each on based on `# or %

 if ($wp_query->current_post % 2 == 0)

// add custom styles

endwhile; else:

// 
// Or rewind the post with a count and conditional

rewind_posts();  //rewind the post back to the start

if $counter_id == 1  //do some style
if $counter_id > 3   // do some style
//etc

    Another more simple option is to just use multiple separate loops (and DB query’s)

    I hope this logic makes sense and helps , I don’t have the time to actually write your query and test it.