Performing a radial search (showing results based on location, zip code, etc) in WordPress is one of the hardest things I’ve had to figure out how to do. It held me back in many projects and was always a source of frustration.
After trying many different plugins and tutorials, I have finally come up with a working solution. Today I’m going to share that with you.
This solution includes many different components. They are as follows:
1. A PHP function to calculate the distance between two zip codes.
2. A javascript function to generate the link to our results page with given parameters.
3. The HTML form to search by our parameters.
4. Getting parameters from the URL
5. A WordPress loop to run the distance calculation on our posts.
6. Another WordPress loop to actually display our results.
As you can see it’s pretty complicated, but I’m going to break it down for you. You may notice I’m using functions like get_field or the_field in some of the PHP. Those are shortcut functions to get custom meta data from our posts and are generated from the brilliant Advanced Custom Fields plugin. You do not need to use this plugin, just be aware that you will need to alter your code to get the meta values in your situation. So let’s get to the code.
Calculating the distance between two zip codes.
Fortunately for us, Google provides a free API for looking up a ZIP code and providing the GPS coordinates. Originally I had believed that you could simply calculate the location of a ZIP code based on its value but that, as it turns out, is not how it works.
Fortunately there is a premade chunk of code that ties into Google’s API and returns those values for us. I was unable to find the original source, but there are a bunch of random sites sharing the same code. Here it is:
|
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 |
<?php // This function returns Longitude & Latitude from zip code. function getLnt($zip){ $url = "http://maps.googleapis.com/maps/api/geocode/json?address= ".urlencode($zip)."&sensor=false"; $result_string = file_get_contents($url); $result = json_decode($result_string, true); $result1[]=$result['results'][0]; $result2[]=$result1[0]['geometry']; $result3[]=$result2[0]['location']; return $result3[0]; } //Gets the distance between two zip codes function getDistance($zip1, $zip2, $unit){ $first_lat = getLnt($zip1); $next_lat = getLnt($zip2); $lat1 = $first_lat['lat']; $lon1 = $first_lat['lng']; $lat2 = $next_lat['lat']; $lon2 = $next_lat['lng']; $theta=$lon1-$lon2; $dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta)); $dist = acos($dist); $dist = rad2deg($dist); $miles = $dist * 60 * 1.1515; $unit = strtoupper($unit); //Personally I disable this line. I'm not sure why you would want to display "MILES" in all caps. if ($unit == "K"){ return ($miles * 1.609344)." ".$unit; } else if ($unit =="N"){ return ($miles * 0.8684)." ".$unit; } else{ return $miles." ".$unit; } } ?> |
As you can see, the first function, getLnt, finds the latitude and longitude of the zip code. The second function, getDistance, then calculates the distance between that and a second zip code. We will use this later to calculate the distance between two dynamic points.
Generating the parameter-filled link to our results page
Let’s set up the javascript function to generate a link to our results page. This function does a couple things. First, it gets the values from our form that we are setting up later and adds them to an array. This array is then appended to the target url and will later tell our function what values to use.
To customize this for your own use, replace the IDs with your own element’s HTML IDs. For example, your input ID for the postal code input may not be “postal_code”, so you would need to change that.
The URL at the end will need to be your results page. For me, I actually want the search page and the results page to be one and the same. All of the code I am sharing here resides on a page template, which I have selected for use on this page. It might not be the best practice, but for illustration purposes it’s the easiest to work with that way.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript"> function SubmitFrm(){ var Searchtxt = document.getElementById("country").value; window.location = "http://www.div12.org/therapist-search/?country=" + Searchtxt; } function ZipDistance(){ var URLstring = "" if (document.getElementById("postal_code").value != '') {URLstring += "&zipcode=" + document.getElementById("postal_code").value; } if (document.getElementById("SearchDistance").value != '') {URLstring +="&distance=" + document.getElementById("SearchDistance").value; } window.location = "http://www.example.com/results-page/?" + URLstring; } </script> |
The “SearchDistance” variable is one that I have set up to change the distance the user wishes to search. For example, if you only want to display results from within 50 miles, you enter it in SearchDistance.
Displaying the HTML search form
This part is pretty straight-forward. You just want to make sure that your input IDs are correct and matched up to the javascript function from earlier. I put everything in a table to keep it neat. I also added the values to these, which will get the value from the URL and repopulate the inputs with the proper value, if you have already performed a search. This is great for usability so that users don’t have to re-enter information if they wish to alter their search.
|
1 2 3 4 5 6 7 8 9 10 11 |
<h3>Results Near Me</h3> <table> <tr><td><p>Zip Code</p></td><td><p>Maximum Distance from Me (miles)</p></td></tr> <tr><td> <input name="postal_code" type="number" id="postal_code" class="field" value="<?php echo $_GET['zipcode'] ?>" /> </td><td> <input name="SearchDistance" type="number" id="SearchDistance" class="field" value="<?php echo $_GET['distance'] ?>" /> |