{"id":43008,"date":"2023-12-18T11:20:02","date_gmt":"2023-12-18T11:20:02","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=43008"},"modified":"2024-10-16T11:02:12","modified_gmt":"2024-10-16T11:02:12","slug":"how-to-show-posts-in-listing-grid-based-on-location-and-distance-with-bricks","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance-with-bricks\/","title":{"rendered":"How to Show Posts in Listing Grid Based on Location and Distance with Bricks"},"content":{"rendered":"\n

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

Go to WordPress Dashboard > JetEngine > JetEngine <\/em><\/strong>and enable the Maps Listings <\/strong>toggle in the Modules <\/strong>tab.\u00a0<\/p>\n\n\n\n

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

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

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

Now, 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

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

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

Then, complete 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>elements are used.<\/p>\n\n\n\n

Save the result by pushing the \u201cUpdate<\/strong>\u201d button.<\/p>\n\n\n\n

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

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

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

Complete a Name <\/strong>field and select a Query Type <\/strong>option 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>.\u00a0<\/p>\n\n\n\n

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

The following fields are not obligatory for the case. However, feel free to complete them if desired.<\/p>\n\n\n\n

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

In the Pagination <\/strong>tab, define the Posts Per Page <\/strong>value.<\/p>\n\n\n\n

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

The empty Posts Per Page<\/strong> field can cause an incorrect query work.<\/p><\/div><\/div>\n\n\n\n

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

Head to the Geo Search <\/strong>tab. <\/p>\n\n\n\n

Here, select the point on the map that will serve as a center for the initial search in the Select location <\/strong>section.<\/p>\n\n\n\n

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

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

Click the \u201cAdd Query<\/strong>\u201d button to finish the setup.<\/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

Go to WordPress Dashboard > Bricks > Templates > Add New <\/em><\/strong>or open the editor of the existing template.<\/p>\n\n\n\n

Search for the Location and Distance Filter<\/strong><\/a> <\/strong>element with the help of the search bar and add it to the page.<\/p>\n\n\n\n

Adjust the Location and Distance Filter <\/strong>element settings. In the Select filter <\/strong>field, pick the filter you have built before and select the \u201cJetEngine\u201d option as the This filter for <\/strong>provider.<\/p>\n\n\n\n

Work on other settings if needed.<\/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>element to the page as well.<\/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

In the Custom Query <\/strong>tab, enable 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

Style up the page and click the \u201cPublish\/Update<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

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

Head to the front end to check the result.<\/p>\n\n\n\n

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

Type in the name of the location in the search bar and pick the desired option from the drop-down list.<\/p>\n\n\n\n

You can choose a distance in the bar next to the location as well.<\/p>\n\n\n\n

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

If you click the \u201cYour current location<\/strong>\u201d button, a search will be conducted around your current location.<\/p>\n\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 filter from JetSmartFilters<\/em> on your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"

From this tutorial, you will find out how to use the Location & Distance filter element 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":[528],"yoast_head":"\nShowing Posts in Listing Grid Based on Location & Distance with Bricks \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to display posts with the Listing Grid element from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website with the Bricks Builder.\" \/>\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-with-bricks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Showing Posts in Listing Grid Based on Location & Distance with Bricks \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to display posts with the Listing Grid element from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website with the Bricks Builder.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance-with-bricks\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T11:02:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/12\/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-with-bricks\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance-with-bricks\/\",\"name\":\"Showing Posts in Listing Grid Based on Location & Distance with Bricks \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-12-18T11:20:02+00:00\",\"dateModified\":\"2024-10-16T11:02:12+00:00\",\"description\":\"Learn how to display posts with the Listing Grid element from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website with the Bricks Builder.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance-with-bricks\/#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-with-bricks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance-with-bricks\/#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 with Bricks\"}]},{\"@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":"Showing Posts in Listing Grid Based on Location & Distance with Bricks \u2014 JetEngine | Crocoblock","description":"Learn how to display posts with the Listing Grid element from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website with the Bricks Builder.","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-with-bricks\/","og_locale":"en_US","og_type":"article","og_title":"Showing Posts in Listing Grid Based on Location & Distance with Bricks \u2014 JetEngine | Crocoblock","og_description":"Learn how to display posts with the Listing Grid element from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website with the Bricks Builder.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance-with-bricks\/","og_site_name":"Help Center","article_modified_time":"2024-10-16T11:02:12+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/12\/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-with-bricks\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance-with-bricks\/","name":"Showing Posts in Listing Grid Based on Location & Distance with Bricks \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-12-18T11:20:02+00:00","dateModified":"2024-10-16T11:02:12+00:00","description":"Learn how to display posts with the Listing Grid element from JetEngine based on the Location & Distance filter from JetSmartFilters on your WordPress website with the Bricks Builder.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance-with-bricks\/#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-with-bricks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-show-posts-in-listing-grid-based-on-location-and-distance-with-bricks\/#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 with Bricks"}]},{"@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\/43008"}],"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=43008"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=43008"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=43008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}