Hi Dev,

Today, i we will show you sort by filter in wordpress. This article will give you simple example of sort by filter in wordpress. you will sort by filter in wordpress. In this article, we will implement a sort by filter in wordpress.

So let’s follow few step to create example of sort by filter in wordpress.

Example

<div class="filter-wrap">
   

    <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>

<div class="filtered-posts">
<?php
 $args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'DESC'
);
$the_query = new WP_Query( $args );

if ($the_query->have_posts() ) :
	while ($the_query->have_posts() ) : $the_query->the_post();
?>

<h3><?php the_title(); ?></h3>


<?php
	endwhile;
endif;
 
?>
</div>


<script>

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 : 'http://localhost/encorearc/wp-admin/admin-ajax.php',
			data : data,
			type : 'POST',
            success: function (response) {
                        alert(response);
                    },
                    fail: function (err) {
                        alert("There was an error: " + err);
                    },
			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.' );
				}
			}
		});
	});
});
</script>

function.php

/*------------------*/

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,
        'meta_key' => 'date_of_auction',
        'paged' => $paged,
        
		
	);

	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();
            the_title();
        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' );

I hope it will assist you…