0

I wanted some information about on how to achieve the below senario. Can anyone help me out please.

Ok so here is what i have got so far.

I have two custom post types. And i am pulling & merging those to load randomly. They load randomly and with post types alternatively.

Ex: post type 1, post type 2, post type 1, post type 2 etc..

I have achieved this so far. Now while loading posts i want them into 3 columns(masonry format).

<div class="row">
            <div id="grid-content">
            <?php
            // Fetch quotes
            $quotes_query = new WP_Query( array(
                'post_type'=> 'quote',
                'orderby' => 'rand',
                'posts_per_page' => 4,
            ) );

            // Fetch founders
            $founders_query = new WP_Query( array(
                'post_type'=> 'founder',
                'orderby' => 'rand',
                'posts_per_page' => 3,
            ) );

            // List of merged founder and quotes
            $mergedposts = array();

            for ( $i = 0; $i < 10; $i++ ) {
                // Add quotes to list
                if ( isset( $quotes_query->posts[ $i ] ) ) {
                    $mergedposts[] = $quotes_query->posts[ $i ];
                }

                // Add founder to list
                if ( isset( $founders_query->posts[ $i ] ) ) {
                    $mergedposts[] = $founders_query->posts[ $i ];
                }
            }

            foreach( $mergedposts as $post ) :
            setup_postdata($post);
            ?>
              <div class="col-md-4 col-sm-6 col-xs-12 foundersnetwork_col">
                <div class="foundersnetwork_list">                          
                    <?php if ( get_post_type( get_the_ID() ) == 'quote' ) { ?>
                      <div class="foundersnetwork_content" style="background-color: <?php the_field('background_color'); ?>;">
                          <h4><?php the_field('quote_data'); ?></h4>
                      </div>
                    <?php } ?>

                    <?php if(get_post_type( get_the_ID() ) == 'founder'){ ?>
                      <div class="foundersnetwork_img"><?php the_post_thumbnail('full'); ?></div>
                    <?php } ?>
                </div>
              </div>
          <?php endforeach; ?>
        </div>
        </div>

But the 4th post must fall into 1st column, 5th post into 2nd column, 6th post into 3rd column and so on..

example:

<div class="col1">
post 1
post 4
post 7
</div>
<div class="col2">
post 2
post 5
</div>
<div class="col3">
post 3
post 6
</div>

**** Updated ****

Found a solution. Not exactly how i wanted but this will do the trick as the 4th falls under 1st no matter of the other posts - https://bootsnipp.com/snippets/featured/pinterest-like-responsive-grid

So this is solved now. Thanks to everyone who spent time on this.

1

If that col-4 class does what your example suggests it does, then just wrapping each post in col-4 would achieve the same effect:

<div class="col-4">
Post 1
</div>
<div class="col-4">
Post 2
</div>
<div class="col-4">
Post 3
</div>
<div class="col-4">
Post 4
</div>
<div class="col-4">
Post 5
</div>
<div class="col-4">
Post 6
</div>

Then you don't need to do anything special with WP_Query at all.

  • Hi. Basically i wanted 3 column layout to display posts. But the 4th post must fall in 1st column, 5th in 2nd, 6th i third. Again, 7th in 1st column and so on.. because, i don't want gap in between 1st and 4th. I tried masonry but they fall wherever there is gap for next post. – jaya558 Nov 20 '17 at 11:39
  • Updated my question. Please check and suggest – jaya558 Nov 20 '17 at 12:17
0

You may use this as follow:-

   $query = new WP_Query( array(
        'post_type'      => 'post',
        'order'          => 'DESC',
        'post_status'    => ' publish',
        'posts_per_page' => 3
    ) );

    while ($query->have_posts()): $query->the_post();
    echo"<div class="col-4">";
        the_title();
    echo"</div>";
    endwhile;
   wp_reset_postdata();

You may Please check it and let me know if you succeded in your goal.

  • Updated my question. Please check and suggest – jaya558 Nov 20 '17 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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