Multiple Loops, but can't separate the results to start new line at end of array
-
Hi all,
I’m trying to solve what should be a simple fix:I am building a shopping cart, with a custom theme page with multiple loops querying multiple categories.
http://summerhousefurnishings.farmroaddesign.com/?page_id=133
I can’t figure out what to add between each loop to force the new loop’s query results to begin on a new line (rather than a continuation of the product grid).
I’d like to then style a seperator between each of the categories results.
Thanks!
-
Hey Peter,
Try this and see if it helps:
At the end of each loop add:
<div class="clear"></div>
The CSS for this would be:
div.clear { clear: both; }
Basically what’s happening is the id of product is stacking because of the left float.
You should also look into changing the id product to a class of product. Check out this article from Chris Coyer on the topic of ID vs Classes: http://css-tricks.com/the-difference-between-id-and-class/
please post the full code of the template with the multiple loops; http://codex.wordpress.org/Forum_Welcome#Posting_Code
Hi Allen, what a huge help! That solved it. Thanks very much. And thanks for ID/Class links. Though I know the difference, I admit to defaulting to ID. Will read it through.
Alchymyth, thanks for offer to looki at code. Here’s the hack I pulled together. Works fine, but probably a messy, uneconomical way to do it. Any suggestions you have will be welcomed.
<?php /** * Template Name: Product Grid Page * */ get_header(); ?> <div id="fullwidthholder"> <?php $args = array( 'posts_per_page' => 100, 'category_name' => 'Product', 'paged' => get_query_var('paged') ); $product_posts = new WP_Query( $args ); if( $product_posts->have_posts() ) : while ( $product_posts->have_posts() ) : $product_posts->the_post(); ?> <div id="product"> <?php { the_title('<div id="producttitle">', '</div>'); $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image_url[0] . '" rel="lightbox">'; the_post_thumbnail('thumbnail') ; echo '</a>'; }; the_content('<body>', '</body>');//add here what you want to output per post/product// ?> </div><!-- .product Category "Product" _________________________________________________--> <?php endwhile; endif; wp_reset_postdata(); ?> <div class="clear"></div> <br> <!--RUGS PRODUCT CATEGORY--> <?php $args = array( 'posts_per_page' => 100, 'category_name' => 'ProductRugs', 'paged' => get_query_var('paged') ); $product_posts = new WP_Query( $args ); if( $product_posts->have_posts() ) : while ( $product_posts->have_posts() ) : $product_posts->the_post(); ?> <div id="product"> <?php { the_title('<div id="producttitle">', '</div>'); $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image_url[0] . '" rel="lightbox">'; the_post_thumbnail('thumbnail') ; echo '</a>'; }; the_content('<body>', '</body>');//add here what you want to output per post/product// ?> </div><!-- END PRODUCT CATEGORY RUGS --> <?php endwhile; // end of the loop. </div> endif; wp_reset_postdata(); ?> <div class="clear"></div> <!--END RUGS PRODUCT CATEGORY--> <!--TOTES PRODUCT CATEGORY--> <?php $args = array( 'posts_per_page' => 100, 'category_name' => 'ProductTotes', 'paged' => get_query_var('paged') ); $product_posts = new WP_Query( $args ); if( $product_posts->have_posts() ) : while ( $product_posts->have_posts() ) : $product_posts->the_post(); ?> <div id="product"> <?php { the_title('<div id="producttitle">', '</div>'); $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image_url[0] . '" rel="lightbox">'; the_post_thumbnail('thumbnail') ; echo '</a>'; }; the_content('<body>', '</body>');//add here what you want to output per post/product// ?> </div><!-- END PRODUCT CATEGORY RUGS --> <?php endwhile; // end of the loop. </div> endif; wp_reset_postdata(); ?> <div class="clear"></div> <!--END TOTES PRODUCT CATEGORY--> <!--THROWS PRODUCT CATEGORY--> <?php $args = array( 'posts_per_page' => 100, 'category_name' => 'ProductThrows', 'paged' => get_query_var('paged') ); $product_posts = new WP_Query( $args ); if( $product_posts->have_posts() ) : while ( $product_posts->have_posts() ) : $product_posts->the_post(); ?> <div id="product"> <?php { the_title('<div id="producttitle">', '</div>'); $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image_url[0] . '" rel="lightbox">'; the_post_thumbnail('thumbnail') ; echo '</a>'; }; the_content('<body>', '</body>');//add here what you want to output per post/product// ?> </div><!-- END PRODUCT CATEGORY RUGS --> <?php endwhile; // end of the loop. </div> endif; wp_reset_postdata(); ?> <div class="clear"></div> <!--END THROWS PRODUCT CATEGORY--> <!--GIFTCERT PRODUCT CATEGORY--> <?php $args = array( 'posts_per_page' => 100, 'category_name' => 'ProductGiftCert', 'paged' => get_query_var('paged') ); $product_posts = new WP_Query( $args ); if( $product_posts->have_posts() ) : while ( $product_posts->have_posts() ) : $product_posts->the_post(); ?> <div id="product"> <?php { the_title('<div id="producttitle">', '</div>'); $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image_url[0] . '" rel="lightbox">'; the_post_thumbnail('thumbnail') ; echo '</a>'; }; the_content('<body>', '</body>');//add here what you want to output per post/product// ?> </div><!-- END PRODUCT CATEGORY RUGS --> <?php endwhile; // end of the loop. </div> endif; wp_reset_postdata(); ?> <div class="clear"></div> <!--END GIFTCERT PRODUCT CATEGORY--> </div><!-- #FULLWIDTHHOLDER --> <?php get_footer(); ?>
- The topic ‘Multiple Loops, but can't separate the results to start new line at end of array’ is closed to new replies.