{"id":5771,"date":"2022-04-04T10:42:00","date_gmt":"2022-04-04T04:42:00","guid":{"rendered":"https:\/\/directorist.com\/blog\/?p=5771"},"modified":"2025-02-08T12:48:23","modified_gmt":"2025-02-08T06:48:23","slug":"find-a-location-near-you-in-directory-website","status":"publish","type":"post","link":"https:\/\/directorist.com\/blog\/find-a-location-near-you-in-directory-website\/","title":{"rendered":"How to Set Up &#8220;Find a Location Near You&#8221; Feature in a Directory Website"},"content":{"rendered":"\n<p>Adding a &#8220;find a location near you&#8221; search to your directory website is a must to guide your visitors to find their desired listings or items faster. If you are using <strong><a href=\"http:\/\/directorist.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Directorist <\/a><\/strong>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&#8217;t need any time to load the search results.<\/p>\n\n\n\n<p>In today&#8217;s tutorial, we will walk you through the process to add the feature, &#8220;find a location near you&#8221; to your Directorist powered directory website. Now, let&#8217;s dig deeper.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Requirements\">Requirements<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A WordPress website<\/strong><\/li>\n\n\n\n<li><strong>Directorist Free version<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Why_Choose_Directorist\">Why Choose Directorist?<\/span><\/h2>\n\n\n\n<p>We will be using the free version of Directorist to Implement the &#8220;Find a Location Near You&#8221; feature because it:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"http:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/03\/directorist-landing-page-9-1-1024x580.png\" alt=\"find a location near you - directorist plugin\" class=\"wp-image-5333\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>is free <\/li>\n\n\n\n<li>is integrated with Google Maps &amp; OpenStreet Maps for location-based search.<\/li>\n\n\n\n<li>has a dedicated drag &amp; drop builder with custom fields.<\/li>\n\n\n\n<li>has free Elementor (16+ Directorist widgets) &amp; free Gutenberg (16 Directorist blocks) integration.<\/li>\n\n\n\n<li>has a multi-directory feature (free).<\/li>\n\n\n\n<li>offers frontend submission &amp; separate frontend dashboards for the users.<\/li>\n\n\n\n<li>offers CSV export-import, one-click demo import, Yoast SEO integration, ratings &amp; reviews.<\/li>\n\n\n\n<li>includes RTL language support, WPML support.<\/li>\n\n\n\n<li>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. <\/li>\n\n\n\n<li>is scalable via premium extensions like <a href=\"https:\/\/directorist.com\/mobile-app\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>a native mobile app<\/strong><\/a>, social login, live chat, compare listings, booking &amp; 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.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong><a href=\"https:\/\/directorist.com\/extensions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Check All the Premium Extensions<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Add_Find_a_Location_Near_You_Option_to_Your_Directory_Website\">Add Find a Location Near You Option to Your Directory Website<\/span><\/h2>\n\n\n\n<p>We assume that you already have a WordPress website up and running. Now you can add the option by just following these steps:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Step_1_Installing_Directorist_on_your_WordPress_website\">Step 1: Installing Directorist on your WordPress website<\/span><\/h3>\n\n\n\n<p>First, go to&nbsp;the&nbsp;<strong>WP Admin Dashboard <strong>\u2192 <\/strong>Plugins <strong><strong>\u2192 <\/strong><\/strong>Add New <strong>\u2192 <\/strong>Search for the keyword \u2018Directorist\u2019 <strong><strong>\u2192 <\/strong><\/strong>hit the &#8220;Install Now&#8221; button<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"309\" src=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/03\/1-directorist-installation-1-1024x309.png\" alt=\"location based search - installing directorist\" class=\"wp-image-5479\" srcset=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/03\/1-directorist-installation-1-1024x309.png 1024w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/03\/1-directorist-installation-1-300x91.png 300w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/03\/1-directorist-installation-1-768x232.png 768w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/03\/1-directorist-installation-1-1536x464.png 1536w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/03\/1-directorist-installation-1.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Next up, you need to\u00a0<strong><a href=\"https:\/\/directorist.com\/documentation\/directorist\/getting-started\/overview-getting-started\/\" target=\"_blank\" rel=\"noreferrer noopener\">activate and configure the setup wizard<\/a><\/strong>\u00a0to 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 listing submission and so forth.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Step_2_Configuring_maps\">Step 2: Configuring maps<\/span><\/h3>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>To configure Google Maps with the API, you can <a href=\"https:\/\/directorist.com\/documentation\/directorist\/advanced-settings\/configuring-maps\/\" target=\"_blank\" rel=\"noreferrer noopener\">follow our documentation<\/a>. <\/p>\n\n\n\n<p>But for simplicity, we will be proceeding with the OpenStreet Maps.<\/p>\n\n\n\n<p>To make sure you have OpenStreet Maps enabled navigate to the <strong>WordPress Admin<\/strong> <strong>Dashboard \u2192 Directory Listings \u2192 Settings \u2192 Listings \u2192 Map<\/strong>  <strong>\u2192 <\/strong> <strong>Select OpenStreetMap<\/strong> from the drop-down. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"435\" src=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/1-directorist-settings-map-1-1024x435.png\" alt=\"find a location near you - Choose the OpenStreet map\" class=\"wp-image-5798\" srcset=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/1-directorist-settings-map-1-1024x435.png 1024w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/1-directorist-settings-map-1-300x127.png 300w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/1-directorist-settings-map-1-768x326.png 768w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/1-directorist-settings-map-1-1536x652.png 1536w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/1-directorist-settings-map-1.png 1918w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Step_3_Adding_the_find_a_location_near_you_option_using_Directorist\">Step 3: Adding the find a location near you option using Directorist<\/span><\/h3>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>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&#8217;s it!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"directorist.com\/ref\/69\/?utm_source=Blog&amp;utm_medium=Suza&amp;utm_campaign=Directorist&amp;utm_term=find%20a%20location%20near%20you\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"120\" src=\"http:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/07\/Ads-Banner.png\" alt=\"create a business directory with WordPress for free\" class=\"wp-image-2860\" srcset=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/07\/Ads-Banner.png 770w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/07\/Ads-Banner-300x47.png 300w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/07\/Ads-Banner-768x120.png 768w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Interestingly, Directorist contains an instant Ajax operation. So, your visitors will get their desired listings faster than lighting. In Directorist, you can add the Search form in two ways:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Method_1_Using_Elementor_form_builder\">Method 1: Using Elementor form builder<\/span><\/h4>\n\n\n\n<p>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 <strong>WP Admin Dashboard \u2192 Pages \u2192 Add New \u2192 Name the Page <strong>\u2192<\/strong> Edit with Elementor \u2192 Drag &amp; Drop the Search bar<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"936\" style=\"aspect-ratio: 1920 \/ 936;\" width=\"1920\" controls src=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/adding-search-bar-in-Directorist-using-Elementor.webm\"><\/video><\/figure>\n\n\n\n<p>You can also add or hide the search filter field and control other options in the Elementor editor panel:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"936\" style=\"aspect-ratio: 1920 \/ 936;\" width=\"1920\" controls src=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/hiding-search-filter-field-in-Elementor.webm\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Method_2_Using_Gutenberg_block_editor\">Method 2: Using Gutenberg block editor<\/span><\/h4>\n\n\n\n<p>You can also use the Gutenberg block editor to insert the search form. To insert it, go to the <strong>WP Admin Dashboard \u2192 Pages \u2192 Add New \u2192 Name the Page \u2192 <\/strong>Click the <strong>Search bar block <\/strong>from Directorist Section. <\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"936\" style=\"aspect-ratio: 1920 \/ 936;\" width=\"1920\" controls src=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/Adding-Search-form-using-Gutenberg-block-editor.webm\"><\/video><\/figure>\n\n\n\n<p>You will also get many field control in the Gutenberg block editor:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"479\" src=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/more-search-filter-control-in-Gutenberg-1-1024x479.png\" alt=\"hiding search filter field and control other options in Gutenberg block editor\" class=\"wp-image-5866\" srcset=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/more-search-filter-control-in-Gutenberg-1-1024x479.png 1024w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/more-search-filter-control-in-Gutenberg-1-300x140.png 300w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/more-search-filter-control-in-Gutenberg-1-768x359.png 768w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/more-search-filter-control-in-Gutenberg-1-1536x718.png 1536w, https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/more-search-filter-control-in-Gutenberg-1.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>However, you can also add the search form using the Oxygen Page Builder (17+ components or elements), if you are using the premium version. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"12155\"><span id=\"How_Visitors_Will_Use_It_from_the_Frontend\">How Visitors Will Use It from the Frontend?<\/span><\/h2>\n\n\n\n<p>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 it must appear in the search results:<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"936\" style=\"aspect-ratio: 1920 \/ 936;\" width=\"1920\" controls src=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/searching-in-Directorist-using-the-filters-of-the-search-form.webm\"><\/video><\/figure>\n\n\n\n<p>The coolest part is that the users can use the &#8220;locate me&#8221; 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: <\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"936\" style=\"aspect-ratio: 1920 \/ 936;\" width=\"1920\" controls src=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/directorist-find-my-location.webm\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"That8217s_Not_the_End_Quick_Tips\">That&#8217;s Not the End (Quick Tips)!<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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 <strong>WP Admin Dashboard \u2192 Directory Listings \u2192 Directory Builder \u2192 Search Form<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"936\" style=\"aspect-ratio: 1920 \/ 936;\" width=\"1920\" controls src=\"https:\/\/directorist.com\/blog\/wp-content\/uploads\/sites\/6\/2022\/04\/customizing-search-form-in-Directorist.webm\"><\/video><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Using the <strong><a href=\"http:\/\/directorist.com\/blog\/introducing-directorist-instant-search\" target=\"_blank\" rel=\"noreferrer noopener\">Directorist instant search<\/a><\/strong> 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. <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Swan_Song\">Swan Song<\/span><\/h2>\n\n\n\n<p>We hope this article will guide you properly to add the &#8220;Find a location near you option&#8221; to allow the visitors to look up their desired listings. It will surely improve the location-based search on Directorist powered website. <\/p>\n\n\n\n<p>If you liked our posts, don\u2019t forget to subscribe to our blog so that we can notify you once any post is published. Directorist is now on<a rel=\"noreferrer noopener nofollow\" href=\"https:\/\/twitter.com\/wpdirectorist\" target=\"_blank\"> <\/a><a href=\"https:\/\/www.facebook.com\/directorist\" target=\"_blank\" rel=\"noreferrer noopener\">Facebook<\/a>, <a href=\"https:\/\/twitter.com\/wpdirectorist\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Twitter<\/a>, and <a href=\"https:\/\/www.linkedin.com\/company\/directorist\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">LinkedIn<\/a>! You can also join the <a rel=\"noreferrer noopener nofollow\" href=\"https:\/\/www.facebook.com\/groups\/359941271794302\" target=\"_blank\">Directorist Community<\/a> for sharing your thoughts and experiences relating to the directory niche. Come and join us to see what we\u2019re up to. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding a &#8220;find a location near you&#8221; 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 [&hellip;]<\/p>\n","protected":false},"author":3653,"featured_media":5859,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,32],"tags":[160,158,159],"class_list":["post-5771","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-directorist","category-tutorials","tag-directorist-search-form","tag-fina-a-location-near-you","tag-location-based-search"],"_links":{"self":[{"href":"https:\/\/directorist.com\/blog\/wp-json\/wp\/v2\/posts\/5771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/directorist.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/directorist.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/directorist.com\/blog\/wp-json\/wp\/v2\/users\/3653"}],"replies":[{"embeddable":true,"href":"https:\/\/directorist.com\/blog\/wp-json\/wp\/v2\/comments?post=5771"}],"version-history":[{"count":0,"href":"https:\/\/directorist.com\/blog\/wp-json\/wp\/v2\/posts\/5771\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/directorist.com\/blog\/wp-json\/wp\/v2\/media\/5859"}],"wp:attachment":[{"href":"https:\/\/directorist.com\/blog\/wp-json\/wp\/v2\/media?parent=5771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/directorist.com\/blog\/wp-json\/wp\/v2\/categories?post=5771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/directorist.com\/blog\/wp-json\/wp\/v2\/tags?post=5771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}