How to Set Up “Find a Location Near You” Feature in a Directory Website

Adding a “find a location near you” search to your directory website is a must to guide your visitors to find their desired listings or items faster. If you are using Directorist as a directory solution along with your WordPress website, you can easily add location search to your Directory website. The best part is that, unlike other solutions, Directorist uses a state-of-the-art method called Ajax operation to perform instant searches that don’t need any time to load the search results.

In today’s tutorial, we will walk you through the process to add the feature, “find a location near you” to your Directorist powered directory website. Now, let’s dig deeper.

Requirements

• A WordPress website
• Directorist Free version

Why Choose Directorist?

We will be using the free version of Directorist to Implement the “Find a Location Near You” feature because it:

• is free
• is integrated with Google Maps & OpenStreet Maps for location-based search.
• has a dedicated drag & drop builder with custom fields.
• has free Elementor (16+ Directorist widgets) & free Gutenberg (16 Directorist blocks) integration.
• has a multi-directory feature (free).
• offers frontend submission & separate frontend dashboards for the users.
• offers CSV export-import, one-click demo import, Yoast SEO integration, ratings & reviews.
• includes RTL language support, WPML support.
• has more than 10,000 active installations with more than 4.7 ratings out of 5 which ensures you will never feel stranded in case you are stuck at anything.
• is scalable via premium extensions like a native mobile app, social login, live chat, compare listings, booking & appointment, rank featured listings, mark as sold, post your need, image gallery, Google reCaptcha, business hours, claim listings integrations with a bunch of other platforms like Stripe, PayPal, Authorize.net, BuddyBoss, BuddyPress, MailChimp, Oxygen Builder, etc.

Check All the Premium Extensions

Add Find a Location Near You Option to Your Directory Website

We assume that you already have a WordPress website up and running. Now you can add the option by just following these steps:

Step 1: Installing Directorist on your WordPress website

First, go to the WP Admin Dashboard → Plugins → Add New → Search for the keyword ‘Directorist’ → hit the “Install Now” button.

Next up, you need to activate and configure the setup wizard to make a fresh start. In the setup wizard, you will be able to configure the basic settings such as whether to monetize your website or specify the pricing for each and every listing submission and so forth.

Step 2: Configuring maps

Now that you have set up a Directorist powered WordPress directory website, you have to configure the maps. By default, Directorist keeps the OpenStreet Maps enabled since Google Maps now requires you a paid API key.

To configure Google Maps with the API, you can follow our documentation.

But for simplicity, we will be proceeding with the OpenStreet Maps.

To make sure you have OpenStreet Maps enabled navigate to the WordPress Admin Dashboard → Directory Listings → Settings → Listings → Map → Select OpenStreetMap from the drop-down.

Step 3: Adding the find a location near you option using Directorist

Since OpenStreetMaps contains huge data on locations or addresses. And your users can find their desired listings from any location provided that a listing owner submits his or her listings specifying that particular location.

For example, if a user from New York posts any restaurant listing a user can find it very easily using the location-based filters. In this case, a visitor will have to select the New York option from the dropdown list of locations using the filtered search option. That’s it!

Interestingly, Directorist contains an instant Ajax operation. So, your visitors will get their desired listings literally faster than lighting. In Directorist, you can add the Search form in two ways:

Method 1: Using Elementor form builder

Directorist has free integration with Elementor and it brings 16+ widgets. You will be able to see the Search Form Builder by navigating to the WP Admin Dashboard → Pages → Add New → Name the Page → Edit with Elementor → Drag & Drop the Search bar.

You can also add or hide the search filter field and control other options in the Elementor editor panel:

Method 2: Using Gutenberg block editor

You can also use the Gutenberg block editor to insert the search form. To insert it, go to the WP Admin Dashboard → Pages → Add New → Name the Page → Click the Search bar block from Directorist Section.

You will also get many field control in the Gutenberg block editor:

However, you can also add the search form using the Oxygen Page Builder (17+ components or elements), if you are using the premium version.

How Visitors Will Use It from the Frontend?

The form looks simple but it is rich in advanced features. For example, a user can select the location (area), reviews, tags, and categories to filter his or her desired listings. The best part is that they can also use the radius bar to specify the diameter. If a listing is found within that diameter that must appear in the search results:

The coolest part is that the users can use the “locate me” button to enter their location in the fastest way possible. But you must use HTTPS before the URL of your website to make it work properly:

That’s Not the End (Quick Tips)!

• Did you know the search form of Directorist is super customizable? This means you can control what fields to show or hide in the search form. To edit the search form, navigate to the WP Admin Dashboard → Directory Listings → Directory Builder → Search Form.

• Using the Directorist instant search option lets your visitors find their desired listing without the need to reload the page. That means your visitors will be able to find their desired listings as soon as they hit the search button. This instant search option only works on the All Listings page and Search Result page.

Swan Song

We hope this article will guide you properly to add the “Find a location near you option” to allow the visitors to look up their desired listings. It will surely improve the location-based search on Directorist powered website.

If you liked our posts, don’t forget to subscribe to our blog so that we can notify you once any post is published. Directorist is now on Facebook, Twitter, and LinkedIn! You can also join the Directorist Community for sharing your thoughts and experiences relating to the directory niche. Come and join us to see what we’re up to.