The rise of the smartphone has been good for WordPress developers. Millions of clients have used WordPress to transition to mobile and grow their businesses.
But going mobile is a double-edge sword. As clients go mobile they get more sophisticated and want to take full advantage of smartphone features – but WordPress doesn’t support many of these out-of-the-box.
So what do you do when a client says:
I want a customer to see nearby stores on their phone!
Or something similar? How can you make sure that you win the job rather than an app developer?
In this article I’m going to quickly go over how location – a core mobile capability – works and what your options are using WordPress. You can deliver mobile store finders, travel guides, event finders, etc. – but you’ll almost certainly want to use a plugin.
Let’s dive in.
In order to take advantage of mobile location, you need to be able to do four things:
- Have content corresponding to locations
- Get the user’s current location
- Search for nearby content
- Serve up the results in a mobile-friendly way
In practice, you’re likely going to use one plugin to do all of this for you rather than a separate plugin for each step. I’ll show you some examples.
Content & Location
Before you do anything you need to decide on what sort of content is going to have location attached to it.
Does a page or post correspond to a unique location (e.g., a restaurant to avoid at all costs) or can a post contain multiple locations (e.g., the many things to do near Poughkeepsie)?
MapPress Easy Google Maps is a plugin that will put a map within a post and that map can contain multiple locations:
Compare this with the Placeling plugin (disclosure: I’m a co-founder) where each page or post corresponds to one place.
Both of these plugins allow you to type locations as free text (e.g., “Starbucks” or “Broadway & 1st”) and use Google Maps to convert the text into a latitude and longitude. This process is called “geocoding” and was tough to do until Google came along.
Run away from any plugin that requests you enter a latitude and longitude manually; 2003 called and wants its Internet back.
Getting The User’s Location
Now we’ve got the content; let’s figure out where Mrs. User is.
There are exactly three ways available to you as a developer to get a user’s location.
The traditional way was to have the user type it in. You’d ask for their zip code or similar and then convert it to a latitude and longitude by either doing a database search or calling Google Maps.
Modern web browsers let us skip this step. You can request that the browser share the user’s current location (behind the scenes it’ll use fancy things like GPS, cellphone and wifi triangulation and passenger pigeon to figure this out). This works on all mobile browsers and most desktop browsers (unsurprisingly, IE8 and prior are the holdouts).
A tutorial on how to do this is beyond the scope of this article, but look for a plugin that handles it for you. For example, Placeling includes a “nearby” button that requests the user’s location and updates the map appropriately:
The final option you have is to convert the user’s IP address into a latitude and longitude. There are companies that sell databases matching IP addresses to locations, but I don’t recommend you do this. The accuracy for these addresses is “miles” whereas browser location is accurate to “yards.” IP address lookup won’t work well for your mobile users.
Once you know a user’s location the next logical step is to ask which of your location-tagged content is nearby. Sounds easy but actually hard to do.
WordPress runs on MySQL which doesn’t do spatial queries (the fancy database term for location-based searches) easily in its default configuration. The geniuses at StackExchange show how to get around this, but it’s for experts only.
Ideally a plugin will do the search for you. For example, MapPress’ Pro version can aggregate all of your maps into one big map; scrolling it effectively shows nearby places. Alternatively, Placeling hosts your locations in the cloud and queries a web service to figure out what’s around a user.
All of these solutions are a little “hacky” as they go outside the core WordPress framework. However, they all work and let us deliver projects for clients; hopefully a future upgrade to WordPress will include a native API for location-based searches. But don’t lose business in the meantime.
The last step is showing the results to the user. Do you show nearby places as a map or a list? And do you vary this via mobile vs. desktop?
Lists take less time to render but give the user no sense of direction-an important consideration if they’re accessing via a phone.
Maps are beautiful but need special attention to make them work properly on mobile.
Make sure that they occupy as much of the screen as possible-but don’t bleed off the screen. If they’re wider than the screen you get the awkward experience of scrolling both the screen and the map. Two divs scrolling is half the fun of one div scrolling.
Tapping on a map pin should show the smallest possible info required to get the user to the content; the image below compares Placeling (left) with MapPress on an iPhone. MapPress offers great content but it crowds the limited mobile display.
Finally, make sure the actual content opens up in a new browser tab; the back button is not your friend here.
The back action reloads maps at their original location-that is, the location before the user gave us her current location. The user has to pan the map to get back to the pin she was just looking at. You can avoid thinking about all this confusion simply by opening new links in a new browser tab.
You can use WordPress to develop mobile, location-based experiences for your clients. Your best solution is to use a plugin like Placeling or MapPress Pro. They’ll help you coordinate all the detailed steps required to take advantage of location.
Hopefully this article has given you a sense of what to consider and how to speak intelligently about this with your clients.