looking for some solutions? You are welcome.

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

Jahedul Islam Nayon:

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:

enter image description here

I want to happen this way

enter image description here



Posted in S.E.F
via StackOverflow & StackExchange Atomic Web Robots
Share:

No comments:

Recent