Site icon Hip-Hop Website Design and Development

Filter custom WP_Query by first letter of a custom field – hopefully using Search and Filter Pro?

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 🙂