WordPress query loop div display

Question

Hello I want to display posts like this.

<div class="item">
  <div class="row">
    Post No 1.
    Post No 2.
  </div>
  <div class=row 2>
    Post No 3.
    Post No 4.
    Post No 5.
  <div>
</div>

Here is code what i am trying.

 <?php 
                    global $paged, $wp_query, $wp;
                    $arags = array(
                        'post_type' => 'post',
                        'posts_per_page' => 5,
                    );
                    $count = 1;
                    $itemClass = '';
                    $wp_query = new WP_Query($arags);
                    while ($wp_query->have_posts()) : $wp_query->the_post();
                    ?>
                    <?php 
                    if($count == 1) :
                        echo '<div class="item">';
                        echo '<div class="row">';
                    endif;

                    if($count == 1 || $count == 2) :
                        get_template_part( 'templates/mag/mag-loop-big' );
                    endif;


                    if($count == 1) :
                        echo '</div>';
                        echo '</div>';
                    endif;
                    ?>
                    <?php $count++; ?>                      
                    <?php endwhile; ?>
                    <?php wp_reset_postdata(); ?>
                    <?php wp_reset_query(); ?>

This Code display first post in Item and Div class. But second div shown out side of row and item div. Here is current result.

<div class="item">
<div class="row">
    Post No 1.
 </div>
</div>
 Post No 2.
 Post No 3.
Post No 4.

Any solution for this?? Thanks in advance.

Because you have closed div after first post if($count == 1) : echo '</div>'; echo '</div>'; endif; — B. Desai
– B. Desai, Commented Aug 26, 2017 at 6:58

Osama · Accepted Answer · 2017-08-26 07:36:50Z

1

your conditions are not the right one for that result try this

if($count == 1) :
echo '<div class="item">';
echo '<div class="row">';
if($count == 1) :
get_template_part( 'templates/mag/mag-loop-big' );
endif;
if($count == 2) :
echo '</div>';
endif;
 if($count == 3) :
 echo '<div class="row2">';
 if($count == 5) :
 echo '</div>';
 echo '</div>';
 endif;
?>

answered Aug 26, 2017 at 7:36

Osama

3,0301 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

WordPress query loop div display

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related