The Agent Focused Pro theme was recently released, and since it’s built on the Genesis Framework, it’s a great choice for your real estate website. The theme demo site uses the AgentPress Listings plugin for the property search and to showcase the featured listings, which is a great option, if you don’t use an IDX service with your MLS.
But if you’re a realtor who uses an IDX service, you’ll want to use the search and featured property listings from your service. This tutorial shows how to use your IDX Broker service for the property search bar and to showcase your featured properties.
If you’d like us to do this for you, consider using our custom search bar integration service.
Install IMPress for IDX Broker Plugin
Go ahead and install the IMPress for IDX Broker plugin. In your WordPress dashboard, click on Plugins > Add New, and search for the plugin; install and activate it. Next connect your IDX Broker account to your WordPress website using this support page from IDX Broker.
How to Add the IDX Broker Styles
Method 1. Paste into style.css
If you know your way about your theme style.css, and can use FTP, then you can copy and paste the styles in the tutorial below at the bottom of your style.css, and then upload the edited style.css to your themes folder. If you don’t know what any of that means, that’s OK; then use Method 2.
Method 2. Use Additional CSS in the WordPress Customizer
Use the Additional CSS in the WordPress Customizer instead.
Go to Appearance > Customize > Additional CSS.
You can copy and paste the CSS shown in the gists down below into the custom css screen. Then click the Update Custom CSS button. Note that you can add the CSS for the Search Bar, for the Featured Listings, or for both, depending on which you use.
Search Bar Widget for Front Page and Sidebar
Add Custom CSS for IMPress Omnibar Search
First, follow the instructions above to copy and paste the CSS from the gist below into the custom CSS screen or at the bottom of your style.css. Be sure to click “view raw” to make it easier to copy and paste.
/* Search Bar IDX Broker IMPress Omnibar - Default style unchecked | |
* By https://github.com/mjsdiaz | |
----------------------------------------------------------------------------------------------- */ | |
.widget.IDX_Omnibar_Widget { | |
background-color: #566473; | |
color: #fff; | |
padding: 30px; | |
} | |
.search-bar .idx-omnibar-form input { | |
background-color: #fff; | |
margin: 0; | |
width: 100%; | |
} | |
.search-bar .idx-omnibar-form .awesomplete { | |
margin: 0 5px 5px 0; | |
width: 68%; | |
} | |
.search-bar .idx-omnibar-form button { | |
height: 60px; | |
margin: 0 5px 5px 0; | |
width: 30%; | |
} | |
.idx-omnibar-form button:hover[type="submit"], | |
.idx-omnibar-form button:focus[type="submit"] { | |
border: 4px solid #fff; | |
color: #fff; | |
} | |
/* For Extra Fields */ | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form { | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-flex-wrap: wrap; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
margin: 0; | |
text-align: center; | |
} | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form .awesomplete, | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form .idx-omnibar-extra, | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form button { | |
-webkit-box-flex: 1; | |
-ms-flex: 1 1 auto; | |
-webkit-flex: 1 1 auto; | |
flex: 1 1 auto; | |
font-size: 14px; | |
font-size: 1.4rem; | |
margin: 0 5px 5px 0; | |
width: auto; | |
} | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form .idx-omnibar-extra { | |
width: 12%; | |
} | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form .awesomplete, | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form button { | |
-webkit-align-self: flex-end; | |
-ms-flex-item-align: end; | |
align-self: flex-end; | |
} | |
/* For Sidebar */ | |
.sidebar .idx-omnibar-form button { | |
height: 60px; | |
margin-top: 20px; | |
width: 100%; | |
} | |
.sidebar .idx-omnibar-form.idx-omnibar-extra-form .idx-omnibar-extra { | |
margin-top: 5px; | |
} | |
.sidebar .idx-omnibar-form.idx-omnibar-extra-form button { | |
margin-top: 30px; | |
} | |
@media only screen and (max-width:800px) { | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form button { | |
width: 100%; | |
} | |
} | |
@media only screen and (max-width:680px) { | |
.search-bar .idx-omnibar-form .awesomplete, | |
.search-bar .idx-omnibar-form button, | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form .awesomplete, | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form .idx-omnibar-extra, | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form button { | |
width: 100%; | |
} | |
.search-bar .idx-omnibar-form.idx-omnibar-extra-form button { | |
margin: 24px 5px 0 0; | |
} | |
} |
Add IMPress Omnibar Search to Front Page and Sidebar
Next you can add the IMPress Omnibar Search widget to the Search Bar widget area and the Primary Sidebar widget area.
Steps to take in your WordPress dashboard:
- Go to Appearance > Widgets.
- Drag the IMPress Omnibar Search into the Search Bar widget area.
- There are several choices here.
- You can leave everything unchecked with no title for the front page Search Bar. Add a title for the Sidebar.
- You can check Extra Fields?
- You can check both Extra Fields? and Include Min Price?
- Be sure to UNCHECK Default Styling?
- Save and repeat for the sidebar.
This is how the omnibar looks with no fields checked.
If things look “off”, be sure to clear your cache in your WordPress site and your browser!
Add IMPress Property Showcase to Featured Listings
Add Custom CSS for IMPress Property Showcase
Copy and paste the CSS from the gist below into the custom CSS screen, below the styles for the omnibar, or at the bottom of your style.css.
/* IDX Broker IMPress Property Showcase - Default style unchecked | |
* By https://github.com/mjsdiaz | |
----------------------------------------------------------------------------------------------- */ | |
.front-page-3 .impress-showcase-widget .widget-title { | |
color: #fff; | |
font-size: 60px; | |
font-size: 6rem; | |
font-weight: 300; | |
letter-spacing: 0; | |
padding: 40px 0; | |
text-align: center; | |
text-transform: none; | |
} | |
.front-page-3 .impress-showcase-property { | |
background-color: #fff; | |
display: inline-block; | |
font-size: 14px; | |
font-size: 1.4rem; | |
line-height: 1.4; | |
margin: 0 0 40px 0; | |
padding: 0; | |
vertical-align: top; | |
width: 33.333333333333%; | |
} | |
.front-page-3 .impress-showcase-property a img { | |
height: 340px; | |
object-fit: cover; | |
} | |
.front-page-3 .impress-showcase-property a, | |
.front-page-3 .impress-showcase-property a span.impress-price { | |
color: #555; | |
text-decoration: none; | |
} | |
.front-page-3 .impress-showcase-property span.impress-price { | |
font-size: 24px; | |
font-size: 2.4rem; | |
font-weight: 600; | |
display: block; | |
} | |
.front-page-3 .impress-showcase-property a:hover, | |
.front-page-3 .impress-showcase-property a:focus, | |
.front-page-3 .impress-showcase-property a:hover span.impress-price, | |
.front-page-3 .impress-showcase-property a:focus span.impress-price { | |
color: #111; | |
text-decoration: underline; | |
} | |
.front-page-3 .impress-showcase-property span.impress-street:after { | |
content: ","; | |
display: inline-block; | |
padding-right: 5px; | |
} | |
.front-page-3 .impress-showcase-property .impress-beds-baths-sqft span { | |
margin: 0 10px 0 0; | |
} | |
.front-page-3 .impress-showcase-property p.impress-beds-baths-sqft { | |
display: inline-block; | |
width: auto; | |
} | |
.front-page-3 .impress-showcase-property span.impress-status { | |
display: none; | |
} | |
@media only screen and (max-width:1380px) { | |
.front-page-3 .impress-showcase-property, | |
.front-page-3 .impress-showcase-property span.impress-price, | |
.front-page-3 .impress-showcase-property span.impress-status, | |
.front-page-3 .impress-showcase-property .impress-address, | |
.front-page-3 .impress-showcase-property p.impress-beds-baths-sqft { | |
text-align: center; | |
} | |
.front-page-3 .impress-showcase-property p.impress-beds-baths-sqft { | |
margin: 0 auto; | |
} | |
} | |
@media only screen and (max-width:980px) { | |
.front-page-3 .impress-showcase-widget .widget-title { | |
font-size: 48px; | |
font-size: 4.8rem; | |
} | |
.front-page-3 .impress-showcase-property { | |
background-color: transparent; | |
width: 100%; | |
} | |
} |
Add IMPress Property Showcase to Front Page 3
Next add the IMPress Property Showcase widget to Front Page 3 widget area.
Choose the following settings:
- Add a Title
- Choose the Properties to Display from the drop down
- Check Show image?
- Check Use rows?
- Listings per row: 3
- Max number of listings to show: 3
- Uncheck Default Styling?
It will look like the first image in this post.
Let us know how you do!
Leave a Reply