How to show 2 columns data in the same loop in wordpress/php

Question

I would like to post a while loop in WordPress, the first 1 post will be shown in 6 columns of bootstrap, And along with 6 posts appear in Bootstrap 6 column. My code

   <div class="row">
        <div class="col-xl-6">
            <div class="single-large-post">
                <div class="slp-thumb">
                    <a href=""><img src="<?php echo get_template_directory_uri();?>/img/image-32231-1551194958-660x400.jpg" alt=""></a>
                </div>
                <div class="slp-text">
                    <h3 class="large-post-title"><a href="">রাজধানীতে নারীদের জন্য অ্যাপভিত্তিক পরিবহন সেবা</a></h3>
                    <div class="large-post-content">
                        <p>নির্দিষ্ট সময়ে ও নির্দিষ্ট রুটে পিক-আপ এবং ড্রপ-অফ সেবা প্রদান করছে শাটল। সকাল সাড়ে ছয়টা থেকে শুরু<a href=""> বিস্তারিত</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <!--single-mini-post-start -->
            <div class="single-mini-latest-post">
                <div class="sml-post-thumb">
                    <a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/oscar-2019.jpg" alt=""></a>
                </div>
                <div class="sml-post-text">
                    <h5><a href="">৯১তম অস্কারের ইতিবৃত্ত</a></h5>
                    <p><span>February 27 2019</span></p>
                </div>
            </div>
            <!--single-mini-post-end -->
        </div>
    </div>

I have tried this way and have been using jQuery, but didn’t work

$(".cb-news-list-2nd-design").first().insertBefore('<div class="col-xl-6 amar">');
$(".cb-news-list-2nd-design").last().after('</div>');

and I've tried this way looping

<div class="row"> 

    <?php 
    $i = 0;
    $news_paper_cat = new WP_Query(array(
        'post_type'         => 'post',
        'posts_per_page'    => 6
    ));
    if($news_paper_cat->have_posts()) : while($news_paper_cat->have_posts()) : $news_paper_cat->the_post();
        $i++;
    ?>
    <?php if($i ==1) : ?>
    <div class="col-xl-6">
        <div class="single-large-post"> 
            <div class="slp-thumb"> 
                <a href=""><img src="<?php echo get_template_directory_uri();?>/img/image-32231-1551194958-660x400.jpg" alt=""></a>
            </div>
            <div class="slp-text"> 
                <h3 class="large-post-title"><a href="">রাজধানীতে নারীদের জন্য অ্যাপভিত্তিক পরিবহন সেবা</a></h3>
                <div class="large-post-content"> 
                    <p> সকাল সাড়ে ছয়টা থেকে শুরু1 <a href=""> বিস্তারিত</a></p>
                </div>
            </div>
        </div>
    </div>
    <?php else : ?>                             
        <!--single-mini-post-start -->
        <div class="single-mini-latest-post cb-news-list-2nd-design"> 
            <div class="sml-post-thumb"> 
                <a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/oscar-2019.jpg" alt=""></a>
            </div>
            <div class="sml-post-text"> 
                <h5><a href="">৯১তম অস্কারের ইতিবৃত্ত</a></h5>
                <p><span>February 27 2019</span></p>
            </div>
        </div>
        <!--single-mini-post-end -->

<?php endif; endwhile; endif; ?>
</div>

In each post, bootstrap 6 columns take place Such as: Here is screenshot http://prntscr.com/mw58t0

I want to happen this way

http://prntscr.com/mw59o3

nanika · Accepted Answer · 2019-03-14 06:50:41Z

1

It may not be the best way to do this but I suggest you make two loops. First loop show only one post and for the second loop you add "'offset' => 1" to your query arguments to skip one post. Just a suggestion :)

answered Mar 14, 2019 at 6:50

nanika

918 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jahedul Islam Nayon Over a year ago

Thanks for suggestion. I will try this way if i don't get any another solution.

Darsh khakhkhar · Accepted Answer · 2019-03-14 07:40:10Z

Try to separate blocks using increment variable in while loop. if variable value is 1 then run the first block otherwise run the 2nd block and increase the variable value.. Try the code below..

<div class="row">
    <?php
    if( $the_query->have_posts() ):
        $i = 1;
        while( $the_query->have_posts() ) : $the_query->the_post();
            if ($i == 1) :
    ?>

                    <div class="col-xl-6">
                        <div class="single-large-post">
                            <div class="slp-thumb">
                                <a href=""><img src="<?php echo get_template_directory_uri();?>/img/image-32231-1551194958-660x400.jpg" alt=""></a>
                            </div>
                            <div class="slp-text">
                                <h3 class="large-post-title"><a href="">রাজধানীতে নারীদের জন্য অ্যাপভিত্তিক পরিবহন সেবা</a></h3>
                                <div class="large-post-content">
                                    <p>নির্দিষ্ট সময়ে ও নির্দিষ্ট রুটে পিক-আপ এবং ড্রপ-অফ সেবা প্রদান করছে শাটল। সকাল সাড়ে ছয়টা থেকে শুরু<a href=""> বিস্তারিত</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
            <?php 
            else : 
            ?>
                        <!--single-mini-post-start -->
                        <div class="single-mini-latest-post">
                            <div class="sml-post-thumb">
                                <a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/oscar-2019.jpg" alt=""></a>
                            </div>
                            <div class="sml-post-text">
                                <h5><a href="">৯১তম অস্কারের ইতিবৃত্ত</a></h5>
                                <p><span>February 27 2019</span></p>
                            </div>
                        </div>
                        <!--single-mini-post-end -->
            <?php
            endif;
        $i++; 
        endwhile;
    endif; 
    ?>
    </div>
</div>

Thanks for help, but I've tried this way, but didn't success. you can check my markup second column not each post in individual col-xl-6, it's first post col-xl-6 then next 5 posts in same col-xl-6, please check my code, i've added my quire codes.

Collectives™ on Stack Overflow

How to show 2 columns data in the same loop in wordpress/php

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related