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 :)
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 :)
If Search and Filter Pro doesn't help with this out of the box, it will take more effort to achieve this.
What I would do:
Move query to a separate function that would stay in functions.php file. It would return query results (example bellow).
function theme_prefix_return_professionals($type = 'professionals', $fid = '204') {
$letter = '';
$post_type = $type;
$filter_id = $fid;
$args = array(
'post_type' => $post_type,
'post_status' => 'publish',
'search_filter_id' => $filter_id
);
$query = new WP_Query($args);
return $query;
}
Hook this function in ajax_priv and ajax_no_priv.
Have a jQuery function to trigger on letters click and pass letter the function (function would need to be extended for that, also use some best practices as nonce checking and so on).
Once action is triggered with the help of jQuery, we add new parameter to $args, so function would extend to something like that:
function theme_prefix_return_professionals($type = 'professionals', $fid = '204') {
$letter = '';
$post_type = $type;
$filter_id = $fid;
$args = array(
'post_type' => $post_type,
'post_status' => 'publish',
'search_filter_id' => $filter_id
);
if ($_POST['letter']) {
$letterVal = '^' . $_POST['letter'];
$args['meta_query'][] = array(
'key' => 'proffesional_surename',
'value' => $letterVal,
'compare' => 'REGEXP',
);
}
$query = new WP_Query($args);
return $query;
}
Then we update the div with returned query data (most likely returned as JSON).
There's a lot more to this, like security concerns (escaping values, adding and checking for nonce, returning JSON) but this would require me to solve the issue for you and spend a good hour on it.
Hopefully I helped you enough to figure this out on your own and it should give you an idea of how to approach this.