Title: Custom Post Type Query
Last modified: April 25, 2021

---

# Custom Post Type Query

 *  Resolved [cml0001](https://wordpress.org/support/users/cml0001/)
 * (@cml0001)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/custom-post-type-query-3/)
 * Hello I am having an issue with my custom post type query. I am displaying projects
   with Bootstrap as a framework and the query displays all my test project post
   type info but the columns are stacking instead of displaying 3 in a row (since
   I am using col-md-4 in the div. These were displaying normal in the html static
   template and I have tried playing around with the loop with no change in the 
   way it displays. Here is the code for the entire page some of the content is 
   still static:
 *     ```
       <?php 
       /**
       * Template Name: Portfolio Page
       *
       * 
       */
       ?>
   
       <?php get_header(); ?>
   
         <div class="portfolio-heading">
           <h1 class="about-me text-center animated flash"><?php the_title(); ?></h1>
             <div class="row justify-content-center">
               <div class="col-md-6">
                 <p class="lead portfolio-intro animated fadeIn"><?php the_field('intro_text'); ?></p>  
               </div>
             </div>
         </div>      
   
         <div class="album">        
   
             <div class="container portfolio">  
               <?php  
               $args = array( 'post_type' => 'projects' );
                 $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> 
              </div>
            </div>
   
           <div class="free-themes">
             <h2 class="text-center my-themes">My Themes</h2>
             <p class="lead text-center themes-text">This is my free themes section where you can find my WordPress projects. Free to download on Github.</p>
             <div class="row d-flex justify-content-center">
               <img src="img/lapizzaria.png" alt="LaPizzaria Homepage" class="free-single-img">
               <div class="col-md-6 free-details">
                 <h3 class="text-center theme-title">Business Theme</h3>
                 <p class="">This is a WordPress business theme. It is perfect for showcasing your business. Multiple page templates let you choose which design is best for you.</p>
                 <div class="text-center">
                   <a href="#"><button class="btn btn-primary btn-lg btn-free">View Demo</button></a>
                   <a href="#"><button class="btn btn-primary btn-lg btn-free">Download</button></a>
                 </div>
               </div>
             </div>
           </div>
   
       <?php get_footer(); ?>
       ```
   
 * Here is the code for the projects loop:
 *     ```
       <div class="container portfolio">  
               <?php  
               $args = array( 'post_type' => 'projects' );
                 $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> 
              </div>
            </div>
       ```
   

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/custom-post-type-query-3/#post-14362492)
 * The sort of issue you describe is usually an issue with CSS and not the underlying
   HTML or PHP. For help in resolving CSS issues we’d need a live link to a page
   demonstrating the problem.
 *  Thread Starter [cml0001](https://wordpress.org/support/users/cml0001/)
 * (@cml0001)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/custom-post-type-query-3/#post-14363035)
 * Here is the link to my stack overflow question:
    [Link Here](https://stackoverflow.com/questions/67136429/wordpress-custom-post-type-query-display)
   There are some screenshots when you scroll down on the question. I did notice
   when I inspect the markup it is creating a new row for each project I have added
   to the projects custom post. This is a site in development, I am using xampp (
   localhost) so I do not have any live links.
    -  This reply was modified 5 years, 3 months ago by [cml0001](https://wordpress.org/support/users/cml0001/).
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/custom-post-type-query-3/#post-14366671)
 * It’s very difficult to give specific advice without a live link. There’s possibly
   some minor glitch that someone could spot. The solution partly depends on what
   CSS is already applied, which is best examined through a browser’s element inspector
   tool. You might be able to use this tool to work out a solution for yourself.
 * Generally speaking, one way to accomplish a 3-across layout is to set each post’s
   container div width property to 33% and to float it left. If there are margins,
   adjust the width accordingly so everything adds up to 100%. I suspect the `float:
   left;` is what’s missing or misapplied due to inappropriate selectors.
 * Other possibilities for 3-across layouts are to use the CSS flex box or grid 
   models.
 *  Thread Starter [cml0001](https://wordpress.org/support/users/cml0001/)
 * (@cml0001)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/custom-post-type-query-3/#post-14386947)
 * I figured it out. I had the row div inside the loop therefore it was displaying
   a new row for each project. I put the div outside the loop and now it displays
   the correct way. Thanks for your input though I appreciate the effort!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Custom Post Type Query’ is closed to new replies.

## Tags

 * [wp_query](https://wordpress.org/support/topic-tag/wp_query/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 4 replies
 * 2 participants
 * Last reply from: [cml0001](https://wordpress.org/support/users/cml0001/)
 * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/custom-post-type-query-3/#post-14386947)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics