wp query - Show post content and title in diferent divs using WP_Query using a loop

im trying to display the post title and post content of posts in diferent divs using a loop to iterate the posts in $the_query, how can achieve this?

<?php $the_query = new WP_Query( 'posts_per_page=4' );?>

the structure should be something like this

<div class="grid">
   <div class="main post"> 
      <!--show data of the first post in the array-->
   </div>
   <div class="nested">
      <div class="first post">
         <!--show data of the second post in the array-->
      </div>
      <div class="second post">
         <!--show data of the third post in the array-->
      </div>
      <div class="third post">
         <!--show data of the fourth post in the array-->
      </div>
   </div> <!--end nested-->
</div> <!--end grid-->

im trying to display the post title and post content of posts in diferent divs using a loop to iterate the posts in $the_query, how can achieve this?

<?php $the_query = new WP_Query( 'posts_per_page=4' );?>

the structure should be something like this

<div class="grid">
   <div class="main post"> 
      <!--show data of the first post in the array-->
   </div>
   <div class="nested">
      <div class="first post">
         <!--show data of the second post in the array-->
      </div>
      <div class="second post">
         <!--show data of the third post in the array-->
      </div>
      <div class="third post">
         <!--show data of the fourth post in the array-->
      </div>
   </div> <!--end nested-->
</div> <!--end grid-->

• posts
• wp-query

Share Improve this question asked Nov 26, 2018 at 19:04 TraukoTrauko 2511 silver badge66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

PHP loops are loops - you can control them ;)

<?php
    $the_query = new WP_Query( array('posts_per_page' => 4) );
    if ( $the_query->have_posts() ) :
        $the_query->the_post();
?>
<div class="grid">
   <div class="main post">
      <!--show data of the first post in the array-->
      <?php the_title(); ?>
      <?php the_content(); ?>
   </div>
   <div class="nested">
      <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
      <div class="post">
         <!--show data of next post in the array-->
         <?php the_title(); ?>
         <?php the_content(); ?>
      </div>
      <?php endwhile; ?>
   </div> <!--end nested-->
</div> <!--end grid-->
<?php endif; ?>