I updated your code there is 2-3 mistake in js file datatype and function file query parameter.
Below I paste an updated code, please check and let me know incase of any doubts.
Your album-page.php
<?php
$args = array(
'post_type' => 'albums',//Custom Post type name
'posts_per_page' => 10,
);
$query = new WP_Query($args);
$tax = 'album_category';//Custom post type taxonomy name
$terms = get_terms($tax);
$count = count($terms);
if ($count > 0):
?>
<div class="post-tags">
<?php
echo '<a href="#" class="tax-filter" title="">All</a> ';
foreach ($terms as $term) {
$term_link = get_term_link($term, $tax);
echo '<a href="' . $term_link . '" class="tax-filter" title="' . $term->slug . '">' . $term->name . '</a> ';
}
?>
</div>
<?php
endif;
if ($query->have_posts()):
?>
<div class="tagged-posts">
<?php while ($query->have_posts()) : $query->the_post(); ?>
<h2><a href="https://wordpress.stackexchange.com/questions/355730/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
</div>
<?php else: ?>
<div class="tagged-posts">
<h2>No posts found</h2>
</div>
<?php
endif;
wp_reset_postdata();
?>
Your functions.php
function ajax_filter_posts_scripts() {
// Enqueue script
wp_enqueue_script('jquery');
wp_register_script('afp_script', get_template_directory_uri() . '/assets/src/js/ajax-filter-posts.js', 'jquery', null, true);
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);
// Script for getting posts
function ajax_filter_get_posts($taxonomy) {
// Verify nonce
if (!isset($_POST['afp_nonce']) || !wp_verify_nonce($_POST['afp_nonce'], 'afp_nonce'))
die('Permission denied');
$taxonomy = $_POST['taxonomy'];
// WP Query
$args = array(
'post_type' => 'albums',//Custom Post type name
'posts_per_page' => -1,
);
if (!empty($taxonomy)) {
$args['tax_query'] = array(
array(
'taxonomy' => 'album_category',//Custom post type taxonomy name
'field' => 'slug',
'terms' => $taxonomy,
),
);
}
$query = new WP_Query($args);
if ($query->have_posts()) :
?>
<div class="tagged-posts">
<?php while ($query->have_posts()) : $query->the_post(); ?>
<h2><a href="https://wordpress.stackexchange.com/questions/355730/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
</div>
<?php
endif;
wp_reset_postdata();
die();
}
add_action('wp_ajax_filter_posts', 'ajax_filter_get_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_get_posts');
Your ajax.js
jQuery('.tax-filter').click(function (event) {
// Prevent defualt action - opening tag page
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
// Get tag slug from title attirbute
var selecetd_taxonomy = $(this).attr('title');
$('.tagged-posts').fadeOut();
var data = {
action: 'filter_posts',
afp_nonce: afp_vars.afp_nonce,
taxonomy: selecetd_taxonomy,
};
$.ajax({
type: 'post',
dataType: 'html',//Return type is html
url: afp_vars.ajaxurl,
data: data,
success: function (data, textStatus, XMLHttpRequest) {
$('.tagged-posts').html(data);
$('.tagged-posts').fadeIn();
console.log(textStatus);
console.log(XMLHttpRequest);
},
error: function (MLHttpRequest, textStatus, errorThrown) {
console.log(MLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
$('.tagged-posts').html('No posts found');
$('.tagged-posts').fadeIn();
}
})
});
Thanks.