I'm trying to list posts in a custom post type, within a layout like following.
html for below layout like this.
<div class="col-md-4 col-sm-6">
PROFILE - 1
</div>
<div class="col-md-4 col-sm-6">
</div>
<div class="col-md-4 col-sm-6">
PROFILE - 2
</div>
<div class="col-md-4 col-sm-6">
PROFILE - 3
</div>
<div class="col-md-4 col-sm-6">
</div>
<div class="col-md-4 col-sm-6">
PROFILE - 4
</div>
as you can see after "PROFILE - 1" there is a div separator then there is "PROFILE - 1 & PROFILE - 2" after "PROFILE - 1 & PROFILE - 2" again div separator.
basically the structure as follows.
Profile-1
V V
Empty space (div based col-md-4 col-sm-6 )
V V
Profile-2
V V
Profile-3
V V
Empty space (div based col-md-4 col-sm-6 )
V V
Profile-4
i'm using this loop as a custom structure but i'm unable to get it from Profile-2 > Profile-3 > Space point.
looking for a help to achieve this loop.
THIS IS WHAT I HAVE TRIED
<?php
$args=array(
'post_type' => 'ourteam',
'posts_per_page' => -1
);
//Set up a counter
$counter = 0;
//Preparing the Loop
$query = new WP_Query( $args );
//In while loop counter increments by one $counter++
if( $query->have_posts() ) : while( $query->have_posts() ) : $query-
>the_post(); $counter++;
//We are in loop so we can check if counter is odd or even
if( $counter % 2 == 0 ) : //It's even
?>
<div class="col-md-4 col-sm-6">
</div>
<div class="col-md-4 col-sm-6">
<div class="cp-attorneys-style-2">
<div class="frame"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(''); ?></a>
<div class="caption">
<div class="holder">
<ul>
<li><a href="<?php the_field('mem_twitter'); ?>"><i class="fa fa-twitter"></i></a></li>
<li><a href="<?php the_field('mem_facebook'); ?>"><i class="fa fa-facebook"></i></a></li>
<li><a href="<?php the_field('mem_linkedin'); ?>"><i class="fa fa-linkedin"></i></a></li>
</ul>
<p> </p>
<a href="<?php the_permalink(); ?>" class="btn-style-1">Read Profile</a> </div>
</div>
</div>
<div class="cp-text-box">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<em><?php the_field('mem_titles'); ?></em> </div>
</div>
</div>
<div class="col-md-4 col-sm-6">
</div>
<?php
else: //It's odd
?>
<div class="col-md-4 col-sm-6">
<div class="cp-attorneys-style-2">
<div class="frame"> <a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail(''); ?></a>
<div class="caption">
<div class="holder">
<ul>
<li><a href="<?php the_field('mem_twitter'); ?>"><i class="fa fa-twitter"></i></a></li>
<li><a href="<?php the_field('mem_facebook'); ?>"><i class="fa fa-facebook"></i></a></li>
<li><a href="<?php the_field('mem_linkedin'); ?>"><i class="fa fa-linkedin"></i></a></li>
</ul>
<p> </p>
<a href="<?php the_permalink(); ?>" class="btn-style-1">Read Profile</a> </div>
</div>
</div>
<div class="cp-text-box">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<em><?php the_field('mem_titles'); ?></em> </div>
</div>
</div>
<?php
endif;
endwhile; wp_reset_postdata(); endif;
?>
margin
andfloat
property of CSS instead of using empty div.