How to Add a Home Search to Your Website

Update (7/14/2020): A new WordPress plugin was just released that makes adding an MLS home search easier than ever and gives you helpful features such as search results pop-ups that keep users on your site. Learn more at https://about.homeasap.com/wordpress/idx-mls-check

Today’s consumers expect to find an MLS search on any real estate agent’s website. So if you don’t have an IDX Home Search, you’re already falling behind the competition and losing leads. Luckily, adding an MLS search doesn’t have to be that difficult or expensive. Today, we’ll look at how you can add a home search to your website.

Before We Get Started

To add an MLS search to your website, you’ll need to purchase a service that allows you to connect to your MLS and gives you a landing page to perform searches. Obviously, we recommend our own IDX Home Search because it looks great and our MLS data feed is constantly updated.

IDX Home Search creates a landing page that lets users search the MLS for homes.

Besides an IDX landing page, you’ll also need a way to add the needed code to your website. For this article, we’ll be using WordPress to add the needed code snippet, but you can also make this work with other popular site builders like Wix and Weebly by using their “embed code” widgets. The process for these web builders should be similar to what you do on WordPress.

Maybe the word code gives you anxiety, but don’t worry. If you can copy and paste, then you can handle adding your home search to a website.

Click “Pages” to add a new page from the WordPress Dashboard.

Step 1: Create a Page For Your Home Search

Before you can install your home search, you need to page that will house your home search. To create a new page, go to your WordPress dashboard. You can get there by typing the main URL of your website followed by “/wp-admin/”, and then enter your username and password. Hover your mouse cursor over “New” and select “Page.”

A new screen should appear where you can edit your new page. Give your page a title that will make it easy for visitors to know exactly what they can do from this page. For our example, we’ll call this page “Home Search.”

Step 2: Create an iframe

Next, we need to create a container that will hold your IDX Home Search landing page. Web developers call this container an iframe. The iframe creates a window on your webpage that can load the landing page without users having to leave your site. Think of it as a webpage within a webpage.

Add an HTML Block

To add an iframe, you’ll need to add an HTML block to the page. This may look different depending on the WordPress theme you’re using, but virtually all themes should have this block. In the default editor, hover your mouse over the area where you would type your content. You should see a small plus sign appear. Click it, and type “Custom HTML” into the search box that appears.

The latest WordPress editor includes custom HTML blocks.

Insert an iframe

To add the iframe that will hold your home search landing page type the following code into the Custom HTML you just added.

 <iframe src="YOUR LANDING PAGE URL HERE" style="width: 100vw; height:100vh; position: fixed; top: 0; left:0; z-index: 500;"></iframe> 

You may notice that the code contains two statements with equal signs. This is where we can set attributes for our iframe element. The “src” attribute refers to the source of the content we’re going to load in the iframe. The “style” attribute lets us control how the iframe will look on the page.

Link Your Home Search to the iframe

To add an MLS search to your page, you’ll need the link to your IDX Home Search landing page. For our example, we’ll use the Home ASAP demo page at https://homeasap.com/JenniferAndersonTeam. Copy the URL of the landing page by selecting its web address in your browser. Then right-click and choose “Copy.”

Now go back to the WordPress editor. Then paste the IDX Home Page URL in after the “src” attribute. Be sure to include the equal sign and a quotation mark before and after the URL. Your Custom HTML block should look like this when you’re finished:

 <iframe src="https://homeasap.com/JenniferAndersonTeam" style="width: 100vw; height:100vh; position: fixed; top: 0; left:0; z-index: 500;"></iframe>

Most web page builders, including Wix, have widgets that allow you to add HTML to your page.

Step 3: Make Adjustments If Needed

If you have followed the instructions so far, you should see be able to see your home search appear when you click the “Preview” button. However, you may notice that some important elements like your navigation menu have disappeared or you may see items from the bottom of the page have floated into the middle of the page. Do not panic! This can usually be fixed.

Many themes include full-page templates with no sidebars.

If a Sidebar Appears Over the Page

If you see an unwanted search box and page links appear, you may need to turn off sidebars on the page. How you do this will depend on your theme. For many themes, you can change the page template to full-width, and this will remove sidebars. Other themes such as Divi, have an option to include no sidebars under the “Page Settings” menu. These options, if available, should appear on the right side of your page editor.

Depending on your theme settings, unwanted elements can appear.

If Other Elements Appear or Disappear

For some themes, important elements like the site navigation may seem to disappear after adding your home search. You can usually make them reappear by changing the z-index property. Find the section of the snippet that says “z-index: 500.” Try lowering the number until that element reappears. For instance, try using “z-index: 400;”, and see if the hidden element reappears.

On the other hand, you may have links and images that block your MLS landing page. In this case, you can bring the iframe to the “front” by making the z-index larger. For example, you may need to change it to “z-index: 550;”. Getting it just right will require some trial and error, but usually, these adjustments will usually solve the problem.

The top property moves the iframe down.

Moving Your Home Search Up or Down

You can also move the iframe that holds your home search landing page if needed. For this adjustment, you’ll need to change the value of the top property. By default, we have set the iframe to be 0 pixels from the top. You can move your home search down by making this number bigger. For instance, top: 300px; will move the home search section 300px down from the top.

When changing this property, be sure to include no spaces between the number and px. Also, be sure to put a semi-colon (;) directly after the ex and to use lower case letters.

Step 4: Publish the Home Search to Your Website

Once you’re satisfied with how your IDX Home Search appears, you’re ready to publish to your live website. Simply click the “Publish” button near the top right corner of your screen, and you’re done.

To get the most out of your home search, you’ll also want to add the page to your navigation menu so that it’s easy to access. You should also add call-to-action buttons around your site to encourage your site visitors to use your home search. In fact, we recommend adding a call to action as one of the first things people see on your home page.

Start Driving New Buyer Leads

Now that you have successfully added an MLS home search to your website you can turn your focus to driving new buyer leads. After all, your prospects can’t use your home search unless they know it’s there!

So get out there and start sharing! Send e-mails announcing your IDX Home Search to past clients. Advertise your home search on Facebook and Instagram. Include the web address on business cards and other collateral. The more you promote your IDX Home Search the more you return you’ll see.

Meet the Author

Jonathan earned his Masters in Mass Communications from the University of Florida. He specializes in online communications and web design. When he’s not developing marketing strategies, he enjoys hiking and playing the guitar.