How to display Real Estate Listings

Follow the directions below to create a Real Estate Listings page similar to the Real Estate Listings demo or just download it from the demos page.

Create the form

Create a form using the Real Estate listings template or create your own from scratch.

Create the listings page

1. In your WordPress admin, go to “Pages” → “Add New” and create your listings page.
2. Go to "Formidable" → "Views" and select "Add New".
3. Give the new view a title and a description for reference, if you would like.
4. Select your Real Estate listings form from the "Use Entries from Form" drop-down.
5. Select the View Format to "Both (Dynamic)".
6. Scroll down to the Advanced Settings. Set your "Detail Page Slug" to "listing". Set the Parameter Value to "Key".
7. Add your HTML into the "Before Content", "Content", and "After Content" boxes. This "Content" section will be repeated for each listing. You can see sample HTML on the Real Estate Listings demo. Expand the "Code for this page" area at the bottom of the page to see the HTML.

   Before Content:

   <style>
   .listings_list{border:1px solid #eee;}
   .listing_info{padding: 0 10px;}
   </style>
   
   <div class="grid-container" style="margin-top:5%;">

   Content:

   <div class="listings_list one-third"><a href="[detaillink]">[if photo-url][if photo-upload equals=""]<img src="[photo-url]" alt="[mlsid]" />[/if photo-upload][/if photo-url]
   [if photo-upload]<img src="[photo-upload size=large]" alt="[mlsid]" />[/if photo-upload]</a>
   <div class="listing_info"><h3 style="margin: 0;"><a href="[detaillink]">$[list-price thousands_sep=","]</a></h3>
   <strong>[address] [city], [state]</strong>
   [bedrooms] bd / [bathrooms] ba [if sqft-living]/ [sqft-living] sq ft[/if sqft-living]
   </div>
   </div>

   After Content:

   </div>

   Dynamic Content:

   <style>#real_estate_heading{display:none;}</style>
   <div class="single_listing">
   [if photo-url][if photo-upload equals=""]<img src="[photo-url]" alt="[mlsid]" />[/if photo-upload][/if photo-url]
   [if photo-upload]<img src="[photo-upload size=medium]" alt="[mlsid]" />[/if photo-upload]
   <h3>[address] &mdash; $[list-price]</h3>
   [city], [state] [zip] [editlink label="Edit" location="front" page_id="53495"]
   
   [bedrooms] beds | [bathrooms] baths [if sqft-total]| [sqft-total] sq ft[/if sqft-total]
   
   <b>MLS #:</b> [mlsid] 
   [if type]<b>Type:</b> [type]
   [/if type]<b>Year Built:</b> [year]
   <b>Status:</b> [property-status]
   <hr/>
   <p>[description clickable=1]</p>
   <hr/>
   <h3>Features</h3>
   <ul>
   [if sqft-living]<li><b>Living Square Feet:</b> [sqft-living]</li>[/if sqft-living]
   [if gen-features]<li><b>General Features:</b> [gen-features]</li>[/if gen-features]
   [if interior]<li><b>Interior Features:</b> [interior]</li>[/if interior]
   [if rooms]<li><b>Rooms:</b> [rooms]</li>[/if rooms]
   [if ac]<li><b>Air Conditioning:</b> [ac]</li>[/if ac]
   [if heat]<li><b>Heat:</b> [heat]</li>[/if heat]
   [if lot-features]<li><b>Lot Features:</b> [lot-features]</li>[/if lot-features]
   [if community-features]<li><b>Community Features</b> [community-features]</li>[/if community-features]
   </ul>
   </div>
   
   <a href="/demos/real-estate-listings/">&larr; All Listings</a>

8. Add HTML into the box labeled "Dynamic Content". This is the box for the detailed listing page. See the demo for an example.
9. Save your view.
10. Insert the view on the page you created using [display-frm-data id=x filter=1]. Read more about publishing a view.

Create the Featured listings widget

1. Follow steps 2 - 4 above.
2. Select "All Entries" for the Display Format if you would like to show all featured listings. Select "Single Entry" if you would like to randomly display a single featured listing.
3. Add HTML into the "Before Content", "Content", and "After Content" boxes as needed. You can also add a link in the Before or After Content to view all listings.
4. In the Advanced Settings at the bottom of the view, set the Order to Random.
5. Add a filter in the "Filter Entries" section. Select your featured check box from the dropdown, "is not equal to", and leave the last box blank. This is saying if the featured field is blank, then don't show it in the list.
6. Save your view.
7. Copy the shortcode for your view, i.e. [display-frm-data id=x filter=1].
8. Go to “Appearance” → “Widgets”.
9. Drag a “Text” widget into your sidebar.
10. Insert your view shortcode in the text widget, so it will look like this:

    [display-frm-data id=x]

11. Save your widget

If you want to see an example of this in action, click here.