I have two custom posts types in WordPress, ‘Members’ and ‘Projects’. Each Project should be associated with a member, which I’ve accomplished using the ‘Relationship’ field type in Advanced Custom Fields.
I have a page which lists all of the members using a WP_Query loop and within that, I’ve also set the page to loop through the 3 most recent projects for that associated member and display those beneath the member.
At the moment, if I add more than one project for a member it displays them all on top of one another but I’d like them to show in a Bootstrap 5 carousel instead. I’ve tried setting the projects to display as slides within a carousel but instead nothing gets displayed. Is this possible?
Current code is below.
<?php $loop = new WP_Query( array( 'post_type' => 'members', 'orderby' => 'date', 'order' => 'ASC', 'posts_per_page' => 20 ) ); ?>
<?php while( $loop->have_posts() ) : $loop->the_post(); $temp_query = $wp_query; ?>
<?php $member_url = get_field('website_url'); ?>
<section 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">Highlight Projects</h2>
</div>
</div>
</div>
</section>
<section>
<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' => 'projects', 'orderby' => 'date', 'order' => 'DSC', 'posts_per_page' => 3, 'meta_query' => array(array('key' => 'member', 'value' => '"' . get_the_ID() . '"', 'compare' => 'LIKE') ) ) ); ?>
<?php while( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php
$location = get_field('location');
$value = get_field('value');
$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" style="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">
Value<br>
No of units<br>
Tenures<br>
Homes England<br>
Contractor</p>
</div>
<div class="col-3">
<p class="mt-5">
<?php echo $value; ?><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>
</section>
<?php endwhile; wp_reset_postdata(); ?>
