For several hours I have been searching for the solution to my problem, I have created a custom post 'work' with an 'expertise' taxonomy and I want to display my posts and add a filter by taxonomy. The code below works well but instead of loading in the same page the result of the filter it opens me each time a new page. I have tried several ways to achieve this result but I still have this problem so I come to wonder if the problem is not elsewhere, my file to display my custom posts maybe?
archive-work.php
<?php
/**
* Template Name: Work List
*
*/
get_header();
the_post();
?>
<section class="headerpage">
<div class="head" >
<div class="container">
<div class="col-md-7">
<h1><?php echo get_the_title( 14 ); ?></h1>
<?php echo '<p class="subtitle">'. get_secondary_title( 14 ) .'</p>';?>
</div>
</div>
</div>
</section>
<div class="container filters-projects-wrap">
<div>
<span class="small-text">FILTER BY</span>
</div>
<div>
<ul class="filters-projects-ul">
<li><a href="<?php echo esc_url( home_url( '/projects/' ) ); ?>">ALL</a></li>
<?php $categories = get_categories('taxonomy=expertises&post_type=work'); ?>
<?php foreach ($categories as $category) : ?>
<li><a class="projects-filter" href="<?php echo get_term_link($category->cat_ID); ?>"><?php echo $category->name; ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<div class="projects-results">
<?php $res = my_get_posts();
echo $res['response'];
?>
</div>
<?php get_footer(); ?>
functions.php
function ajax_filter_posts_scripts() {
// Enqueue script
wp_register_script('afp_script', get_template_directory_uri() . '/assets/js/work.js', false, null, false);
wp_enqueue_script('afp_script');
wp_localize_script( 'afp_script', 'afp_vars', array(
'afp_nonce' => wp_create_nonce( 'afp_nonce' ), // Create nonce which we later will use to verify AJAX request
'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
)
);
}
add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);
function ajax_filter_get_posts( $taxonomyproject ) {
// Verify nonce
if( !isset( $_POST['afp_nonce'] ) ||
!wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' ))
die('Permission denied');
$taxonomyproject = $_POST['expertises'];
$result = json_encode(my_get_posts($taxonomyproject, true));
echo $result;
die();
}
function my_get_posts($taxonomyproject = '', $ajax = false){
// WP Query
$args = array(
'post_type' => 'work',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'expertises',
)
)
);
// If taxonomy is not set, remove key from array and get all posts
if( !$taxonomyproject ) {
unset( $args['tax_query'] );
}
$query = new WP_Query( $args );
$html = '';
$items = array();
if ( $query->have_posts() ) :
while ( $query->have_posts() ) :
$query->the_post();
$res = '<div class="col-lg-4">'.
'<a href="'.get_permalink().'">'.
'<article class="panel panel-default" id="post-'.get_the_id().'">'.
'<div class="panel-body">'.
get_the_post_thumbnail().
'<div class="panel-cover">'.
'<h3>'.get_the_title().'</h3>'.
get_the_content().
'</div>'.
'</div>'.
'</article>'.
'</a>' .
'</div>';
$ajax ? $items[] = $res : $html .= $res;
endwhile;
$result['response'] = $ajax ? $items : $html;
$result['status'] = 'success';
else:
$result['response'] = '<h2>No posts found</h2>';
$result['status'] = '404';
endif;
wp_reset_postdata();
return $result;
}
work.js
data = {
action: 'filter_posts', // function to execute
afp_nonce: afp_vars.afp_nonce, // wp_nonce
post_type: "work", // selected tag
};
$.ajax({
type: "post",
dataType: "json",
url: afp_vars.afp_ajax_url,
data: data,
success: function(data, textStatus, XMLHttpRequest) {
console.log(data);
// Restore div visibility
$('.projects-results').fadeOut()
.queue(function(n) {
$(this).html(data.response);
n();
}).fadeIn();
},
error: function( XMLHttpRequest, textStatus, errorThrown ) {
/*console.log( MLHttpRequest );
console.log( textStatus );
console.log( errorThrown );*/
$('.projects-results').fadeOut()
.queue(function(n) {
$(this).html("No items found. ");
n();
}).fadeIn();
}
});
});
});