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!