Multiple loops within loops on different rows
Question
I need a loop that calls in a custom post type called 'team members' the slug for which is 'team'. The team members are displayed in rows of five with each member consisting of its own avatar and slide down toggle content in a separate DIV out side the list of avatars. I've written out a basic loop structure which i'm not sure if its best or right way to do it. Can someone help me please?
/* ROW 1 */
query_posts('showposts=5');
$ids = array();
/* Loop 1 A - displays the row of avatars */
while (have_posts()) : the_post();
$ids[] = get_the_ID();
the_title();
endwhile;
/* Loop 1 B - displays the slide down content in new row for each avatar above */
while (have_posts()) : the_post();
$ids[] = get_the_ID();
the_content();
endwhile;
/* ROW 2 */
//Write code to do second row if number posts greater than 5.
//If post greater than 5 do...
/* Loop 2 A - displays the row of avatars */
query_posts(array('post__not_in' => $ids, 'showposts=5');
while (have_posts()) : the_post();
the_title();
endwhile;
/* Loop 2 B - displays the slide down content in new row for each avatar above */
while (have_posts()) : the_post();
the_content();
endwhile;
/* ROW 3 */
//Write code to do third row if number posts greater than 15.
//If post greater than 10 do...
/* Loop 3 A - displays the row of avatars */
$ids_row_two = query_posts(array('post__not_in' => $ids));
$ids_row_three = query_posts(array('post__not_in' => $ids_row_three));
query_posts(array('post__not_in' => $ids_row_three, 'showposts=5'));
while (have_posts()) : the_post();
$ids[] = get_the_ID();
the_title();
endwhile;
/* Loop 3 B - displays the slide down content in new row for each avatar above */
while (have_posts()) : the_post();
$ids[] = get_the_ID();
the_content();
endwhile;
Here is the HTML structure I wish to output...
<!-- row 1 -->
<!-- Avatars -->
<div class="member_block">
<div class="container avatars">
<!-- avatar 1 --->
<div id="show_ryan" class="box five columns" data-target="#member_ryan">
<div class="avatar avatar-on-hidden">
<img src="<?php bloginfo('template_directory'); ?>/img/team/ryan.png">
<h4 class="name">Ryan</h4>
<p class="position">Creative Director</p>
</div>
<div class="avatar2 avatar-on-hover">
<img src="<?php bloginfo('template_directory'); ?>/img/team/ryan.jpg">
</div>
</div>
<!-- avatar 2 --->
<div id="show_brian" class="box five columns" data-target="#member_brian">
<div class="avatar avatar-on-hidden">
<img src="<?php bloginfo('template_directory'); ?>/img/team/brian.png">
<h4 class="name">Brian</h4>
<p class="position">Director</p>
</div>
<div class="avatar2 avatar-on-hover">
<img src="<?php bloginfo('template_directory'); ?>/img/team/brian.jpg">
</div>
</div>
<!-- avatar 3 --->
<div id="show_emma" class="box five columns" data-target="#member_emma">
<div class="avatar avatar-on-hidden">
<img src="<?php bloginfo('template_directory'); ?>/img/team/emma.png">
<h4 class="name">Emma</h4>
<p class="position">Creative Director</p>
</div>
<div class="avatar2 avatar-on-hover">
<img src="<?php bloginfo('template_directory'); ?>/img/team/emma.jpg">
</div>
</div>
<!-- avatar 4 --->
<div id="show_john" class="box five columns" data-target="#member_john">
<div class="avatar avatar-on-hidden">
<img src="<?php bloginfo('template_directory'); ?>/img/team/john.png">
<h4 class="name">John</h4>
<p class="position">Creative Director</p>
</div>
<div class="avatar2 avatar-on-hover">
<img src="<?php bloginfo('template_directory'); ?>/img/team/john.jpg">
</div>
</div>
<!-- avatar 5 --->
<div id="show_neil" class="box five columns" data-target="#member_neil">
<div class="avatar avatar-on-hidden">
<img src="<?php bloginfo('template_directory'); ?>/img/team/neil.png">
<h4 class="name">Neil</h4>
<p class="position">Creative Director</p>
</div>
<div class="avatar2 avatar-on-hover">
<img src="<?php bloginfo('template_directory'); ?>/img/team/neil.jpg">
</div>
</div>
</div><!-- container -->
<!-- each team member's slide down content -->
<div class="member_row">
<div class="container">
<!-- avatar 1 content --->
<div id="member_ryan" class="member-info">
<? the_content(); ?>
</div><!-- //Ryan -->
<!-- avatar 2 content --->
<div id="member_brian" class="member-info">
<? the_content(); ?>
</div>
<!-- avatar 3 content --->
<div id="member_emma" class="member-info">
<? the_content(); ?>
</div>
<!-- avatar 4 content --->
<div id="member_john" class="member-info">
<? the_content(); ?>
</div>
<!-- avatar 5 content --->
<div id="member_neil" class="member-info">
<? the_content(); ?>
</div>
</div><!-- .container -->
</div><!-- .member_row -->
<!-- row 2 -->
<!-- Avatars -->
<div class="member_block">
<div class="container avatars">
<!-- avatar 1 --->
<div id="show_ryan" class="box five columns" data-target="#member_ryan">
<div class="avatar avatar-on-hidden">
<img src="<?php bloginfo('template_directory'); ?>/img/team/ryan.png">
<h4 class="name">Ryan</h4>
<p class="position">Creative Director</p>
</div>
<div class="avatar2 avatar-on-hover">
<img src="<?php bloginfo('template_directory'); ?>/img/team/ryan.jpg">
</div>
</div>
<!-- avatar 2 --->
<div id="show_brian" class="box five columns" data-target="#member_brian">
<div class="avatar avatar-on-hidden">
<img src="<?php bloginfo('template_directory'); ?>/img/team/brian.png">
<h4 class="name">Brian</h4>
<p class="position">Director</p>
</div>
<div class="avatar2 avatar-on-hover">
<img src="<?php bloginfo('template_directory'); ?>/img/team/brian.jpg">
</div>
</div>
<!-- avatar 3 --->
<div id="show_emma" class="box five columns" data-target="#member_emma">
<div class="avatar avatar-on-hidden">
<img src="<?php bloginfo('template_directory'); ?>/img/team/emma.png">
<h4 class="name">Emma</h4>
<p class="position">Creative Director</p>
</div>
<div class="avatar2 avatar-on-hover">
<img src="<?php bloginfo('template_directory'); ?>/img/team/emma.jpg">
</div>
</div>
<!-- avatar 4 --->
<div id="show_john" class="box five columns" data-target="#member_john">
<div class="avatar avatar-on-hidden">
<img src="<?php bloginfo('template_directory'); ?>/img/team/john.png">
<h4 class="name">John</h4>
<p class="position">Creative Director</p>
</div>
<div class="avatar2 avatar-on-hover">
<img src="<?php bloginfo('template_directory'); ?>/img/team/john.jpg">
</div>
</div>
<!-- avatar 5 --->
<div id="show_neil" class="box five columns" data-target="#member_neil">
<div class="avatar avatar-on-hidden">
<img src="<?php bloginfo('template_directory'); ?>/img/team/neil.png">
<h4 class="name">Neil</h4>
<p class="position">Creative Director</p>
</div>
<div class="avatar2 avatar-on-hover">
<img src="<?php bloginfo('template_directory'); ?>/img/team/neil.jpg">
</div>
</div>
</div><!-- container -->
<!-- each team member's slide down content -->
<div class="member_row">
<div class="container">
<!-- avatar 1 content --->
<div id="member_ryan" class="member-info">
<? the_content(); ?>
</div><!-- //Ryan -->
<!-- avatar 2 content --->
<div id="member_brian" class="member-info">
<? the_content(); ?>
</div>
<!-- avatar 3 content --->
<div id="member_emma" class="member-info">
<? the_content(); ?>
</div>
<!-- avatar 4 content --->
<div id="member_john" class="member-info">
<? the_content(); ?>
</div>
<!-- avatar 5 content --->
<div id="member_neil" class="member-info">
<? the_content(); ?>
</div>
</div><!-- .container -->
</div><!-- .member_row -->
</div><!-- .member_block -->
1 answers
solution1
0 2015-05-19 14:51:36
Check out WP's reference on using WP_QUERY for multiple loops. After looking at your code, your incorrectly querying the WordPress table.
Try this:
$args = array(
'post_type' => 'team',
'post_status' => 'publish'
);
$the_query = new WP_Query($args);
if($the_query->have_posts());
while($the_query->have_posts()) : $the_query->the_post();
?>
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
<div class="content">
<?php the_content(); ?>
</div>
<?php
endwhile;
wp_reset_postdata();
You can then dupilcate the loop above, just rename the variables to something like $the_query2.
EDIT - Forgot to add wp_rest_postdata(), what this does is resets the loop and allows you to run a second one.
Edit 2 - Here is updated code, using this you should be able to modify the code to fit your needs, as i am not going to write your entire page for you. Also make sure your theme supports thumbnails .
<div class="avatar_block">
<div class="container">
<?php
// Query for Member Info
$args = array(
'post_type' => 'team',
'post_status' => 'publish'
);
$the_query = new WP_Query($args);
if ($the_query->have_posts())
;
while ($the_query->have_posts()) : $the_query->the_post();
?>
<div id="<?php the_tags(); ?>" class="box five_columns">
<?php echo get_the_post_thumbnail(); ?>
<h4 class="name"><?php the_title(); ?></h4>
<?php the_content(); ?>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
<div class="member_block">
<div class="container">
<?php
// Query for Member Info
$args2 = array(
'post_type' => 'team',
'post_status' => 'publish'
);
$the_query2 = new WP_Query($args2);
if ($the_query2->have_posts())
;
while ($the_query2->have_posts()) : $the_query2->the_post();
?>
<div id="<?php the_tags(); ?>" class="member_info">
<?php the_content(); ?>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Pagination for multiple loops in different div
multiple foreach loops for different variables?
Multiple SQL If statements within PHP While loops
Multiple While Loops within a While Loop?
php mysql multiple loops for remaining rows
Loops within Switch statement
For loops and table columns/rows
while loops for rows in PHP
php/mqsql multiple calls to DB and multiple loops - different logic needed
Wordpress: Use different loops
Related Tags