The first thing you need to do is to write some HTML for category and publish date select box. This can be added to a custom template or your home page index.php file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="filter-wrap"> <div class="category"> <div class="field-title">Category</div> <?php $get_categories = get_categories(array('hide_empty' => 0)); ?> <select class="js-category"> <option value="all">All</option> <?php if ( $get_categories ) : foreach ( $get_categories as $cat ) : ?> <option value="<?php echo $cat->term_id; ?>"> <?php echo $cat->name; ?> </option> <?php endforeach; endif; ?> </select> </div> <div class="date"> <div class="field-title">Sort by</div> <select class="js-date"> <option value="new">Newest</option> <option value="old">Oldest</option> </select> </div> </div> |
Now, when we have HTML ready, we also need to show some latest blog posts.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="filtered-posts"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content-post' ); endwhile; endif; ?> </div> |
Create a file called content-post.php in template-parts directory. If this directory doesn’t exist, then create it. We’ll be showing the title of the post and linking to it.
|
1 2 3 |
<article id="post-id-<?php the_id(); ?>" <?php post_class('clearfiks archive-post'); ?>> <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3> </article> |
Add this JavaScript code to your theme’s javascript file. This code filters out the posts by category and publish date under AJAX. The request is sent to ajax_filterposts_handler PHP function, then response is delivered by JavaScript (jQuery).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
jQuery(document).ready(function($){ jQuery( ".js-category, .js-date" ).on( "change", function() { var category = $( '.js-category' ).val(); var date = $( '.js-date' ).val() data = { 'action': 'filterposts', 'category': category, 'date': date }; $.ajax({ url : ajaxurl, data : data, type : 'POST', beforeSend : function ( xhr ) { $('.filtered-posts').html( 'Loading...' ); $('.js-category').attr( 'disabled', 'disabled' ); $('.js-date').attr( 'disabled', 'disabled' ); }, success : function( data ) { if ( data ) { $('.filtered-posts').html( data.posts ); $('.js-category').removeAttr('disabled'); $('.js-date').removeAttr('disabled'); } else { $('.filtered-posts').html( 'No posts found.' ); } } }); }); }); |
Finally, the PHP part. Add this to your functions.php file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
function ajax_filterposts_handler() { $category = esc_attr( $_POST['category'] ); $date = esc_attr( $_POST['date'] ); $args = array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => -1, 'orderby' => 'date', 'order' => 'DESC' ); if ( $category != 'all' ) $args['cat'] = $category; if ( $date == 'new' ) { $args['order'] = 'DESC'; } else { $args['order'] = 'ASC'; } $posts = 'No posts found.'; $the_query = new WP_Query( $args ); if ( $the_query->have_posts() ) : ob_start(); while ( $the_query->have_posts() ) : $the_query->the_post(); get_template_part( 'template-parts/content-post' ); endwhile; $posts = ob_get_clean(); endif; $return = array( 'posts' => $posts ); wp_send_json($return); } add_action( 'wp_ajax_filterposts', 'ajax_filterposts_handler' ); add_action( 'wp_ajax_nopriv_filterposts', 'ajax_filterposts_handler' ); |
Hey,
I did this for custom taxonomy with custom post type
‘categorie’,
‘orderby’ => ‘name’,
‘order’ => ‘ASC’,
‘hide_empty’ => 0
);
$get_categories = get_categories($args); ?>
but its not working it filter all posts every time.
hi, i am trying your method of filtering posts, when i filter it shows loading and nothing happen area goes blank
Ajax not working nothing changes when clicking on new category name
Ajax not working after changing category name