Add IMPress for IDX Broker Search to Agent Focused Theme

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.

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:

1. Go to Appearance > Widgets.
2. Drag the IMPress Omnibar Search into the Search Bar widget area.
3. 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?
4. 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.

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!