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. Commented 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. Commented 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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.