AJAX categorie dropdown filter met select2

Bron: https://rudrastyh.com/wordpress/ajax-post-filters.html

Maak het formulier om te filteren

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
          	<?php
          		if( $terms = get_terms( array( 'taxonomy' => 'category', 'orderby' => 'name', 'hide_empty' => true ) ) ) :

          			echo '<select name="categoryfilter" id="selectcat"><option value="">Select category...</option>';
          			foreach ( $terms as $term ) :
          				echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
          			endforeach;
          			echo '</select>';
          		endif;
          	?>
          	<button id="zkn">Filteren</button>
          	<input type="hidden" name="action" value="myfilter">
          </form>

Voeg de jQuery code toe en select2

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
	function matchStart(params, data) {
    params.term = params.term || '';
    if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
        return data;
    }
    return false;
  }
  $(document).ready(function() { // voeg select2 toe
    $('#zkn').hide();
  		$('#selectcat').select2({
  		  width: '300px',
  		  placeholder: "Filter op categorie",
  		  allowClear: true,
  		  matcher: function(params, data) {
  		        return matchStart(params, data);
  		    }
  		});
  	$('select#selectcat').on('select2:select', function () {
  	  $('#zkn').trigger('click');
  	});
  });
  jQuery(function($){
          	$('#filter').submit(function(){
          		var filter = $('#filter');
          		$.ajax({
          			url:filter.attr('action'),
          			data:filter.serialize(),
          			type:filter.attr('method'),
          			beforeSend:function(xhr){
          				filter.find('#zkn').text('Filteren...');
          			},
          			success:function(data){
          				filter.find('#zkn').text('Filteren');
          				$('#response').html(data); // data invoegen
                  $('.eq').matchHeight('remove'); // verwijder matchheight
                  $('.eq').matchHeight(); // voer matchheight opnieuw uit
          			}
          		});
          		return false;
          	});
          $("#selectcat").on("select2:unselecting", function(e) { // reset de dropdown en de posts bij klikken kruisje select2
            $('#selectcat').val(null).trigger('change');
          	$('#filter').submit();
          });
  });
</script>

Voeg de AJAX acties toe aan de functions.php (en het uiterlijk van de blokken)

add_action('wp_ajax_myfilter', 'misha_filter_function'); // wp_ajax_{ACTION HERE}
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');

function misha_filter_function(){
	$args = array(
		'orderby' => 'date',
		'order'	=> 'desc'
	);

	if( isset( $_POST['categoryfilter'] ) && !empty( $_POST['categoryfilter'] ) )
		$args['tax_query'] = array(
			array(
				'taxonomy' => 'category',
				'field' => 'id',
				'terms' => $_POST['categoryfilter']
			)
		);

	$query = new WP_Query( $args );
  ?> <div class="row"> <?php
	if( $query->have_posts() ) :
		while( $query->have_posts() ): $query->the_post();
    if (get_the_post_thumbnail_url()):
				$url = get_the_post_thumbnail_url();
		else:
				$url = get_field('fallback_afbeelding_nieuws','options');
		endif;
    ?>
    <div class="col-12 col-md-4 nwsblck">
               <a href="<?php the_permalink(); ?>">
               <div class="blgmg" style="background: url('<?php echo $url; ?>') no-repeat center center; background-size: cover;">
               </div>
               <div class="blgcntnt">
                 <h2 class="eq"><?php the_title(); ?></h2>
                 <date><?php echo get_the_date( get_option('date_format') ); ?></date>
               </div>
             </a>
             </div>
    <?php
		endwhile;
		wp_reset_postdata();
	else : ?>
  <div class="col-12">
    <span class="ttl">Geen posts gevonden</span>
	</div>
<?php	endif; ?>
</div>
<?php	die();
}