How do I loop through custom posts within the same loop

I’m new to PHP. So please bear with me. In a WordPress theme, I’ve created a Custom Post Type (team) and now I want to display 3 post titles in one div, followed by the content of each of the 3 posts (in a different div), then repeat this for every set of 3 posts until the Query ends.

My HTML would look something like this, but I don’t know how to assemble the PHP. So any help would be appreciated:

<div class="section-wrapper">
    <div class="member-row row-1">
        <div class="team-member member-1">
        <h2><?php the_title(); ?></h2>
        </div>
        <div class="team-member member-2">
        <h2><?php the_title(); ?></h2>
        </div>
        <div class="team-member member-3">
        <h2><?php the_title(); ?></h2>
        </div>
    </div>
    <div class="summary summary-1">
        <?php 
        // display the_content() of each of the 3 posts I just queried
        the_content(); 
        ?>
    </div>
</div>
<div class="section-wrapper">
    <div class="member-row row-2">
        <div class="team-member member-4">
        <h2><?php the_title(); ?></h2>
        </div>
        <div class="team-member member-5">
        <h2><?php the_title(); ?></h2>
        </div>
        <div class="team-member member-6">
        <h2><?php the_title(); ?></h2>
        </div>
    </div>
    <div class="summary summary-2">
        <?php 
        // display the_content() of each of the 3 posts I just queried
        the_content(); 
        ?>
    </div>
</div>

Related posts

1 comment

  1. I’d try an easier html but if you want to use that one you can use this code.

     <div class="section-wrapper">
    <?php
    // WP_Query arguments
    $args = array (
        'post_type'              => 'team',
        // choose other differentiating parameter, for example tag 
        'tag'                     => 'main'
    );
    
    // The Query
    $query = new WP_Query( $args );
    
    // The loop
    if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); 
    ?>
    <div class="member-row row-1 <?php post_class(); ?>">
        <div class="team-member member-1">
        <h2><?php the_title(); ?></h2>
        </div>
    </div>
    <?php
    
    endwhile; endif;
    
    // Restore original Post Data
    wp_reset_postdata();
    
    ?>
    
    <?php
    // WP_Query arguments
    $args = array (
        'post_type'              => 'team',
        // choose other differentiating parameter, for example tag 
        'tag'                     => 'main'
    );
    
    // The Query
    $query = new WP_Query( $args );
    
    // The loop
    if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); 
    ?>
    
    
    <div class="summary <?php post_class() ?>">
        <?php 
        // display the_content() of each of the 3 posts I just queried
        the_content(); 
        ?>
    </div>
    
    <?php
    
    endwhile; endif;
    
    // Restore original Post Data
    wp_reset_postdata();
    
    ?>
    </div>
    
    
    <div class="section-wrapper">
    <?php
    // WP_Query arguments
    $args = array (
        'post_type'              => 'team',
        // choose other differentiating parameter, for example tag 
        'tag'                     => 'seconday'
    );
    
    // The Query
    $query = new WP_Query( $args );
    
    // The loop
    if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); 
    ?>
    <div class="member-row row-1 <?php post_class(); ?>">
        <div class="team-member member-1">
        <h2><?php the_title(); ?></h2>
        </div>
    </div>
    <?php
    
    endwhile; endif;
    
    // Restore original Post Data
    wp_reset_postdata();
    
    ?>
    
    <?php
    // WP_Query arguments
    $args = array (
        'post_type'              => 'team',
        // choose other differentiating parameter, for example tag 
        'tag'                     => 'secondary'
    );
    
    // The Query
    $query = new WP_Query( $args );
    
    // The loop
    if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); 
    ?>
    
    
    <div class="summary <?php post_class() ?>">
        <?php 
        // display the_content() of each of the 3 posts I just queried
        the_content(); 
        ?>
    </div>
    
    <?php
    
    endwhile; endif;
    
    // Restore original Post Data
    wp_reset_postdata();
    
    ?>
    </div>
    

Comments are closed.