I know this is a big ask for you guys, but i can’t seem to figure this out.
I found this page : http://www.bobz.co/ajax-filter-posts-tag/#comment-28112
it shows how to make a dynamic filter for post tags.
I wanted to change it to post categories, but i can’t seem to get it working.
I placed this code in my functions.php
function ajax_filter_posts_scripts() {
// Enqueue script
wp_register_script('afp_script', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.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);
// 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(
'category_name' => $taxonomy,
'post_type' => 'post',
'posts_per_page' => 10,
);
// If taxonomy is not set, remove key from array and get all posts
if( !$taxonomy ) {
unset( $args['category_name'] );
}
$query = new WP_Query( $args );
if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php else: ?>
<h2>No posts found</h2>
<?php endif;
die();
}
add_action('wp_ajax_filter_posts', 'ajax_filter_get_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_get_posts');
and then in my actual page template i put this code:
//in my template file
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
);
$query = new WP_Query( $args );
function tags_filter() {
$tax = 'category';
$terms = get_terms( $tax );
$count = count( $terms );
if ( $count > 0 ): ?>
<div class="post-tags">
<?php
foreach ( $terms as $term ) {
$term_link = get_term_link( $term, $tax );
echo '<a href="' . $term_link . '" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="tax-filter" title="' . $term->slug . '">' . $term->name . '</a> ';
} ?>
</div>
<?php endif;
}
when i load my page template the site loads my content and shows category filter buttons, but when i click any of the buttons, returns “No Posts found”.
This leads me to believe i did something wrong with my functions file, but i can’t figure it out.
Can anyone see something i’ve done wrong here?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
Not sure if you’ve solved this or not but I was looking for a way to embed this within a page and filter posts by category.
I got this working so it displays all categories and the posts related. Put that in functions.php
function ajax_filter_posts_scripts() {
// Enqueue script
wp_register_script('afp_script', get_template_directory_uri() . '/js/ajax-filter-posts.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);
// 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(
'category_name' => $taxonomy,
'post_type' => 'post',
'posts_per_page' => 10,
);
echo $taxonomy;
// If taxonomy is not set, remove key from array and get all posts
if( !$taxonomy ) {
unset( $args['tag'] );
}
$query = new WP_Query( $args );
if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php else: ?>
<h2>No posts found</h2>
<?php endif;
die();
}
add_action('wp_ajax_filter_posts', 'ajax_filter_get_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_get_posts');
Then, add this in your page template:
<?php $args = array(
'post_type' => 'post',
'posts_per_page' => 10,
);
$query = new WP_Query( $args );
$tax = 'category';
$terms = get_terms( $tax );
$count = count( $terms );
if ( $count > 0 ): ?>
<div class="post-tags">
<?php
foreach ( $terms as $term ) {
$term_link = get_term_link( $term, $tax );
echo '<a href="' . $term_link . '" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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="<?php the_permalink(); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><?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; ?>
Hope that helps solve your problems!
Method 2
In the tags_filter change this
$tax = ‘post_tag’;
to this
$tax = ‘category’;
Then in the WP Query change this
‘tag’ => $taxonomy,
to this
‘category’ => $taxonomy,
Works fine for me…
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0