How to Sort a Query Loop Depending on Dropdown Selection

I have a query loop that I’d like to be able to sort depending on whether or not a dropdown is selected. I planned on just having two loops on the page, one sorted in ascending and the other in descending, and then having their render logic be tied to a value of the HTML field.

I expected the code to be something like:
If element ID === new query loop && value_of_dropdown === newest_first:
render

if element ID === old query loop && value_of_dropdown === oldest_first:
render

I am new to web development but my understanding is that the issue is that the HTML doesn’t have any way of communicating the update because the PHP is run on the server side without a POST request. What are my options in order to make this work?

I’m also messed around with this but ran into the same problem of not being able to get the value of the HTML

Here’s a quick and easy way of doing it without needing two loops. It does refresh the page though:

  1. Create two buttons (ASC + DESC or whatever you want to call them)
  2. Link one to ?c_sort=asc
  3. Link the other to ?c_sort=desc
  4. Catch the query value and sort accordingly by putting something like this in your child theme functions.php file
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {

  // If the url query parameter c_sort is set, let's sort the query
  // URL query being like: domain.com/products/?c_sort=asc
  if ( isset( $_GET['c_sort'] ) ) {

    // Tells the query to sort by title, you can also choose other
    // parameters to sort by (like date, author, category, etc)
    $query_vars['orderby'] = 'title';

    // If c_sort is equal to asc, order the query ascending
    // This is a short form if statement without the brackets
    if ( $_GET['c_sort'] == 'asc') $query_vars['order'] = 'ASC';

    // If c_sort is equal to desc, order the query decending
    // This is a long form if statement with the brackets
    if ( $_GET['c_sort'] == 'desc') {
      $query_vars['order'] = 'DESC';
    }
  }

  // This returns the modified query_vars back to the query
  return $query_vars;

// The 11 is the order of priority that this filter will be run in.
// A higher number means it will run later in the code. Bricks
// uses 10 for most queries, so 11 ensures that our code
// overrides the Bricks code.

// The 3 just indicates to the filter that there are 3 arguments
// to this filter: $query_vars, $settings, $element_id
}, 11, 3 );

If you want the sorting to only affect a certain query loop on your website, you’ll want to get the id of the query loop and modify the above code slightly like so:

 if ($element_id === 'cbmpkc' && isset( $_GET['c_sort'] ) ) {
3 Likes

Thanks for the hasty response, I haven’t worked on this since you posted.

First, thank you so so much. You saved me $150 bucks. I hired someone to do this but his method was so bloated and had like 5 different functions and he never finished it. So I’ll be able to get my money back. If you have a paypal I’ll shoot you a couple of bucks.

Second what does the }, 11, 3 ); mean in the last line?

Third could you help confirm my understanding of what is going on? Is this block saying: for all query loops, if this variable is set, sort it like this?

This really helped me understand how a lot of this all works better and had made me so much more independent moving forward. Thank you so much.

Hey!

I’m sorry things with your developer didn’t work out. :frowning:

I appreciate the offer, but I don’t need any payment. I’m just here to help.

You’ll see I commented the code above quite a bit. I hope that helps, but if you have any more questions, definitely reach out and I’ll do what I can to help.

2 Likes

The comments are great and I’m sure others will get a lot of value out of this post. I got the HTML part of it setup so the sorting is done! Thank you so much again.

The last thing that I need to figure out before I am completed with backend stuff is figuring out a search function. I tried to model a filter similar to the solution you provided for a search bar instead. I tried figuring out what the wordpress query var would be that would function something like the following if it was written in python.

for post in query:
   if search_string not in post.title:
     query.remove(post)

I know this is wrong, but I was going down a road of trying out different query vars seeing if any of them worked the way I wanted it to. I was gonna then have the search button send the contents of a field to the “search_string” variable. I’m a Linux admin pretending to be a developer for a personal project so I have no idea what I’m doing :stuck_out_tongue:

add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( isset( $_GET['search_string'] ) ) {
		$query_vars['search'] = $_GET['search_string'];
	}
	return $query_vars;

Hey!

I think you’re looking for something like the ‘s’ query. Be careful though. When you directly use user submitted data without sanitizing it, bad things can happen. I think technically wordpress does the heavy lifting and sanitizes for you, but don’t quote me on that. I haven’t done the digging myself to verify.

If you use the built in Wordpress search query and associated function, it’ll take care of all the sanitizing for you. So your url would have to look something like this:
domain.com/?s=keyword

and then you should be able to collect it like this.

$query_vars['s'] = get_search_query();

Here’s a link to where I found the info about the search query:

You’ll find other query related information there as well. :slight_smile:

Here’s a little info about the security of it:

1 Like

Seems like you are really looking for a Sort Facet. Where you just have one loop showing the results and a drop down or radio buttons,say, on the page to swap between ascending/descending.
You can do that with either WP Gridbuilder or FacetWP. Obviously at a cost though which may make them a non starter.
Alan

1 Like

I made good progress with your solution but the search feature isn’t something I expect people will use often so I’m not going to worry about it too much. I didn’t realize that bricks had a built in search element so I am just going to go with that. Thank you so much for everything else though! You’ve been incredibly helpful

Lol I guess I could have told you that. I just assumed you were looking to learn or do something a little differently.

Either way, I’m glad you got things figured out. :slightly_smiling_face:

Nice post! How would I extend the code if I want to sort by a value in a custom field? This field contains video views and I want to show videos with most views to least views…