Site icon Hip-Hop Website Design and Development

Displaying WordPress posts in a Bootstrap 5 carousel

I’ve two customized posts varieties in WordPress, ‘Members’ and ‘Initiatives’. Every Challenge ought to be related to a member, which I’ve achieved utilizing the ‘Relationship’ discipline kind in Superior Customized Fields.

I’ve a web page which lists all the members utilizing a WP_Query loop and inside that, I’ve additionally set the web page to loop via the three most up-to-date tasks for that related member and show these beneath the member.

For the time being, if I add a couple of challenge for a member it shows all of them on high of each other however I might like them to indicate in a Bootstrap 5 carousel as an alternative. I’ve tried setting the tasks to show as slides inside a carousel however as an alternative nothing will get displayed. Is that this potential?

Present code is beneath.

<?php $loop = new WP_Query( array( 'post_type' => 'members', 'orderby' => 'date', 'order' => 'ASC', 'posts_per_page' => 20 ) ); ?>
    <?php whereas( $loop->have_posts() ) : $loop->the_post(); $temp_query = $wp_query; ?>
    <?php $member_url = get_field('website_url'); ?>
        <part class="member-section">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-sm-8">
                        <h2 class="mb-5 text-center" id="<?php echo the_title(); ?>"><?php echo the_title(); ?></h2>
                            <?php echo the_content(); ?>
                            <a href="https://<?php echo $member_url; ?>" class="mt-5"><?php echo $member_url; ?></a>
                    </div>
                </div>
                <div class="row justify-content-center project-title">
                    <div class="col-sm-8">
                        <h2 class="mb-5 text-center">Spotlight Initiatives</h2>
                    </div>
                </div>
            </div>
        </part>
        <part>
            
                    <div id="<?php the_title(); ?>Carousel" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                    <?php $wp_query = new WP_Query( array( 'post_type' => 'tasks', 'orderby' => 'date', 'order' => 'DSC', 'posts_per_page' => 3, 'meta_query' => array(array('key' => 'member', 'worth' => '"' . get_the_ID() . '"', 'evaluate' => 'LIKE') ) ) ); ?>
                        
                    <?php whereas( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
                    <?php 
                    $location = get_field('location');
                    $worth = get_field('worth');
                    $number_of_units = get_field('number_of_units');
                    $tenures = get_field('tenures');
                    $homes_england = get_field('homes_england');
                    $contractor = get_field('contractor');
                    $thumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                            
                                    <div class="carousel-item">
                                        <div class="container-fluid">
                                        <div class="col-sm-5" fashion="background: url('<?php echo $thumb; ?>') no-repeat bottom center; background-size: cover;">
                                </div>
                                <div class="col-sm-7 member-projects">
                                    <h3><?php echo the_title(); ?>, <?php echo $location; ?></h3>
                                    <div class="row">
                                        <div class="col-3">
                                        <p class="mt-5">
                                            Worth<br>
                                            No of models<br>
                                            Tenures<br>
                                            Properties England<br>
                                            Contractor</p>
                                        </div>
                                        <div class="col-3">
                                            <p class="mt-5">
                                            <?php echo $worth; ?><br>
                                            <?php echo $number_of_units; ?><br>
                                            <?php echo $tenures; ?><br>
                                            <?php echo $homes_england; ?><br>
                                            <?php echo $contractor; ?></p>
                                        </div>
                                    </div>                            
                                </div> 
                            </div>
                        </div>
                         
                        <?php endwhile; if (isset($wp_query)) {$wp_query = $temp_query;} ?>
                        </div>  
            </div>
                </part>
    <?php endwhile; wp_reset_postdata(); ?>