{"id":42484,"date":"2023-11-13T13:25:34","date_gmt":"2023-11-13T13:25:34","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=42484"},"modified":"2023-12-07T08:04:42","modified_gmt":"2023-12-07T08:04:42","slug":"how-to-show-posts-in-listing-grid-based-on-location-and-distance","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/","title":{"rendered":"How to Show Posts in Listing Grid Based on Location and Distance"},"content":{"rendered":"\n

Activate Maps Listings Module<\/h2>\n\n\n\n
\n

Open the WordPress Dashboard > JetEngine > JetEngine <\/em><\/strong>directory and activate the Maps Listings <\/strong>switcher in the Modules <\/strong>tab. <\/p>\n\n\n\n

Hit the \u201cSave<\/strong>\u201d button.<\/p>\n\n\n\n

\"jetengine<\/a><\/div>\n\n\n\n

Proceed to the Maps Settings <\/strong>tab and adjust settings according to your wishes.<\/p>\n\n\n\n\n\n

The settings will be saved automatically.<\/p>\n\n\n\n

\"maps<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Build a Filter<\/h2>\n\n\n\n
\n

Go to WordPress Dashboard > Smart Filters > Add New<\/em><\/strong>. <\/p>\n\n\n\n

Complete the Filter Name <\/strong>and select the \u201cLocation & Distance\u201d Filter Type <\/strong>in the Filter Settings <\/strong>tab.<\/p>\n\n\n\n

Also, fill in the Filter Label <\/strong>and Active Filter Label <\/strong>fields. The first label can be used next to the filter on the page, and the second one will be shown if the Active Filters<\/strong><\/a> <\/strong>or Active Tags<\/strong><\/a> <\/strong>widgets\/blocks are used.<\/p>\n\n\n\n

Press \u201cUpdate<\/strong>\u201d to save the filter.<\/p>\n\n\n\n

\"location<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Create a Query<\/h2>\n\n\n\n
\n

Navigate to WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>to add a new query.<\/p>\n\n\n\n

Give a Name <\/strong>to the query and pick one of the Query Type <\/strong>options; it should be one that supports Geo Query<\/strong>. Among the options are: \u201cPosts Query,\u201d \u201cTerms Query,\u201d \u201cUsers Query,\u201d and \u201cCustom Content Type Query.\u201d<\/p>\n\n\n\n

Now, we will pick the \u201cPosts Query\u201d option as we will work with the JetEngine<\/em>\u2019s Custom Post Type<\/strong><\/a>.<\/p>\n\n\n\n

In the Posts Query <\/strong>section, the General <\/strong>tab is opened by default. In the Post Type<\/strong> field, we pick \u201cJobs (Vacancies)\u201d CPT<\/strong>.<\/p>\n\n\n\n

We also set the Post Status <\/strong>as \u201cPublish\u201d in order to show only posts that have this status.<\/p>\n\n\n\n

You can also complete the next fields. However, these are not obligatory to make the current case complete.<\/p>\n\n\n\n

\"posts<\/a><\/div>\n\n\n\n

The following tab to proceed to is Pagination<\/strong>. Here, we set Posts Per Page<\/strong>.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

We recommend completing this field as the query may work incorrectly without it.<\/p><\/div><\/div>\n\n\n\n

\"posts<\/a><\/div>\n\n\n\n

The most important step is adjusting the Geo Search <\/strong>tab. <\/p>\n\n\n\n

Pick the needed point on the map as a center for the initial search in the Select location <\/strong>section.<\/p>\n\n\n\n

Complete the Address Field <\/strong>bar with the meta field\u2019s key that stores address information about your posts.<\/p>\n\n\n\n

Also, set the Distance <\/strong>value, which will serve as the radius around the picked center. Additionally, the Units <\/strong>can be specified: \u201cKilometers\u201d or \u201cMiles.\u201d<\/p>\n\n\n\n

The query is now set; you can click the \u201cAdd Query<\/strong>\u201d button.<\/p>\n\n\n\n

\"posts<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Add or Update the Page<\/h2>\n\n\n\n
\n

It is time to put the content on the page. Head to WordPress Dashboard > Pages > Add New <\/em><\/strong>or open the editor of the existing page.<\/p>\n\n\n\n

You can work with Gutenberg or Elementor. <\/p>\n\n\n\n

For now, we will use Elementor.<\/p>\n\n\n\n

Once the editor is opened, search for the Location and Distance Filter <\/strong>widget and add it to the page.<\/p>\n\n\n\n

Adjust its settings. The main steps are selecting the filter (Select filter <\/strong>bar) and setting its provider to \u201cJetEngine.\u201d<\/p>\n\n\n\n

If you want, you can alter other customization options. You can find out more about them in the Location & Distance Filter Overview<\/a><\/strong>.<\/p>\n\n\n\n

\"location<\/a><\/div>\n\n\n\n

As we want to display posts, we add the Listing Grid<\/strong><\/a> <\/strong>widget.<\/p>\n\n\n\n

Select the Listing <\/strong>with the needed post type\u2019s posts in the General <\/strong>settings tab.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

Go to the Custom Query <\/strong>tab and activate the Use Custom Query <\/strong>toggle. Then, choose the newly built Custom Query<\/strong>.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

Set up the styling settings and hit the \u201cPublish\/Update<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Now, you can check the result by heading to the front end.<\/p>\n\n\n\n

\"location<\/a><\/div>\n\n\n\n

You can type the name of the location in the search bar and select the needed option from the drop-down list.<\/p>\n\n\n\n

Then, you can also pick the distance in the bar next to the location.<\/p>\n\n\n\n

\"location<\/a><\/div>\n\n\n\n

Clicking the \u201cYour current location<\/strong>\u201d button will initiate a search around your current location.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

To search around your location, you need to allow location detection in your browser for the current website. It can be done in the pop-up appearing once you click on the icon for the first time (if you haven\u2019t allowed location before) or in the browser settings.<\/p><\/div><\/div>\n\n\n\n

\"your<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Now you know how to display posts in JetEngine<\/em>\u2019s Listing Grid <\/strong>based on the \u201cLocation & Distance\u201d <\/strong>filter from JetSmartFilters<\/em> on your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"

In this tutorial, you will find out how to use the Location & Distance filter from JetSmartFilters to filter the posts from JetEngine\u2019s Listing Grid.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[394],"yoast_head":"\nHow to Show Posts in Listing Grid Based on Location and Distance \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to display posts with the Listing Grid widget from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Show Posts in Listing Grid Based on Location and Distance \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to display posts with the Listing Grid widget from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-07T08:04:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-modules-tab-1-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/\",\"name\":\"How to Show Posts in Listing Grid Based on Location and Distance \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-11-13T13:25:34+00:00\",\"dateModified\":\"2023-12-07T08:04:42+00:00\",\"description\":\"Learn how to display posts with the Listing Grid widget from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Show Posts in Listing Grid Based on Location and Distance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Show Posts in Listing Grid Based on Location and Distance \u2014 JetEngine | Crocoblock","description":"Learn how to display posts with the Listing Grid widget from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/","og_locale":"en_US","og_type":"article","og_title":"How to Show Posts in Listing Grid Based on Location and Distance \u2014 JetEngine | Crocoblock","og_description":"Learn how to display posts with the Listing Grid widget from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/","og_site_name":"Help Center","article_modified_time":"2023-12-07T08:04:42+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-modules-tab-1-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/","name":"How to Show Posts in Listing Grid Based on Location and Distance \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-11-13T13:25:34+00:00","dateModified":"2023-12-07T08:04:42+00:00","description":"Learn how to display posts with the Listing Grid widget from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Show Posts in Listing Grid Based on Location and Distance"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/42484"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=42484"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=42484"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=42484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}