I want to loop two different categories to create a layout of two columns in my custom theme. I'm using this code and bootstrap 4 as front-end framework but I'm unable to use all the 12cols available for bootstrap. During the loop, the elements will stack only one time correctly, can I fix this by nesting the loops?
<?php
$main_news = new WP_Query(
array(
'post_type' => 'post',
'category_name' => 'News',
'posts_per_page' => 6
)
);
if( $main_news->have_posts() ):
while( $main_news->have_posts() ): $main_news->the_post();
?>
<div class="col-sm-12 col-md-6 col-lg-6 p-4 mt-3">
<img class="card-img-top" src="<?php echo the_post_thumbnail_url(); ?>">
<h4 class="card-title"><?php the_title(); ?></h4>
<p class="card-text"><?php echo get_the_excerpt( get_the_ID() ); ?></p>
<a class="" href="<?php the_permalink(); ?>"><?php _e('Read', ''); ?></a>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
$side_news = new WP_Query(
array(
'post_type' => 'post',
'category_name' => 'Not important',
'posts_per_page' => 6
)
);
if( $side_news->have_posts() ):
while( $side_news->have_posts() ): $side_news->the_post();
?>
<div class="col-md-6 col-lg-6 card shadow-lg d-none d-md-block mt-3">
<div class="card-body">
<img class="card-img-top" src="<?php echo the_post_thumbnail_url(); ?>">
<h4 class="card-title"><?php echo get_the_title( get_the_ID() ); ?></h4>
<p class="card-text"><?php echo get_the_excerpt( get_the_ID() ); ?></p>
<a class="" href="<?php the_permalink(); ?>"><?php _e('Read', ''); ?></a>
</div>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
what I expect is that the two loops will create a column like in the example above:
//
<div class="row m-0">
<div class="col-8">content</div><div class="col-4">other content</div> // these two divs aligned
<div class="col-8">content</div><div class="col-4">other content</div> // etc...
</div>
UPDATE: This is the layout I expect. I've nested the two loop to get the categories I need, I've just noticed that the content of the nested loop will be repeated in some point. Any fix?
I want to loop two different categories to create a layout of two columns in my custom theme. I'm using this code and bootstrap 4 as front-end framework but I'm unable to use all the 12cols available for bootstrap. During the loop, the elements will stack only one time correctly, can I fix this by nesting the loops?
<?php
$main_news = new WP_Query(
array(
'post_type' => 'post',
'category_name' => 'News',
'posts_per_page' => 6
)
);
if( $main_news->have_posts() ):
while( $main_news->have_posts() ): $main_news->the_post();
?>
<div class="col-sm-12 col-md-6 col-lg-6 p-4 mt-3">
<img class="card-img-top" src="<?php echo the_post_thumbnail_url(); ?>">
<h4 class="card-title"><?php the_title(); ?></h4>
<p class="card-text"><?php echo get_the_excerpt( get_the_ID() ); ?></p>
<a class="" href="<?php the_permalink(); ?>"><?php _e('Read', ''); ?></a>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
$side_news = new WP_Query(
array(
'post_type' => 'post',
'category_name' => 'Not important',
'posts_per_page' => 6
)
);
if( $side_news->have_posts() ):
while( $side_news->have_posts() ): $side_news->the_post();
?>
<div class="col-md-6 col-lg-6 card shadow-lg d-none d-md-block mt-3">
<div class="card-body">
<img class="card-img-top" src="<?php echo the_post_thumbnail_url(); ?>">
<h4 class="card-title"><?php echo get_the_title( get_the_ID() ); ?></h4>
<p class="card-text"><?php echo get_the_excerpt( get_the_ID() ); ?></p>
<a class="" href="<?php the_permalink(); ?>"><?php _e('Read', ''); ?></a>
</div>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
what I expect is that the two loops will create a column like in the example above:
//
<div class="row m-0">
<div class="col-8">content</div><div class="col-4">other content</div> // these two divs aligned
<div class="col-8">content</div><div class="col-4">other content</div> // etc...
</div>
UPDATE: This is the layout I expect. I've nested the two loop to get the categories I need, I've just noticed that the content of the nested loop will be repeated in some point. Any fix?
Share Improve this question edited Jun 15, 2020 at 14:11 sialfa asked Jun 15, 2020 at 13:17 sialfasialfa 32910 silver badges29 bronze badges1 Answer
Reset to default 0Your final outlook is a bit tricky to achieve using traditional way. Lets assume both category has at least 6 post. Now first grab the posts using get_posts() not WP_Query
$side_news = get_posts(array(
'post_type' => 'post',
'category_name' => 'category-slug-1',
'posts_per_page' => 6
));
$side_news2 = get_posts(array(
'post_type' => 'post',
'category_name' => 'category-slug-2',
'posts_per_page' => 6
));
now that we know we have 6 post each let's merge the result as alternative position.
$c_result = array();
while(!empty($side_news) || !empty($side_news2)) {
if(!empty($side_news)) {
$result[] = array_shift($side_news);
}
if(!empty($side_news2)) {
$result[] = array_shift($side_news2);
}
}
Now we have an array with 12 posts. Let's loop through it and achieve the final layout:
echo '<div class="row m-0">';
$i = 0;
foreach ($c_result as $post) {
$i++;
$id = $post->ID;
$title = $post->post_title;
$content = $post->post_content;
if($i%2 == 0):
echo"<div class='col-8'>$id $title $content</div>";
else:
echo"<div class='col-4'>$id $title $content</div>";
endif;
}
echo '</div>';
get_posts() returns post as object with following keys:
WP_Post Object
(
[ID] =>
[post_author] =>
[post_date] =>
[post_date_gmt] =>
[post_content] =>
[post_title] =>
[post_excerpt] =>
[post_status] =>
[comment_status] =>
[ping_status] =>
[post_password] =>
[post_name] =>
[to_ping] =>
[pinged] =>
[post_modified] =>
[post_modified_gmt] =>
[post_content_filtered] =>
[post_parent] =>
[guid] =>
[menu_order] =>
[post_type] =>
[post_mime_type] =>
[comment_count] =>
[filter] =>
)