Filter posts by Post Taxonomy in dropdown with JQuery And AJAX in wordpress

In wordpress, most of the times, we needs to filter the posts as per our requirement. Sometimes we need toÂ Filter posts by Post Taxonomy in dropdown with JQuery And AJAX in wordpress.Â So for that, we are going to give a complete tutorial. Read it from top to bottom and in the last, you guys will be able to apply your own filter. Follow these steps:

Step 1:

Make four “Post Taxonomy” in your project. You can use the code to makeÂ Post Taxonomy. If you don’t want to use code and want to make a quick succession, you can use the plugin to make customÂ Post Taxonomy. You can download it from here. (Custom post type UI).

Step 2:

Copy and paste the following code into your template file. Say your template name is: dcs_filter.php

<div class="container-fluid pad_0">
	<div class="navbar-header" id="archive-browser">
		<div style="width: 150px;float:left;">
		  <?php
		  $categories = get_categories('taxonomy=program-video&hide_empty=0'); 
		  ?>
		  <select name="cat" id="program" class="postform" >
		  	<option value="">Any Program</option>
			    <?php
		    	foreach($categories as $category)
			  	{ 
			  	?>
			        <option value= <?php echo $category->term_id ?> > 
			        	<?php echo $category->name ?>
			        </option>";
			        <?php
				}
			  ?>
		  </select>
		</div>
		<div style="width: 150px;float:left;">
			  <?php
			  $categories = get_categories('taxonomy=workout&hide_empty=0'); 
			  ?>
			  <select name="cat" id="time" class="postform" >
			  <option value="">Any Time</option>
				  <?php
				  foreach($categories as $category)
					  { 
					  ?>
					        <option value= <?php echo $category->term_id ?> > 
					        	<?php echo $category->name ?>
					        </option>";
					        <?php
					  }
				  ?>
			  </select>
		</div>
		<div style="width: 150px;float:left;">
			  <?php
			  $categories = get_categories('taxonomy=difficulty&hide_empty=0'); 
			  ?>
			  <select name="cat" id="difficulty" class="postform" >
			  <option value="">Any Difficulty</option>
				  <?php
				  foreach($categories as $category)
					  { 
					  ?>
					        <option value= <?php echo $category->term_id ?> > 
					        	<?php echo $category->name ?>
					        </option>";
					        <?php
					  }
				  ?>
			  </select>
		</div>
		<div style="width: 150px;float:left;">
			<!-- <h4>Trainer</h4>-->
			  <?php
			  $categories = get_categories('taxonomy=trainer&hide_empty=0'); 
			  ?>
			  <select name="cat" id="trainer" class="postform" >
			  <option value="">Any Trainer</option>
				  <?php
				  foreach($categories as $category)
					  { 
					  ?>
					        <option value= <?php echo $category->term_id ?> > 
					        	<?php echo $category->name ?>
					        </option>";
					        <?php
					  }
				  ?>
			  </select>
		</div>
	</div>	 
</div>

<?php

$categories = get_categories('taxonomy=program-video&hide_empty=0');

<option value="">Any Program</option>

<?php

foreach($categories as $category)

{

<?php echo $category->name ?>

</option>";

<?php

}

</select>

</div>

<?php

$categories = get_categories('taxonomy=workout&hide_empty=0');

<?php

foreach($categories as $category)

{

<?php echo $category->name ?>

</option>";

<?php

}

</select>

</div>

<?php

$categories = get_categories('taxonomy=difficulty&hide_empty=0');

<option value="">Any Difficulty</option>

<?php

foreach($categories as $category)

{

<?php echo $category->name ?>

</option>";

<?php

}

</select>

</div>

<?php

$categories = get_categories('taxonomy=trainer&hide_empty=0');

<option value="">Any Trainer</option>

<?php

foreach($categories as $category)

{

<?php echo $category->name ?>

</option>";

<?php

}

</select>

</div>

Step 3:

Now you are done with the template part. Your view for the filter is ready. Now your next job is to make some changes to the function.php file in your theme folder.

add_action( 'wp_ajax_get_posts_from_cat1', 'get_posts_from_cat1' );
add_action( 'wp_ajax_nopriv_get_posts_from_cat1', 'get_posts_from_cat1' );

function get_posts_from_cat1()
{
	extract($_POST);
	
	/* Data Comes from ajax request */

	$trainer1 = $itpro_tr1;
	$difficulty1 = $itpro_di1;
	$time1 = $itpro_du1;
	$program1 = $itpro_pr1;

	$where_array1 = array();
	if( $trainer1 )
		{
			$where_array1[] = array('taxonomy' => 'trainer1','field'=> 'id','terms'=> $trainer1);
		}
	if( $difficulty1 )
		{
			$where_array1[] = array('taxonomy' => 'difficulty1','field' => 'id','terms' => $difficulty1);
		}
	if( $time1 )
		{
			$where_array1[] = array('taxonomy' => 'workout1','field' => 'id','terms' => $time1);
		}
	if( $program1 )
		{
			$where_array1[] = array('taxonomy' => 'program-video1','field' => 'id','terms' => $program1);
		}

	$args1 = array(
				'post_type' => 'exercise-libraryies',
				'post_status' => 'publish',
				'posts_per_page' => -1,
				'order'=>'DESC', 
				'meta_key'   => 'select_program1', 
				'meta_value' => $parent_post_id1,
				'tax_query'		=> $where_array1	
		 	);

			?>


		<h3 class="red bdr-btm">Workout Videos</h3><br><br>
			<?php 
		   	/* Get Current Post Parent detail */
			$post_slug1=get_field('select_parent1');
			$parent_post_id1=$post_slug1->ID;

			$my_query1 = new WP_Query($args1);
				if( $my_query1->have_posts() ) 
					{
					while ($my_query1->have_posts()) 
						{                 
							$my_query1->the_post();

							/* Select Program ID */
							$postid1 = get_the_ID(); ?>
							
													
							<div class="col-sm-4">
								<a class="workout_video_a" href="<?php echo get_permalink($postid1); ?>"><?php 
								the_title();?></a>
							</div>
				<?php   }
					}	?>

	</table>

<?php 
}

add_action( 'wp_ajax_get_posts_from_cat1', 'get_posts_from_cat1' );

add_action( 'wp_ajax_nopriv_get_posts_from_cat1', 'get_posts_from_cat1' );

function get_posts_from_cat1()

{

extract($_POST);

/* Data Comes from ajax request */

$trainer1 = $itpro_tr1;

$difficulty1 = $itpro_di1;

$time1 = $itpro_du1;

$program1 = $itpro_pr1;

$where_array1 = array();

if( $trainer1 )

{

$where_array1[] = array('taxonomy' => 'trainer1','field'=> 'id','terms'=> $trainer1);

}

if( $difficulty1 )

{

$where_array1[] = array('taxonomy' => 'difficulty1','field' => 'id','terms' => $difficulty1);

}

if( $time1 )

{

$where_array1[] = array('taxonomy' => 'workout1','field' => 'id','terms' => $time1);

}

if( $program1 )

{

$where_array1[] = array('taxonomy' => 'program-video1','field' => 'id','terms' => $program1);

}

$args1 = array(

'post_type' => 'exercise-libraryies',

'post_status' => 'publish',

'posts_per_page' => -1,

'order'=>'DESC',

'meta_key' => 'select_program1',

'meta_value' => $parent_post_id1,

'tax_query' => $where_array1

);

<h3 class="red bdr-btm">Workout Videos</h3><br><br>

<?php

/* Get Current Post Parent detail */

$post_slug1=get_field('select_parent1');

$parent_post_id1=$post_slug1->ID;

$my_query1 = new WP_Query($args1);

if( $my_query1->have_posts() )

{

while ($my_query1->have_posts())

{

$my_query1->the_post();

/* Select Program ID */

$postid1 = get_the_ID(); ?>

<a class="workout_video_a" href="<?php echo get_permalink($postid1); ?>"><?php

the_title();?></a>

</div>

<?php }

} ?>

</table>

<?php

}

Step 4:

You are almost there. The last task is to make some jquery and ajax calls to the function which we had made in the function.php file. So add the following code into your footer.php file or you can add this code into your template file.

<script type="text/javascript">
jQuery(function() {

	jQuery("#archive-browser select").change(function() 
	{
		jQuery("#archive-pot")
			.empty()
			.html("<div style='text-align:center;padding:30px;color:red;font-size:20px;'>Please wait...<img class='loading_image' src='http://wellfityou.com/wp-content/themes/well-fit-you/user_dashboard/images/processing-icon.png'></div>");
		var trainer_id = jQuery("#trainer").val();
		var difficulty_id = jQuery("#difficulty").val();
		var time_id = jQuery("#time").val();
		var program_id = jQuery("#program").val();
		jQuery.ajax
		({
			url: ajaxurl, 
			dataType: "html",
			type: "POST",
			data: 
			{
				"itpro_tr" : trainer_id,
				"itpro_di" : difficulty_id,
				"itpro_du" : time_id,
				"itpro_pr" : program_id,
				"action" : "get_posts_from_cat"
			},
			success: function(data) 
			{
				jQuery("#archive-pot").html(data);
			}
		});
	});
});
</script>

jQuery(function() {

jQuery("#archive-browser select").change(function()

{

jQuery("#archive-pot")

.empty()

.html("<div style='text-align:center;padding:30px;color:red;font-size:20px;'>Please wait...<img class='loading_image' src='http://wellfityou.com/wp-content/themes/well-fit-you/user_dashboard/images/processing-icon.png'></div>");

var trainer_id = jQuery("#trainer").val();

var difficulty_id = jQuery("#difficulty").val();

var time_id = jQuery("#time").val();

var program_id = jQuery("#program").val();

jQuery.ajax

({

url: ajaxurl,

dataType: "html",

type: "POST",

data:

{

"itpro_tr" : trainer_id,

"itpro_di" : difficulty_id,

"itpro_du" : time_id,

"itpro_pr" : program_id,

"action" : "get_posts_from_cat"

success: function(data)

{

jQuery("#archive-pot").html(data);

}

});

</script>

Now you have working “Filter posts by Post Taxonomy in dropdown with JQuery And AJAX”