0

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?

enter image description here

1 Answer 1

0

Your 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] =>
)
8
  • I've tested your solution but I get the content duplied, the two columns will have the same content displayed.
    – sialfa
    Jun 15, 2020 at 16:09
  • you requirement is fuzzy. If you are familiar with php you can easily edit and apply my solution to your case. Properly check what I did inside final loop. You will get the idea of what happening there. Jun 15, 2020 at 16:20
  • I see that you're using modulo operator to echo the columns based on the loop index increment. That's fine, but The problem for me is that I get the same content for both columns and I have two separate categories that are needed to display
    – sialfa
    Jun 15, 2020 at 16:23
  • did you properly edit my ans where i added category slug in get_posts() ? you have to input slug there. Jun 15, 2020 at 16:24
  • Also if same post is related to both categories you will get duplicate. Hope you understand. Make sure posts has unique categories Jun 15, 2020 at 16:26

Your Answer

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

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