How to get the post of selected subcategory only - wordpress

Question

I have three drop-down select option. Inside each drop-down, I have shown the Sub-category for example shown below.
Service
Mobile development
Web development
Software development
Technology
Android
IOS
Java
Industry
Commerce
Education
Lifestyle
Here Service, Technology, and Industry are the category of CPT and inside it like Mobile Development, IOS and Commerce are the sub-categories of the main category.
Now what I want to do on change of any of the three category show post of that sub-category only.
For example, if I select IOS then show the post of IOS only similar with others if the user selects IOS, Mobile Development, and Lifestyle then show post of all three.
To achieve this I have to use the change jQuery function and calling the ajax on change event. The problem is I am getting the same post for all the post select please help me through it.

Answer 1

You Can achieve this by Following this -
Firstly You Register a Custom Post Type like 'Course' in my Code.
Then you need to Add Custom Taxonomy For this like 'Course Type' in my Code.
Then get All Posts with using Page Template or Any other method which you are followed.
I add this code in my Page Template then attach those Page Template to a Page, Here i get all posts when page reload with thre Select boxes for Parent Terms like 'Service', 'Technology', 'Industry' -
<div class="course_content">
<?php $parent_terms = get_terms( 'course_type', array( 'parent' => 0 ) );
foreach( $parent_terms as $parent_term ){
$children_terms = get_terms('course_type', array('parent' => $parent_term->term_id) );
if($children_terms){
?>
<select class="select_course_type <?php echo 'course_type-'.$parent_term->slug; ?>">
<option value=""><?php echo 'Select '.$parent_term->name; ?></option>
<?php
foreach( $children_terms as $children_term ){
echo '<option value="'.$children_term->slug.'">'.$children_term->name.'</option>';
}
?>
</select>
<?php
}
}
?>
<input type="hidden" value="" id="selected_course_type" />
<div class="display_posts">
<?php
$args = array(
'post_type' => 'course',
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) :
echo '<ul>';
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li>
<h4><?php the_title() ;?></h4>
</li>
<?php endwhile;
echo '</ul>';
endif;
wp_reset_query(); ?>
</div>
</div>
Then you add jquery code in your JS File For Calling Ajax, like this -
$('.select_course_type').on('change', function(){
var s = $(this).val();
$("option", this).removeAttr('selected');
$("option[value='" + s + "']", this).attr('selected', 'selected');
ct_Array = [];
$('.select_course_type').each(function(){
var t = $(this).val();
if(t != ''){
ct_Array.push($(this).val());
}
});
var ajax_url = FrontAjax.ajaxurl;
data = {
action: 'ajax_filter_for_courses',
s_ctValues: ct_Array,
};
$.post( ajax_url, data, function(response) {
if( response ){
$('.display_posts').html(response);
}
});
});
Then add this code in Functions.php File for getting Posts after Filter-
add_action('wp_ajax_nopriv_ajax_filter_for_courses', 'filter_for_courses');
add_action('wp_ajax_ajax_filter_for_courses', 'filter_for_courses');
function filter_for_courses() {
$explode_ct = $_POST['s_ctValues'];
$tax_query = array();
if(isset($explode_ct)) {
$tax_query[] = array(
'taxonomy' => 'course_type',
'field' => 'slug',
'terms' => $explode_ct
);
}
$args = array(
'post_type' => 'course',
'tax_query' => $tax_query
);
$filter_query = new WP_Query( $args );
if ( $filter_query->have_posts() ) {
echo '<ul>';
while ( $filter_query->have_posts() ) : $filter_query->the_post();
?>
<li>
<h4><?php the_title() ;?></h4>
</li>
<?php
endwhile;
echo '</ul>';
}
wp_reset_query();
die(); //stop "0" from being output
}

Answer 2

$posts_array = get_posts(
array(
'posts_per_page' => 6,
'post_type' => 'acme_portfolio',
'tax_query' => array(
array(
'taxonomy' => 'portfolio_category',
'field' => 'term_id',
'terms' => array($post_id),
)
)
));
Put this in function.php