The [vista_listings_list]
shortcode allows you to display a list of for sale real estate listings, such as for search results or a listings page, in a completely customizable format. It works by interpreting the shortcode content as a template to use for each listing, Any HTML placed in between the opening and closing tags of the shortcode (the shortcode content) is repeated on the page for each listing returned by your MLS. Within the shortcode's HTML content, fields from the MLS inside square brackets can be used to indicate where the corresponding data from the MLS should be inserted into each listing. For each listing returned by the MLS, the [vista_listings_list]
shortcode takes the template from its content, replaces bracketed words with corresponding fields from the listing, and outputs the result to the page.
Example
[vista_listings_list]
<div class="listing">
<h5>[address]</h5>
<p>List Price: [listPrice]</p>
<p>[bedrooms] Bedrooms, [baths] Bathrooms</p>
</div>
[/vista_listings_list]
When used with our demo data, this shortcode produces the following result:
As you can see, for each of the 5 example listings returned by our API, the shortcode content was output with bracketed fields replaced by API data. Of course, this HTML can be easily customized with CSS.
Integration with page builders
If you prefer to use page builders (such as Divi or Elementor) to design your website instead of raw HTML and CSS, you can still use Vista shortcodes with your page builder's designs. Simply create an element in your page builder which looks the way you want each listing to look. Within this element, use the MLS fields, wrapped in brackets, to indicate where you need MLS data inserted. Then, using shortcode elements from your page builder, put the starting ([vista_listings_list]
) and ending ([/vista_listings_list]
) tags around the element which you've designed to resemble one listing. Now, the shortcode will repeat the template specified in the page builder element for each listing returned by the MLS.
Incompatability with [vista_openhouse_list]
The [vista_listings_list]
shortcode is not designed (or tested) to be used on the same page as [vista_openhouse_list]
. Since these two shortcodes share some code in the backend, you may run into errors using them on the same page. If you absolutely need to do this, contact support and we'll help you figure out how to do so safely.