I have a custom WP_query that very simply filters a custom post type:
<?php $query = new WP_Query(
array(
'post_type' => 'professionals',
'search_filter_id' => '204'
) );
?>
and the output looks like:
<div id="results">
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-md-3">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="<?php the_field(thumbnail_image);?>">
</div>
<div class="back">
<h2><?php the_title(); ?></h2>
<h4 class="flip-bottom"><?php the_field('position'); ?><br><?php the_field('telephone'); ?></h4>
</div>
</div>
</div>
<div class="pro-meta"><?php the_title(); ?><br>
<?php the_field('position'); ?></div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php else : ?>
No results
<?php endif; ?>
</div>
This outputs exactly as I want it (It has a flip animation on hover, but ignore that bit!).
I then use Search and Filter Pro to add Filter drop-downs for some Custom Fields: Practice, Position + Law School. These fields are added to the post type via Advanced Custom Fields Pro.
This updates the WP_Query via ajax, updating the #results container results. This also works nicely.
However, I also want to filter the query by the first letter of a custom field. I have attached a screenshot of the filter I want to code in…
It’s basically all the letters of the alphabet, and on click of one of those letters, it updates WP_Query to filter the results (using Ajax) to only show those that have the first letter of their surname match. So if I clicked “D”, it would show results for those that have the surname beginning with D. “Surname” is a custom field set in the post type also.
I don’t think this is possible within the Search and Filter Pro plugin (?) so probably looking for a solution that is coded into the archive-postype.php file, but that still works with the Plugin filters that already exist!
Thanks 🙂