Wordpress Loop Posts in Bootstrap 3 Grid Layout

Wordpress Loop posts in Bootstrap 3 grid layout

Yes you can do it.

<?php
    $args=array(
    'post_type' => 'artist',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'caller_get_posts'=> 1
    );
    $my_query = null;
    $my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
    echo '';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
    if($i % 4 == 0) { ?> 
        <div class="row">
    <?php
    }
    ?>
    <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
    <p><a href="<?php the_field('artist_link'); ?>"><?php the_field('artist_name'); ?></a></p>
    <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="Sample Image" class="img-responsive" /></a></p>

    <?php    
    if($i % 4 == 0) { ?> 
        </div>
    <?php
    }

    $i++;
endwhile;
}
wp_reset_query();
?>

Wordpress posts in grid view with Bootstrap 3 columns

The easiest would be to use one container and put all the contetn items in it, then equal their height via js like that.

PHP

<?php query_posts('posts_per_page=9');while (have_posts()) : the_post();?>
    <div class="col-sm-4 blog-post thumb">
        <?php get_template_part('templates/content', get_post_format()); ?>
    </div>
<?php endwhile?>

JS:

function equalHeight(group) {    
    tallest = 0;    
    group.each(function() {       
        thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
} 

$(document).ready(function() {   
    equalHeight($(".thumb")); 
});

If thats no option, you could do sth. like that:

PHP

<div class="row">
    <?php 
        $count=0; 
        query_posts('posts_per_page=9'); 
        while (have_posts()) : the_post(); 
    ?>
    <div class="col-sm-4 blog-post thumb">
        <?php get_template_part('templates/content', get_post_format()); ?>
    </div>
    <?php 
        $count++; 
        if($count == 3 || $count == 6 ) echo '</div><div class="row">';
        endwhile;
    ?>
</div>

How to get WordPress while loop posts to bootstrap grid?

Since the post width is not fixed, I think it should be:

  <div class="container">
  <div class="row">
 <?php

$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
);

$blogposts = new WP_Query($args);

$i = 0;
while($blogposts->have_posts()) {
$blogposts->the_post();

if ($i < 2) :
?>
<div class="col-md-4">
<?php else : ?>
<div class="col-md-3">
<?php endif; ?>
      <a href="<?php the_permalink(); ?>">
        <div class="card border-0">
          <div class="card-picture">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>

    <?php
$i++;
  }

?>

WordPress Loop in Bootstrap Grid

Use array_chunk function

So, your code become:

    $countbang = 0 ;
    $count_posts = wp_count_posts( 'services' )->publish;
    $args = array( 'post_type' => 'services', 'posts_per_page' => 6 );

    $chunks = array_chunk($loop, 2); //it chunk $loop array into arrays with 2 elements. 

        while($chunks as $row){
           echo "<div class='row'>"; //open row
           while($row as $post){
             $countbang++;
             <a href="<?php the_permalink() ?>">
             <div id="post-grid-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-xs-6 col-sm-4 col-padding-0" >   
             <div id="color-overlay"></div>  
             <?php if ( has_post_thumbnail() ) {
                $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
                echo '<img width="100%" class="fet-img" src="' . $image_src[0] . '">';
             } 
             ?>
             <p class="overlay-text"><?php the_title(); ?></p>
             </div><!-- #post-grid -->
             </a>
           <?php
           }
           echo "</div>"; //close row
        }

WordPress loop alternate rows and columns each two posts with bootstrap

[EDIT]Try this:

<?php
$args = array(
    'posts_per_page' => '-1',
    'post_type'      => 'inversion',
    'category_name'  => '',
    'order'          => 'DESC',
    'orderby'        => 'date',
);

$the_query = new WP_Query( $args );
?>

<?php if ( $the_query->have_posts() ) :  ?>
    <div class="vc_row">
        <?php
            $float_class = '';
            while ( $the_query->have_posts() ) :
                $the_query->the_post();

                if ( $the_query->current_post &&
                $the_query->current_post % 2 === 0 ) {
                    $float_class = $float_class ? '' : 'vc_pull-right';
                }

                $imagen = get_the_post_thumbnail_url( get_the_ID(), 'full' );
        ?>
            <div class="vc_col-sm-6">
                <div class="vc_row vc_row-fluid">
                    <div class="vc_col-sm-6 cont-der <?php echo $float_class; ?>">
                        <a class="click-info">Más Información</a>
                        <div class="img-dentro kenburns-top" style="background:url('<?php echo esc_url( $imagen ); ?>') no-repeat; background-size:cover;">
                        </div>
                    </div>
                    <div class="vc_col-sm-6 cont-izq">
                        <h3><?php the_title(); ?></h3>
                    </div>
                </div>
            </div>
        <?php endwhile; // end have_posts() loop ?>
    </div><!-- .vc_row -->
<?php endif; // end have_posts() check ?>

<?php wp_reset_query(); ?>

---

Related Topics