Home Forums General Issues Filtering issues which remove images and filters on page Reply To: Filtering issues which remove images and filters on page

  • Ok, so one thing I think you need to do, is change your function (my_pre_get_posts).

    As a checkbox returns a serialised array, I believe you need to change the compare from IN to LIKE (worth double checking!):

    // append meta query
    $meta_query = [];
    $meta_query[] = array(
    	'key'       => 'film_genre',
    	'value'     => $_GET['film_genre'],
    	'compare'   => 'LIKE',

    Now, the next point to consider is returning ACF fields. Usually, if you want to get a value, you can simply use get_field.
    If you want to get the value from a specific page/post you can add in the ID (more examples can be seen here).

    The issue I think you have is that you’ve assigned the ACF fields to a custom post type and output them on an archive template (archive-film.php).
    As such, for whatever reason, when you move to the result, it doesn’t show the ACF field.

    You then can’t specify an ID against the get_field as an archive doesn’t have an ID value.

    I’ve played around with code locally but can’t seem to get it working either – unless I’m missing something.

    If it were me, I think I’d approach it differently.

    I’d use the films custom post type
    I would then use the film genre as a taxonomy

    I’d create a page called films and have a dedicated template (page-films.php for example).

    It would be far easier to query and you could also look to use AJAX.

    Something like the below. page-films.php

     * @package WordPress
     Template Name: Films
    <div class="container-fluid" id="filters">
    	<div class="row">
    		<div class="col-12 py-0">
    			<nav class="navbar navbar-expand-md navbar-fixed-top navbar-light main-nav pt-5 pb-4">
    				<div class="container">
    					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarFilters" aria-controls="navbarFilters" aria-expanded="false" aria-label="Toggle navigation">
    						<span class="navbar-toggler-icon"></span>
    					<div class="collapse navbar-collapse" id="navbarFilters">					
    					<?php if( $genres = get_terms( array( 'taxonomy' => 'genres' ) ) ) : ?>
    						<ul class="nav navbar-nav order-1 order-md-2">
    						<li class="nav-item active">
    							<a class="reset btn btn-red-outline mr-2 mb-4" href="#" sector="genre" genreid="">All</a>
    						foreach( $genres as $genre ) : ?>
    						<li class="nav-item">
    							<a class="btn btn-red-outline mr-2 mb-4" href="#" genre="" genreid="<?php echo $genre->term_id; ?>"><?php echo $genre->name; ?></a>
    						<?php endforeach;      
    						echo '</ul>';
    					</div><!-- /navbarFilters -->
    		</div><!-- /col-12 -->		
    	</div><!-- /row -->
    </div><!-- /container -->
    global $wp_query;
    $paged = get_query_var('paged') ? get_query_var('paged') : 1;
    $args = array(
    	'posts_per_page' => 12,
    	'post_type'		=> 'films',
    	'paged' 		=> $paged
    $wp_query = new WP_Query($args); ?>
    <?php if ($wp_query->have_posts()) : ?>
    <section class="container py-0">
    	<div class="row" id="ajax_filter_films">
    	<p class="filter_status"></p>
    	<?php while ($wp_query->have_posts()) : $wp_query->the_post(); $col = 'col-md-4'; ?>
    		<?php include( locate_template( 'includes/loop.php', false, false ) ); ?>
    	<?php endwhile;  ?> 
    	</div><!-- /row -->
    	<div class="row pt-3 pb-5" id="pagination">
    		<div class="col-12 col-md-8 offset-md-2">
    			<div align="center"><?php wpbeginner_numeric_posts_nav(); ?></div>
    		</div><!-- /col-md-8 -->
    	</div><!-- /row -->	    
    </section><!-- /container -->     
    <?php endif; wp_reset_query(); ?>   

    loop.php would contain whatever you need, like the post title, image and any other info.

    Then in your footer (or enqueue it), add the javaScript:

    //filter the films
    	$('#filters .btn').click(function(){
    		var genre = jQuery(this).attr("genre");	
    		var genreid = jQuery(this).attr("genreid");	
    			type        : "POST",
    			data		: { action : 'get_film_posts', genre: genre, genreid: genreid }, 
    			dataType	: "html",
    			url			: '<?php echo admin_url('admin-ajax.php');?>', 
    			success     : function(data) {
    			error       : function(xhr, status, error) {
    				var err = eval("(" + xhr.responseText + ")");
    		return false;

    Finally, in your functions file:

    function get_film_posts() {
    	$genre_id = $_POST['genreid'];
    	$genre = $_POST['genre'];
    	if( $sector ) {
    		$terms = get_terms( $genre ); 
    		$genre_id = wp_list_pluck( $terms, 'term_id' );
    	$args = array(
    			'post_type' 		=> 'films',
    			'post_status'		=> 'publish',
    			'posts_per_page'	=> -1, // show all posts.
    			'order'				=> 'DESC',
    	$args['tax_query'] = array(
    		'relation' 		=> 'OR', 
    			'taxonomy'	=> 'genres',
    			'field'		=> 'term_id',
    			'terms'		=> $genre_id
    	$query = new WP_Query( $args );
    	if( $query->have_posts() ) : 
    		while( $query->have_posts() ): $query->the_post(); $col = 'col-md-4';	
    			include( locate_template( 'includes/loop.php', false, false ) );
    		endwhile;  wp_reset_postdata();
    // Fire AJAX action for both logged in and non-logged in users
    add_action('wp_ajax_get_film_posts', 'get_film_posts');
    add_action('wp_ajax_nopriv_get_film_posts', 'get_film_posts');

    That should then get you somewhere!