A lightweight
[homerunner-property-grid]shortcode that shows a handful of your properties as fast, cacheable teaser cards on any landing or marketing page, without loading your full search tool.
What it does #
Landing pages, blog posts, and destination pages often just need to show a few properties, not your entire interactive search experience. Dropping in the full explorer for that job means loading its JavaScript app and fetching live data for a handful of cards that never need to change while the page is open. That is slower than it needs to be, and it is unnecessary weight on a page whose job is to catch someone’s eye and send them onward.
The Property Grid solves this with a shortcode that renders a small, static grid of property cards. It reuses the exact same card design as your search tool, so the cards look identical to what guests see everywhere else on your site, but it leaves out everything that only matters to an interactive search: no live pricing, no map, no date picker, no filter controls, no app to load. Because the grid only draws on your stored property data and site settings, and never reacts to what a particular visitor searched for (their dates, guest count, or map position), the same page produces the exact same HTML for every visitor. That is what makes it safe for your host or CDN to cache and quick to load.
What a card shows:
- A photo, property title, and subtitle
- Guest count, bedrooms, and bathrooms
- Location and property type labels
- A star rating, if you choose to show it
What you control: which properties appear, how many, how they are sorted or hand-picked, how the cards are arranged, and whether a “See all” button sends visitors on to a page with your full search.
How to turn it on #
1. Turn on Property Grid #
In the HomeRunner Toolkit Hub, switch on Property Grid.
2. Build your shortcode in the Composer #
Open the Property Grid panel to reach its Shortcode Composer. Pick your filters, curation, sort, and display options from plain form controls, no need to memorize attribute names or worry about a typo breaking the shortcode. The shortcode string updates as you make selections. When it looks right, click Copy.
Two small things the Composer folds into other controls rather than giving their own field:
- Group matching “any selected” is covered by the Group picker itself, so there is no separate control for it.
- Tag by ID is the numeric-ID version of the Tag picker (which already matches by tag name), and is left out since the Tag picker covers the common case.
3. Paste the shortcode into a page #
Paste the copied shortcode into any page, post, or widget area, the same way you would place [homerunner-explorer]. The grid renders wherever you put it.
4. (Optional) Add a “See all” button #
If you want the grid to send interested visitors somewhere for more, typically a page with your full search filtered the same way, set a Link URL in the Composer’s See-all button section. Leave it blank and the grid shows only the cards, with no button.
Settings #
Filters
| Setting | What it controls |
|---|---|
| Location / State / City / Type | Show only properties matching any of the selected terms for that field. Leave blank to match all properties. |
| Tag | Show only properties with any of the selected tags. |
| Group | Show only properties in any of the selected groups. |
| Amenities | Show only properties with the selected amenities, with a toggle for all selected (must have every one) or any selected (must have at least one). |
| Pets | Set to “Pet-friendly only” to show only properties flagged as pet-friendly. Default is any. |
Guests & size
| Setting | What it controls |
|---|---|
| Guests (min) | Show only properties that sleep at least this many guests. |
| Bedrooms (min) | Show only properties with at least this many bedrooms. Ignored if an exact bedroom count is also set. |
| Bedrooms (exact) | Show only properties with exactly this many bedrooms. |
| Bathrooms (min) | Show only properties with at least this many bathrooms. |
| Featured | Show only properties flagged as featured. |
| Price min / Price max | Show only properties whose rate falls within this range. |
| Title contains | Show only properties whose title contains this text. |
Curation
| Setting | What it controls |
|---|---|
| Only these IDs | Hand-pick properties by post ID, shown in the order given. Sets the card count and locks the order unless you also set a sort. |
| Exclude IDs | Leave out these properties by post ID, even if they would otherwise match. |
Sort & count
| Setting | What it controls |
|---|---|
| How many | Number of cards to show. Default is 4, maximum 50. |
| Sort | Order cards by featured (default), random, newest, price (low to high or high to low), guests, bedrooms, bathrooms, or rating. |
| Direction | High-to-low or low-to-high, for the guests / bedrooms / bathrooms / rating sorts. |
Display
| Setting | What it controls |
|---|---|
| Template | CSS template variant. Leave as “default” unless your theme provides another. |
| Columns per breakpoint | Override how many columns show at each screen size (phone through large desktop), from 1 to 6. Leave blank to use your site’s default grid size. |
| Show rating | Show the star rating badge on each card. Off by default. |
| Show subtitle | Show the card subtitle line. On by default. |
| Show groups | Show group badges on each card, for groups you have flagged to display a label. Off by default. |
| Open in new tab | Open property pages (and the See all button, if set) in a new browser tab. Off by default. |
| Eager images | Load the first row of card images immediately instead of waiting until the visitor scrolls to them. Off by default; turning it on helps pages where the grid appears near the top. The count of images loaded this way defaults to your desktop column count, or you can set an exact number. |
See-all button
| Setting | What it controls |
|---|---|
| Link URL | Adds a “See all” button below the grid, pointing at this URL. Leave blank for no button. |
| Button text | Text on the button. Defaults to “See all”. |
| Background color / Text color | Button colors, as a hex code (e.g. #0a7d55) or CSS color name. Leave blank to use your theme’s default button style. |
Tips #
- Because the grid is meant to be cacheable, if your host or a page-caching plugin caches the page it sits on, a brand-new property or a property edit may not show up until that page’s cache clears.
- The grid has no “Load More” like your full search does. Use the See-all button to send visitors to a page where they can keep browsing.
- Pairing a few curated grids with Toolkit: Destination Index works well for landing pages built around a specific area: use Destination Index to help visitors find the right destination page, then a property grid on that page to show its best properties.
- If a card is missing its photo, guest count, or subtitle, check that the property itself has those fields set. The grid only ever shows what is already stored on the property, it does not fetch or calculate anything live.