custom post types - Adding sidebar to template creates horizontal gap the size of the side bar

I have been killing myself trying to figure this out on my own. And I for the life of me cannot figure out what is causing my issues.

I created a template for the testimonials page and used custom post types to fill the content. Everything looks great until I add the side bar then it creates a big gap the length of the sidebar between the first testimonial and the 2nd. And then they start formatting and showing up with the correct amount of space between each one.

I can get it to look fine and correct in HTML however once I bring it into wordpress it doesn't want to format correctly. Any ideas as to what could cause this? Thank you all in advance!

Screenshots: 1st one is html page that is "working" 2nd is what the wordpress page looks like with the gap.

get_header();
 ?>
 <?php $loop = new WP_Query ( array ( 'post_type' => 'testimonials', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post() ?>
    <section>
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-8">
            <!-- Testimony -->
            <div class="row testimonials">
              <div class="col-10">
                <h5>
                  <?php the_content(); ?>
                  <cite>&mdash; <?php the_title();?></cite>
                </h5>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <?php get_sidebar(); ?>
          </div> <!-- col -->
        </div> <!-- row-->
      </div> <!-- container -->
    </section>
 <?php endwhile;wp_reset_query(); ?>
 <?php get_footer();

I have been killing myself trying to figure this out on my own. And I for the life of me cannot figure out what is causing my issues.

I created a template for the testimonials page and used custom post types to fill the content. Everything looks great until I add the side bar then it creates a big gap the length of the sidebar between the first testimonial and the 2nd. And then they start formatting and showing up with the correct amount of space between each one.

I can get it to look fine and correct in HTML however once I bring it into wordpress it doesn't want to format correctly. Any ideas as to what could cause this? Thank you all in advance!

Screenshots: 1st one is html page that is "working" 2nd is what the wordpress page looks like with the gap.

get_header();
 ?>
 <?php $loop = new WP_Query ( array ( 'post_type' => 'testimonials', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post() ?>
    <section>
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-8">
            <!-- Testimony -->
            <div class="row testimonials">
              <div class="col-10">
                <h5>
                  <?php the_content(); ?>
                  <cite>&mdash; <?php the_title();?></cite>
                </h5>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <?php get_sidebar(); ?>
          </div> <!-- col -->
        </div> <!-- row-->
      </div> <!-- container -->
    </section>
 <?php endwhile;wp_reset_query(); ?>
 <?php get_footer();

• custom-post-types
• page-template
• sidebar

Share Improve this question edited Oct 27, 2018 at 3:38 LBos11 asked Oct 25, 2018 at 22:19 LBos11LBos11 1333 bronze badges 4

• It would be helpful to add the code you are using in your template. And to add the generated code for the blank area between the posts. – Rick Hellewell Commented Oct 26, 2018 at 1:57
• Hi Rick thanks for the reply. I attached the code from the testimonials template. I apologize I'm not sure I know what you mean by the generated code for blank area, would you mind telling me how I can find that? Thanks a million. – LBos11 Commented Oct 27, 2018 at 3:40
• View the page source, and find the area that is blank. Copy that code, then edit your question and paste in the code. Make sure that you format it as code (highlight the code, then click the curly braces above the question box). – Rick Hellewell Commented Oct 27, 2018 at 18:56
• Wow, when I viewed the page source this time something clicked that hadn't before, it was putting the first testimonial and the sidebar in the same row, and then creating new rows for each testimonial after. And since each row starts after the content in the first that is where my gap came from. I put the testimonial content nested in a main tag with the column and kept my sidebar outside the loop and it looks beautiful. Thank you so very much! – LBos11 Commented Oct 28, 2018 at 18:00

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I'd guess that the get_sidebar() inside the loop is causing the problem. It should be outside the loop.

The way it is now, one post is displayed, then you call the get_sidebar() code, which displays the sidebar stuff, then the loop continues with the next post.

Move the get_sidebar() outside the loop.

So this is the code that I changed it to that got it working like how I wanted :) big thanks to Rick!

get_header();
 ?>

 <div class="container">
        <div class="row">
            <main class="col-md-8">

        <?php $loop = new WP_Query ( array ( 'post_type' => 'testimonials', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>

           <?php while ( $loop->have_posts() ) : $loop->the_post() ?>
            <div class="testimonials">
             <h5>
               <?php the_content(); ?>
               <cite>&mdash; <?php the_title();?></cite>
             </h5>
             </div>
             <?php endwhile;wp_reset_query(); ?>

            </main>

            <!-- SIDEBAR
            ================================================== -->
            <aside class="col-md-4">
                <?php get_sidebar(); ?>
            </aside>
        </div><!-- #primary -->
    </div><!-- .container -->

 <?php get_footer(); ?>