Hi Dev,

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

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

Example 1:- Search by Category

<?php if ( is_search() && is_category() ) { ?>

	<select name="sort-posts" id="sortbox" onchange="document.location.href='?s=<?php the_search_query(); ?>&cat=<?php echo $_GET['cat'] ;?>&'+this.options[this.selectedIndex].value;">

<?php } elseif ( is_category() || is_archive() ) { ?>

	<select name="sort-posts" id="sortbox" onchange="document.location.href='?'+this.options[this.selectedIndex].value;">

<?php } else { ?>

	<select name="sort-posts" id="sortbox" onchange="document.location.href='?s=<?php the_search_query(); ?>&'+this.options[this.selectedIndex].value;">

<?php } ?>

		<option value="" disabled>Sort by</option>
		<option value="orderby=date&order=dsc">Newest</option>
		<option value="orderby=date&order=asc">Oldest</option>
		<option value="orderby=title&order=asc">Title Asc</option>
		<option value="orderby=title&order=dsc">Title Desc</option>
		<option value="orderby=comment_count&order=dsc">Most Comments</option>
		<option value="orderby=comment_count&order=asc">Least Comments</option>

	</select>

<script type="text/javascript">

	<?php if (( $_GET['orderby'] == 'date') && ( $_GET['order'] == 'dsc')) { ?>
		document.getElementById('sortbox').value='orderby=date&order=dsc';
	<?php } elseif (( $_GET['orderby'] == 'date') && ( $_GET['order'] == 'asc')) { ?>
		document.getElementById('sortbox').value='orderby=date&order=asc';
	<?php } elseif (( $_GET['orderby'] == 'title') && ( $_GET['order'] == 'asc')) { ?>
		document.getElementById('sortbox').value='orderby=title&order=asc';
	<?php } elseif (( $_GET['orderby'] == 'title') && ( $_GET['order'] == 'dsc')) { ?>
		document.getElementById('sortbox').value='orderby=title&order=dsc';
	<?php } elseif (( $_GET['orderby'] == 'comment_count') && ( $_GET['order'] == 'dsc')) { ?>
		document.getElementById('sortbox').value='orderby=comment_count&order=dsc';
	<?php } elseif (( $_GET['orderby'] == 'comment_count') && ( $_GET['order'] == 'asc')) { ?>
		document.getElementById('sortbox').value='orderby=comment_count&order=asc';
	<?php } else { ?>
		document.getElementById('sortbox').value='orderby=date&order=desc';
	<?php } ?>

</script>

Example 2:- Without Search by Category

<?php if ( is_search() ) { ?>

	<select name="sort-posts" id="sortbox" onchange="document.location.href='?s=<?php the_search_query(); ?>&'+this.options[this.selectedIndex].value;">

<?php } else { ?>

	<select name="sort-posts" id="sortbox" onchange="document.location.href='?'+this.options[this.selectedIndex].value;">

<?php } ?>

		<option value="" disabled>Sort by</option>
		<option value="orderby=date&order=dsc">Newest</option>
		<option value="orderby=date&order=asc">Oldest</option>
		<option value="orderby=title&order=asc">Title Asc</option>
		<option value="orderby=title&order=dsc">Title Desc</option>
		<option value="orderby=comment_count&order=dsc">Most Comments</option>
		<option value="orderby=comment_count&order=asc">Least Comments</option>

	</select>

<script type="text/javascript">

	<?php if (( $_GET['orderby'] == 'date') && ( $_GET['order'] == 'dsc')) { ?>
		document.getElementById('sortbox').value='orderby=date&order=dsc';
	<?php } elseif (( $_GET['orderby'] == 'date') && ( $_GET['order'] == 'asc')) { ?>
		document.getElementById('sortbox').value='orderby=date&order=asc';
	<?php } elseif (( $_GET['orderby'] == 'title') && ( $_GET['order'] == 'asc')) { ?>
		document.getElementById('sortbox').value='orderby=title&order=asc';
	<?php } elseif (( $_GET['orderby'] == 'title') && ( $_GET['order'] == 'dsc')) { ?>
		document.getElementById('sortbox').value='orderby=title&order=dsc';
	<?php } elseif (( $_GET['orderby'] == 'comment_count') && ( $_GET['order'] == 'dsc')) { ?>
		document.getElementById('sortbox').value='orderby=comment_count&order=dsc';
	<?php } elseif (( $_GET['orderby'] == 'comment_count') && ( $_GET['order'] == 'asc')) { ?>
		document.getElementById('sortbox').value='orderby=comment_count&order=asc';
	<?php } else { ?>
		document.getElementById('sortbox').value='orderby=date&order=desc';
	<?php } ?>

</script>

I hope it will assist you…