Winning Agent

Sales That Work

  • About
  • Store
  • Blog
  • The Stream
  • Forum
  • Jobs

Add IMPress for IDX Broker Search to Agent Focused Theme

May 31, 2016 by Marcy Diaz Leave a Comment

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedIn

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.
IMPress for idx Broker property showcase on agent focused pro theme

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.

The CSS in this tutorial is only needed if you are using Agent Focused 1.0 (purchased before 10/23/10). IMPress for IDX Broker CSS is already added to Agent Focused Pro 2.0. Just go ahead and set up the plugin widgets.

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.

simple custom css plugin for WordPress

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;
}
}
view raw impress-omnibar-search-custom.css hosted with ❤ by GitHub

 

Add IMPress Omnibar Search to Front Page and Sidebar

idx broker IMPress Omnibar extra fields front page

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:

IDX-Broker-IMPress-Omnibar-widget

  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.

IMPress for idx Broker Omnibar front page

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%;
}
}
view raw impress-property-showcase-custom.css hosted with ❤ by GitHub

 

Add IMPress Property Showcase to Front Page 3

Next add the IMPress Property Showcase widget to Front Page 3 widget area.

IDX-Broker-IMPress-property-showcase-widget

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!

More Great Reading

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedIn

Filed Under: Realtor Tech Tips, Web and Social Media Tagged With: Agent Focused, IDX Integration, IDXBroker, Realtor Websites

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Looking For Something?

Email Newsletter

Sign up to receive free updates from the Winning Agent blog.

Connect With Me

  • Facebook
  • LinkedIn
  • Pinterest
  • Twitter

StudioPress Real Estate WordPress Theme: Agent Focused Pro Theme

StudioPress Premium WordPress Themes: Winning Agent Pro Theme




Loan Types & Property Definitions

There are a lot of different types of mortgages, and there are a lot of different types of real estate property. Here is a list of the most common types of each. We’ve added some links to the most popular articles on the subject.

Read More

Real Estate and Mortgage Forum

We think getting many viewpoints to a particular question is important because it helps you to make better decisions. It’s so important that we have woven the Forum all throughout Winning Agent. We invite you to ask questions, make comments, and be part of the discussion.

Read More

Glossary of Real Estate Terms

Real estate and mortgage finance often times comes with its own unique language. If you work with it every day, it becomes 2nd nature, but most people don’t work with it every day. So we’ve created a glossary of mortgage and real estate terms.

Read More

Copyright © 2023 Winning Agent · Powered by the Genesis Framework · Contact Us
Become an Affiliate
This site uses affiliate links, but know that we only recommend products we personally use and enjoy!

 

Loading Comments...