I have a query that checks for a custom field set on that page and then creates a carousel to loop them with a background image.

What I then want to do, is query a post type that uses a custom taxonomy with the same values as the custom field. Basically, for example if I've set the custom field 'homepage-fruit' as 'apples', but I also have a custom taxonomy called 'fruit' that has 'apples' as one of its values.

Essentially every time the user clicks 'next' on the carousel I want to run this query again, so changing the top carousel to show 'bananas' runs a new query for posts tagged with 'bananas' as their fruit. I hope this makes sense?

I think I might need some combination of AJAX and javascript but I'm very new to using AJAX so haven't quite got the hang of it yet. My instinct would be to store the 'homepage-fruit' as a variable using javascript each time the slider arrows are clicked, however as far as I know you can't use a javascript variable when you're making a query with PHP because of the order that everything runs, so that won't work.

Below is a code snippet of what I've got so far:

 <ul class="slider owl-carousel" id="homepagelistcarousel">

    <?php if( have_rows('homepage_fruit') ):
$query1 = new WP_Query( $args );
    while ( have_rows('homepage_fruit') ) : the_row();
$fruit = get_sub_field('fruit');
    $opener = get_sub_field('opener');
  ?>
    <li class="homepagefruitlistitem" data-fruittype="<?php echo $fruit; ?>" style="color:white;padding:20px;background-image:url('<?php the_sub_field('bg_img'); ?>')">
        <div class="openertextblock">

        <span class="post-title" style="font-size:3rem;line-height:80px;"><?php echo $fruit;?></span>
    <span class="txt-style-2" style="text-transform:none;font-size:1.5rem"><?php echo $opener; ?></span></div></li>
    <?php   endwhile;

else :

    // no rows found
wp_reset_postdata();
endif;?>
</ul>

/*owl-carousel adds nav-arrows here*/

<div id="content">
<ul class="postslider owl-carousel" id="post-carousel">
     <?php
    $query2 = new WP_Query( $args2 );
       $args2 = array(
           'post_type' => 'healthy-eating-guide',
           'category_name' => $cat_slug,
           'posts_per_page' => 10,
           'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 ),
           'tax_query' => array(
    array(
    'taxonomy' => 'fruit',
    'field' => 'name',
        'terms' => 'apples',
     )
       )
           );


        if($query2->have_posts()) :
        while($query2->have_posts()) :
        $query2->the_post();
    ?>
    <li>
        <img class="post-slider-img" data-id="<?php the_ID();?>" src="<?php the_post_thumbnail_url();?>"><a href="<?php the_permalink();?>"><span class="post-title"><?php the_title();?></span></a></li>
    <?php endwhile; endif;?>
</ul>
</div>

Edit: I should note here I'm not asking for people to do my work for me! I've just been going around in circles a bit trying to find the correct solution to this, so advice on what would be the best approach is welcomed!

I have a query that checks for a custom field set on that page and then creates a carousel to loop them with a background image.

What I then want to do, is query a post type that uses a custom taxonomy with the same values as the custom field. Basically, for example if I've set the custom field 'homepage-fruit' as 'apples', but I also have a custom taxonomy called 'fruit' that has 'apples' as one of its values.

Essentially every time the user clicks 'next' on the carousel I want to run this query again, so changing the top carousel to show 'bananas' runs a new query for posts tagged with 'bananas' as their fruit. I hope this makes sense?

I think I might need some combination of AJAX and javascript but I'm very new to using AJAX so haven't quite got the hang of it yet. My instinct would be to store the 'homepage-fruit' as a variable using javascript each time the slider arrows are clicked, however as far as I know you can't use a javascript variable when you're making a query with PHP because of the order that everything runs, so that won't work.

Below is a code snippet of what I've got so far:

 <ul class="slider owl-carousel" id="homepagelistcarousel">

    <?php if( have_rows('homepage_fruit') ):
$query1 = new WP_Query( $args );
    while ( have_rows('homepage_fruit') ) : the_row();
$fruit = get_sub_field('fruit');
    $opener = get_sub_field('opener');
  ?>
    <li class="homepagefruitlistitem" data-fruittype="<?php echo $fruit; ?>" style="color:white;padding:20px;background-image:url('<?php the_sub_field('bg_img'); ?>')">
        <div class="openertextblock">

        <span class="post-title" style="font-size:3rem;line-height:80px;"><?php echo $fruit;?></span>
    <span class="txt-style-2" style="text-transform:none;font-size:1.5rem"><?php echo $opener; ?></span></div></li>
    <?php   endwhile;

else :

    // no rows found
wp_reset_postdata();
endif;?>
</ul>

/*owl-carousel adds nav-arrows here*/

<div id="content">
<ul class="postslider owl-carousel" id="post-carousel">
     <?php
    $query2 = new WP_Query( $args2 );
       $args2 = array(
           'post_type' => 'healthy-eating-guide',
           'category_name' => $cat_slug,
           'posts_per_page' => 10,
           'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 ),
           'tax_query' => array(
    array(
    'taxonomy' => 'fruit',
    'field' => 'name',
        'terms' => 'apples',
     )
       )
           );


        if($query2->have_posts()) :
        while($query2->have_posts()) :
        $query2->the_post();
    ?>
    <li>
        <img class="post-slider-img" data-id="<?php the_ID();?>" src="<?php the_post_thumbnail_url();?>"><a href="<?php the_permalink();?>"><span class="post-title"><?php the_title();?></span></a></li>
    <?php endwhile; endif;?>
</ul>
</div>

Edit: I should note here I'm not asking for people to do my work for me! I've just been going around in circles a bit trying to find the correct solution to this, so advice on what would be the best approach is welcomed!

• php
• wp-query
• ajax

• Figured it out using Ajax! Still having some trouble getting the right attribute to pull through because it's a generated carousel, but otherwise got the linking to work. – Hannah Johnson Commented May 9, 2019 at 15:40

1 Answer 1

Solved by creating an Ajax function in functions.php and an Ajax.js file to insert the carousel, then destroying and reinitialising owl-carousel