Agent Focused Pro 2 Theme Setup

  1. Home
  2. Docs
  3. Agent Focused Pro 2 Theme...
  4. Front Page Set Up
  5. Search Bar Widget Area

Search Bar Widget Area

front-page-search-bar

Depending on which Starter Pack you used, the search bar widget area is set up using either the AgentPress Listings plugin or the IMPress for IDX Broker plugin.
You will need to set up each of these plugins before you can use the widgets for Search.
AgentPress - Listing plugin - Add Taxonomy, Terms, and Listings.
OR
IMPress for IDX Broker plugin - Connect API and create Wrapper page.

(This area can also use a search widget from other IDX services, but may require additional styling to look like the demo.)

IMPress for IDX Broker Search

You will want to connect your IDX Broker account to your WordPress website for the IDX Broker search widget to work.

IMPress Omnibar with Extra Fields

This is how the IDX Broker Omnibar looks with no Extra fields checked.
IMPress Omnibar Search

In WordPress, go to Appearance > Widgets > Search Bar. or Appearance > Widgets > Primary Sidebar.
Then add the IMPress Omnibar Search widget to the Search Bar widget area, and use the following settings.

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.
    • Default Styling? is Checked
    • You can check Extra Fields?
    • You can check both Extra Fields? and Include Min Price?
  4. Save and repeat for the sidebar.
  5. Then copy the CSS below and paste it into Appearance > Customize > Additional CSS at the bottom

/* For IMPress Omnibar Search using Default Settings
---------------------------------------------------------- */
.search-bar .idx-omnibar-form ul,
.sidebar .idx-omnibar-form ul{
	margin: 0;
}
.search-bar div.awesomplete input[type=text].idx-omnibar-input {
    height: 50px;
}
.search-bar .idx-omnibar-form button {
    margin: 0 5px 0 0;
}
.search-bar .idx-omnibar-form.idx-omnibar-extra-form .idx-omnibar-extra.idx-omnibar-price-container.idx-omnibar-min-price-container,
.search-bar .idx-omnibar-extra.idx-omnibar-price-container.idx-omnibar-max-price-container,
.sidebar .idx-omnibar-form.idx-omnibar-extra-form .idx-omnibar-extra.idx-omnibar-price-container.idx-omnibar-min-price-container,
.sidebar .idx-omnibar-extra.idx-omnibar-price-container.idx-omnibar-max-price-container,
.sidebar .idx-omnibar-form.idx-omnibar-extra-form .idx-omnibar-extra {
    width: 100%;
}
@media only screen and (min-width:680px) {
    .search-bar .idx-omnibar-form.idx-omnibar-extra-form .idx-omnibar-extra.idx-omnibar-price-container.idx-omnibar-min-price-container,
    .search-bar .idx-omnibar-extra.idx-omnibar-price-container.idx-omnibar-max-price-container {
        width: 12%;
    }
}

 

AgentPress Listings Search

You will need to create some taxonomies, create some taxonomy terms, and add some property listings, so that the search widget will show.

In WordPress, go to Appearance > Widgets > Search Bar.
Then add the AgentPress - Listing Search widget to the Search Bar widget area, and use the following settings.
agentpress listing search

  1. Check off the the taxonomy that you want to appear in your search bar.
  2. Button text: Demo has Search.
  3. Click the Save button.