0

I'm trying to list posts in a custom post type, within a layout like following.

Layout

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;


   ?>
Improve this question
3
  • 1
    To provide space between div you can use margin and float property of CSS instead of using empty div.
    – Rishabh
    Apr 10, 2017 at 8:09
  • @Rishabh thanks but it's not spacing issue it's about getting the structure mentioned into a wordpress loop
    – greenarrow
    Apr 10, 2017 at 8:33
  • 1
    can you perhaps post a code snippet of what you did? codepen,jsfiddle. Will be easier even for you cause we will just edit from there
    – Sidney Sousa
    Apr 10, 2017 at 9:31

2 Answers 2

Reset to default
1

You can set your custom loop something like this

$a=2;
//In while loop counter increments by one $counter++
if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post();
    if($a%3!=0){  //Here write function to display title and discription
    ?>  
        <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 
    $a = $a+1;
    } else {
    ?>
        <div class="col-md-4 col-sm-6">  
        <?php //Leave this div empty 
        ?>
        </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>    
    <?php
    $a = $a+2;
    }

endwhile; wp_reset_postdata(); endif;

Take backup of your code first.

Improve this answer
2
  • Comments are not for extended discussion; this conversation has been moved to chat.
    – Howdy_McGee ♦
    Apr 10, 2017 at 14:16
  • @Howdy_McGee Sorry about that, I know discussion should not be done in comment section but I don't know how to move discussion in chat. Earlier it use to come auto option in which by clicking on it we can move discussion on chat but these days this options doesn't show up when discussion extend in comment section.
    – Rishabh
    Apr 11, 2017 at 4:52
0

Do you need the empty div for anything other than spacing? By the class names, it looks like you are using bootstrap, and in bootstrap you have the offset-classes to ensure correct spacing on the different breakpoints.

If you want two profiles on each row you can do

<div class="col-md-offset-2 col-md-4">

to make sure you have a two-column offset on the left hand side of each div. Then you eliminate the need for empty divs used only for spacing.

More at http://getbootstrap.com/css/#grid-offsetting

Improve this answer
1
  • Thanks, i have no spacing or css issue, all i want is to my wordpress loop to maintain the structure i describe in the question
    – greenarrow
    Apr 10, 2017 at 10:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.