Search code examples
phpwordpresstwitter-bootstrapcustom-post-type

WordPress custom post type query display

I have a custom post type that I have a query for and it works great except for it is not displaying the way I would like it to. I want my projects to display 3 in a row. I'm using Bootstrap and for some reason it is stacking them instead of displaying them in a row. I inspected the markup and it is creating a new div and a new row for each project. I've tried playing around with the loop but it is still showing the projects the same way. Here is the code I am working with:

<div class="container portfolio">  
    <?php  
      $args = array( 'post_type' => 'projects', 'posts_per_page' => 30);
      $the_query = new WP_Query( $args );
    ?>
    <?php if ( $the_query->have_posts() ) : ?>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="row js--wp-4">
      <div class="col-md-4">
        <div class="card">
          <img src="<?php the_field('background_img_small'); ?>" alt="" class="site-image">
          <div class="overlay text-center">
            <h2 class="card-title"><?php the_title(); ?></h2>
            <p class="card-info"><?php the_field('short_desc'); ?></p>
            <div class="d-flex justify-content-center align-items-center">
                <a href="portfolio-single.html"><button type="button" class="btn btn-md btn-outline-secondary">View Project</button></a>
            </div>
          </div>
        </div>
      </div> 
    </div>
    <?php endwhile;
    wp_reset_postdata(); ?>
    <?php else: ?>
    <p><?php _e( 'Sorry there are no posts' ); ?></p>
    <?php endif; ?>   
  </div>

Here is the way it needs to be displayed: enter image description here

Here is the way it is diplaying now with three posts to test: enter image description here

Solution

  • Solved. I just had the row inside the loop and it kept displaying each project in a new row. Oops but here is the right code:

    <div class="container portfolio"> 
        <?php  
          $args = array( 'post_type' => 'projects' );
          $the_query = new WP_Query( $args );
        ?>

        <div class=" row js--wp-4">

          <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>  

          <div class="col-md-4">                            
            <div class="card">          
              <img src="<?php the_field('background_img_small'); ?>" alt="" class="site-image">
              <div class="overlay text-center">
                <h2 class="card-title"><?php the_title(); ?></h2>
                <p class="card-info"><?php the_field('short_desc'); ?></p>
                <div class="d-flex justify-content-center align-items-center">
                    <a href="portfolio-single.html"><button type="button" class="btn btn-md btn-outline-secondary">View Project</button></a>
                </div>
              </div>
            </div>                  
          </div> 
        
           <?php endwhile;
            wp_reset_query(); ?> 
            
        </div>         
    </div> 
   </div>