0

I made a grid with bootstrap where i want to show 5 differents posts but for some reason it duplicates the grids and shows one post per grid. Here you can see how it starts to duplicate the grids This is how i would like it to work

First image shows how it starts to duplicate the grids 5 times instead of just showing 5 posts in those columns. Second picture shows how i would like to work.

    <?php get_header(); ?>


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

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

$blogposts = new WP_Query($args);

while($blogposts->have_posts()) {
    $blogposts->the_post(); ?>



<div class="col-md-6">
      <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>

    <div class="col-md-6">
      <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>
  </div>



  <div class="row">
    <div class="col-md-4">
      <a href="<?php the_permalink(); ?>">

        <div class="card border-0">
          <div class="card-pic">

            <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">
              <h3 class="card-title font-weight-bold"><?php the_title(); ?></h3>
              <div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>

            </div>
          </div>

        </div>
      </a>
    </div>

    <div class="col-md-4">
      <a href="<?php the_permalink(); ?>">
        <div class="card border-0">
          <div class="card-pic">

            <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>
    <div class="col-md-4">
      <a href="<?php the_permalink(); ?>">

        <div class="card border-0">
          <div class="card-pic">

            <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 }
wp_reset_query();
Improve this question

2 Answers 2

Reset to default
0

Your while loop means, "Every time I have one post, output the following code." Since you have 5 divs inside the while loop, you are getting 5 copies for each post. So, change your while { } code to this, which will output just 1 div for every post:

while($blogposts->have_posts()) {
    $blogposts->the_post(); ?>



<div class="col-md-6">
      <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 }
Improve this answer
2
  • Thank you for your answer. I tried that and yes its close the way i want. It shows 5 posts now but they are not in the grid how i want them to be. Ill post an picture.
    – Miikinki
    Feb 19, 2020 at 19:11
  • You may need to adjust the markup to fit how Bootstrap holds the markup - for example, you might have to add a "row" wrapper around them all, outside the while loop.
    – WebElaine
    Feb 19, 2020 at 20:00
0 
   while($blogposts->have_posts()) {
    $blogposts->the_post(); ?>



<div class="col-md-6">
      <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 }

Changing the while loop makes it show the 5 posts like i wanted but the posts are still not in the bootstrap columns.enter image description herePicture below shows what im trying to achieve. This is what i am trying to achieve.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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