This tutorial will show you how to build and add an "Order by" filter drop-down menu for your GEO my WP's "Posts Locator" search forms. Using this feature the visitors of your site will be able to order search results by other values than the default "Distance" value which GEO my WP provides out of the box.
This feature is made out of two part:
- Orderby Drop-down Select box - The drop-down menu that will present the choices for the user
- GEO my WP Query filter - This is where we modify the search query of GEO my WP
This features works similar to other features of GEO my WP search form. Once the search form is submitted The selection made by a user is being sent from the form to the URL and after page reload the value is pulled back when the search query filter is being executed and order results based on that value.
Creating the Order-by Drop-down Menu
Creating the Drop-down select box with the options of the Order-by is as simple creating a normal HTML select box. Using GEO my WP search queries we will be able to order results by: distance, post title ( alphabetically ), post date, post ID and random results. You can choose to display any or all of the options.
For this tutorial I will create a select box with the CLASS tag of gmw-orderby-dropdown and NAME tag gmw_orderby. However, you can use any other values for the CLASS or NAME tags.
We will also wrap the select-box within a function so it will be easy for us to use it in any of the search forms. All we will have to do is add the function to a search form or we could dynamically call it by using a hook.
Note, the "selected" check that we do to make sure that the value selected when submitting the form is the value will be also selected after page load. Also see how the value of the default item in the select-box, which is "Order By", is set to "distance". This value will be served as the default value when a user does not choose any value from the drop-down select-box. We want to make sure that even when nothing was selected our query will still get a value and order results by that. You can change the default value to any other value.
Our drop-down is pretty much ready now and we can place it in the functions.php file of our theme/child theme. In order to display it in our search form we can simply add the function:
anywhere in any of our search forms template file or we could use one of the default action hooks which comes with the search forms. For this example I will use the action hook:
to place the select-box just above the radius select-box. To do so we will add the action hook just below our select-box function in the functions.php file:
Now you should see the orderby select-box we created when viewing the search form. If you do not see the select-box you might be missing the action hook in your search form. Make sure it is there and if not you can add it.
The second part of the code we will create the function that will filter the search query and order results based on the value submitted using the select-box we created.
to do so we will use the filter:
which can be found in the file:
Using this filter we can modify the search query before it is being executed. The filter is made of "clauses" ( fields, group by,orderby... ) when each clause responsible for a part of the query.
For the purpose of our tutorial we will modify the "orderby" clause. Below is the piece of code that will filter the search query and will order results based on the value which was submitted together with the form. You can follow the marks along the lines of code to understand better how it works. And do not forget to place the function below in the function.php file of your theme:
That is it. Now you can give the visitors of your site the ability to order results by other values than distance.