In this guide, we’ll show how to build a powerful, flexible, IDX real estate website using WordPress that will grow with your business. Whether you’re just looking for a real estate website for yourself, your real estate team, or a boutique brokerage, this guide will walk you through the steps to start generating leads quickly. Best of all, you won’t need to learn any code, and it will only take about an hour before you’re up and running with a basic IDX website.
What is IDX?
IDX (internet data exchange) is the most common software standard that Realtors, teams, and brokerages use to display frequently updated listings from their MLS on their own personal and brokerage websites.
How to Build an IDX Real Estate Website Using WordPress
Okay, now that you have a quick crash course on what IDX is, let’s dig in and start building a site. Before we get started though, you need to understand that both WordPress and IDX are incredibly powerful tools. As a result, they’re also both incredibly complicated. While this guide will give you a solid foundation in building your IDX website, there will still be a learning curve that may be steep for some to create exactly what you want. Don’t worry though, even professional developers have this issue. You’re not alone! Also, like anything that’s truly worth your time, you should look at this as a continual learning process. There a ton of great (and free) online resources to learn more about WordPress, IDX and tech in general.
Okay, caveats aside, here are step-by-step instructions for building an IDX real estate website with WordPress.
Step 1: Choose a Domain Name for Your Real Estate Website
The first step is to choose the domain name of your real estate website. To get started, enter your preferred domain name below to see if it’s available through Bluehost:
First you’ll need to choose an account plan. The “basic” account should be sufficient for most small businesses. You get 50 GB website storage, unlimited and up to 5 business email addresses, which we show you how to set up in this article. If you do need more than 5 email addresses, or want additional website space, consider the “plus” plan instead.
Domain Names Should Be Part Good Branding, Part SEO
Next you’ll need to choose the domain for your website. If you’ve already branded your business, then using your real estate brand as your URL is a no brainer. However, incorporating the location of your farm area in your URL can help you rank better on Google as well.
.Com Is Still The Gold Standard for Real Estate Domain Names
Even though there has been a lot of hype around the “.realtor” domain names, generally speaking, you always want to go with a “.com” for your real estate domain name. Consumers typically enter “.com” when entering a web address, so choosing an alternate domain like “.net” can cause you to lose leads who typed the “.com” version instead. If your first choice isn’t available as a “.com,” it’s worth brainstorming for more ideas. For inspiration, check out our guide How To Choose a Domain For a Real Estate Website.
Once you’ve settled on a domain, you’ll move onto checkout. Bluehost will ask you to choose your account plan – either 12 months, 24 months, or 36 months – and select any add-ons.
You’ll notice the $2.95/month pricing is reserved for the 36-month plan. Further below, you’ll notice a few add-ons. I recommend adding “Domain Privacy Protection” if you work in a home office. By law, your business’ contact information has to be posted publicly after registering a domain. With “Domain Privacy Protection,” however, Bluehost will hide your personal contact information and instead. This can save you from a lot of spam in your mailbox.
Next, Bluehost will prompt you to set password. This will have to be a combination of letters, numbers, and at least 1 special character. Once you’re finished, voila, we can start building your real estate website.
Step 2: Install WordPress
Next you’ll land on the Bluehost account homepage, which is like a control panel full of different menu options. If you want to get your business email address right away, we explain how to do that in this guide. Otherwise, we’re going to jump right into building your website.
Scroll down to the “website” boxes on your dashboard.
First off, it’s important to note that Bluehost does not give you tools to build a website directly. Rather, you can integrate a variety of website builders. The option we’re going to explain in this guide is called WordPress, and it will come free with your account.
Why We Recommend Using WordPress for IDX Real Estate Websites
WordPress is the #1 content management system in the world. About 25% of all websites across the entire web use WordPress. This is, in part, because WordPress can do just about anything: With thousands of themes and plugins available, you can add almost any feature you like. For a real estate WordPress website, this includes IDX integration, listing pages, listing search tools, mortgage calculators, email marketing, and much more.
To get started with WordPress, click the option “Install WordPress” on the website menu. Then click “Install” at the top.
Next, you’ll specify which domain you’re installing WordPress on.
On the next menu, make sure you enter a new password.
After this, installation will begin. This can take up to a few minutes. Once it’s complete, you’ll see a button appear at the top “View Credentials here.” Click this and you’ll find your new website login details:
Further down the page you’ll be asked to select a theme. Don’t worry about this just yet. In the next step, we’ll show you how to find a free theme after logging into your new website.
Step 3: Choose a Real Estate WordPress Theme
Congrats, you now have a blank WordPress real estate website! The next step is to choose a real estate WordPress theme and IDX provider to get MLS listings onto your real estate website.
In order to help you see what your IDX website can look like, we created a demo website, bestlakegastonhomes.com built on the Houzez real estate WordPress theme. Throughout the rest of this demo, we’ll be using the Houzez theme to show you the ropes. However, the design, layout, and general strategy we go over will work for any theme you choose.
Before we go over the rules for picking a good real estate WordPress theme, here’s a quick rundown of why we think the Houzez theme is a great choice for an IDX website:
Why We Chose the Houzez Real Estate WordPress Theme
For this guide we went with a popular, advanced and highly customizable real estate WordPress theme called Houzez. One of the main reason we chose Houzez is that It offers 7 different and gorgeous layouts, and very sophisticated options for editing and building your real estate website. Even better, Houzez offers six months of basic tech support for creating your site using their theme.
Click the image below to see how our demo site built using the Houzez theme looks online:
4 Rules to Choosing the Right Real Estate WordPress Theme
Instead of just designing and coding your website from scratch, WordPress offers you the ability to use partially created websites called themes that you simply customize with your own logo, copy, pictures, and pages. Since the underlying structure of most websites is so similar, it’s much, much easier to start with a theme instead of creating something from scratch.
While you can always change themes later, taking the time to choose the right theme now will save you time and effort down the road. To get you started, here are the four rules to choosing the right real estate WordPress theme:
1. Ignore the Pretty Pictures
The first rule to choosing a real estate WordPress theme, is to ignore the pretty pictures. Almost every single real estate WordPress theme you’ll find online has absolutely gorgeous pictures of mansions and exotic locales to show off the site. Ignore them!
As a general rule of thumb those gorgeous pictures are NOT included with the theme! Try to imagine replacing the images with listing pictures from your MLS or pictures that make sense for your farm area.
Don’t worry though, later in the guide I’ll show you my secret spot to get amazing, professional quality pictures for your site for free.
2. Most Listing Functions in Real Estate WordPress Themes Won’t Work With IDX Listings
Next, you need to understand that all of the advanced listing features and even layouts for listings searches, mapping, and more will NOT work with IDX. To take advantage of those features you will either have to manually enter your own listings, or get an XML feed from your MLS and hire a programmer to install it. There are a few problems with this approach. First, hiring a programmer can be very expensive (around $3000), and second, getting an XML feed from your MLS may not be possible unless you’re a brokerage or large team.
3. Make Sure it Looks Great and Works Well on Mobile
Instead, when choosing a theme, look at features, general aesthetics (fonts, colors, layout) as well as responsiveness (themes that know when a visitor is on a mobile device and change the theme to be readable on their specific device).
4. Make Sure it’s Compatible With IDX Real Estate Plugins like dsIDXpress
While most WordPress themes should be compatible with popular IDX providers, starting with a theme that you know is compatible is always a good idea. After all, better safe than sorry! Look for themes that say they work with DsIDXpress, IDX Broker, and Ihomefinder.
If you want to learn more about choosing a real estate WordPress theme, and check out the top 25 real estate themes on the market, check out our guide to real estate website templates here.
Where to Buy Real Estate WordPress Themes
Now that you know a bit more about choosing a good theme, here are a few places you can look to buy one.
Luckily, WordPress real estate themes are pretty affordable, they generally run between $30-90 to buy the theme. In other words you can buy your own theme for what you would pay most IDX real estate website companies every month! Yes, there’s more of a learning curve but you will OWN your site instead of renting it.
Step 4: Install Your Theme into WordPress
Once you’ve picked out a theme and downloaded it to your computer, you need to install the theme into WordPress. To get started, navigate to the .ZIP file you downloaded for your theme which will contain the layouts, code, and plugins for your WordPress site. Next right click on the theme, and and choose “Extract Here.”
To add a theme to your website, open your WordPress dashboard, scroll down and click “Appearance” then “Themes” on the left-hand toolbar. Then click on “Add New” then “Upload.”
To install your theme, simply navigate to the .ZIP file of the theme you downloaded. Click “Install,” and then click “Activate.”
Step 5: Install the Required Plugins Your Theme Needs to Run
Some themes require you to install certain free plugins for the theme to work. Since Houzez is a sophisticated theme with multiple layouts, it requires you to install a few plugins to run properly.
For this guide, we’re only going to concentrate on three of them:
Visual Composer is a WordPress plugin that makes it much easier to create and edit the layout of pages in WordPress. It uses a simple table-based layout system.
Slider Revolution is the animation program that let’s you create those cool sliding animations you see in the header of many websites these days.
WP Forms Lite is a simple form creator that we’ll use to create a basic contact form for our home valuation page we’ll use to generate seller leads.
To install the required plugins for your theme, click on “Plugins” then “Add New.” Once you’re on the Plugins page, click on the dropdown menu labeled “Bulk Options” then “Install.” Next, activate the plugins by returning to the the Plugins page and choosing “Activate” from the same dropdown menu.
Step 6: Choose & Install Your IDX Plugin into WordPress
Next, you’re going to need to set up an IDX provider in order to get an updated feed of listings from your MLS onto your website. A word of warning, getting listings onto your site is fairly easy, but choosing and configuring each IDX plugin can be a frustrating challenge if you’re not tech savvy.
To learn more about IDX Providers, check out our in-depth buyer’s guide here. For simplicity’s sake, we’re going to use Diverse Solutions Mapping IDX for the rest of this tutorial.
Like themes, you can install plugins straight from your WordPress dashboard. Head to “Plugins,” then click “Add New” on the left-hand menu bar. Enter the name of the IDX plugin you’d like to install. For our demo site, we installed the dsIDXpress plugin.
Caution! Installing a ton of plugins on WordPress can cause your site to slow down dramatically, have some pages or features stop working, or worse. When testing out IDX plugins, it’s a good idea to only install one plugin at a time. Also note that the demo versions you can install from WordPress will not connect to your MLS and only offer demo listings. To hook up an IDX plugin to your MLS, you need to contact each company before installing the plugin.
To install the dsIDXpress plugin, simply click “Install” and “Activate.”
Step 7: Import The Demo Content From Your Theme
Now that you have your IDX plugin installed, the next step is to install the demo content from your theme into WordPress. This will give you the foundation to start customizing the pages already created for your theme.
Like many real estate WordPress themes, Houzez has seven different demos to choose from, each with different layouts, fonts, and features. For our example site we chose the “Luxury Real Estate” demo. Choose whichever demo you think will work best with your brand. You can always change fonts, colors and layouts later, but it helps to start with something you really like.
To install the demo content, head to your dashboard and click on “Theme Options” then “Demo Importer” in the sidebar. Navigate to the demo you’d like to install, then click on “Import Demo” to install it into WordPress.
Step 8: Choose Your Header Style & Add Images & Text
Next, choose which header and top bar you’d like to use on your website. We went with the Slider Revolution Header as we like the way it looks. Please note that the headers that have Google maps or listings will not work with IDX listings. Unless you want to manually add your own exclusive listings or can get an XML feed from your MLS and hire a programmer to set it up, you’re going to want to choose either the slider revolution header, or the full screen header with video.
You can see the Slider Revolution header on our site here. The video header will look similar, but will have a large background video like the screenshot below:
How you customize your header will depend on which style header you choose, and how you want your site to look. Since we wanted out site to look fresh and modern, we went with the Slider Revolution header. This allows us to have two huge, beautiful images with animated copy sliding in for each image.
If you choose the Slider Revolution header, you’re going to need professional high resolution images to present in the header. To create our header, we chose free stock images from Unsplash.com, then changed their size using GIMP, a free graphic design program that works a lot like Photoshop. Using GIMP we cropped the images to 1024×648 pixels and uploaded them to the Slider Revolution plugin and changed the copy. In order to to make sure our page loads quickly, we only chose two images. The more images you use in your slider the longer it will take to load.
Since Slider Revolution is a powerful and highly customizable plugin, a full tutorial would be beyond the scope of this guide. Instead, we recommend you take the time to familiarize yourself with Slider Revolution by checking out the beginner videos on the plugin designer’s website. The tutorials are pretty in-depth, but if you ever find yourself in a jam you can either reach out to Houzez or use the Themepunch forums for support.
Step 9: Customize Your Logo & Contact Information
Now that you have your theme and demo content installed, you can start customizing your site by changing your logo and contact information. Instead of adding your logo and contact information on every new pages or widgets you create, themes like Houzez allow you to change them once, and have them auto populate on new pages or widgets you create.
If you don’t already have a logo, don’t sweat it, there are plenty of ways to get an affordable, professional looking logo these days. Here are a few options to consider:
Canva offers free templates to quickly design a professional looking logo. This is the site we used to create our logo for Lake Country Realty below.
The only caveats to using Canva is that in order to create a transparent logo, which you’re going to need for most themes, you need to sign up for an account which is $10 per month. The other issue is that you will never be able to trademark your logo. Not the end of the world, but might be a concern.
99 Designs isn’t free, but you can trademark the logo they design for you, and best of all, have multiple designers submit preliminary designs so you can choose what works best for you.
On Fiverr you can search for graphic designers who can design your logo for an affordable price. While the quality may not be as high as on 99Designs, you can get a logo for as little as $5.
Need some design inspiration? Check out our definitive guide to the best real estate logos in the industry today here.
Adding Your Logo to Your WordPress Theme
In order to have your logo display properly on different colored backgrounds, you or your graphic designer will need to create a few different variations of your logo.
A version of your logo that will work on dark backgrounds.
This should be a light colored logo (preferably white) that will
work on dark colored backgrounds. For example, on our homepages we have two images in the header that both have dark backgrounds, so we created a white logo with a transparent background:
A Version of Your Logo That Will Work on Light Colored Backgrounds
Since we have a white colored “sticky menu,” which is the menu
that follows you down the page as you scroll down, we also needed to include a dark colored logo. In our case, we just used a black colored logo:
How to Create Logos With transparent Backgrounds
You may have noticed that both of the logos we created for our site have transparent backgrounds. In other words, they don’t have the white background you get when you save a graphic in most design programs. Here’s how to create different versions of your logos with transparent backgrounds.
The best way to create logos with transparent backgrounds is to use Adobe Photoshop oir Illustrator. If you don’t have access to Photoshop or Illustrator, you can create logos with transparent backgrounds by using the paid version of Canva ($10 per month), or hire a graphic designer on Fiverr or 99 Designs to design your logo or create the versions you’ll need for your website.
You’re going to want to create your logos to be around 200 pixels wide, by around 75 pixels tall to work well with the Houzez theme.
Now that you have a few different logos ready to go, To add your logo to Houzez, go to your WordPress dashboard and click on “Appearance” then “Customize” and finally on “Logos and Favicon.”
Adding Your Contact Information to the Site’s Footer
Next, add your contact information and social media information to the header and footer of the site. Since Houzez is a very customizable theme, there are a few different places where you can add your contact info.
For our site, we chose to add our contact information in the footer of the site. Here’s how to add contact info to the footer of your site:
Click on “Appearance” then “Widgets” in the sidebar. Your contact information is listed under “Footer Area Two.” Click on the “Contact us” bar under “Footer Area Two” and enter your contact information. Click “Save” once you’re done.
Step 10: Create an Outline for The Pages You Want for Your Website
Okay, so now you should have a basic demo site running with a customized, header, contact information, and logo. The next step is to create an outline for the pages you want for your site.
While what pages you include will be largely based on what kind of are you work in, if you’re on a team, or here are some general ideas to get you started creating your outline:
About Us Page
This is where you introduce visitors to your business. Start with a quick 2-3 sentences about what makes your real estate agency or brokerage unique. Then write a brief backstory about yourself and any team members.
You might also want to use this space to embed a Google Map with your office location. This not only encourages drop-ins, but it can help establish credibility for your real estate business by showing your connection to the area/neighborhood.
Contact Us Page
A simple page that includes all of your key contact information – Phone, Email, and Office Address. You can also include a contact form.
Seller Lead Generation Landing Page
Since most of your website so far is buyer-oriented, you should create a separate page if you hope to attract potential sellers. A simple contact page that offers a CMA in exchange for contact info is a classic strategy to get seller leads.
Even better, you can try using instant home valuation landing pages from companies like Listings to Leads, Cloud Attract, or Home Value Leads. The theory behind using instant home valuations is that more people are willing to click a link than give you their contact info. Once they do get a valuation, they will be given the option to reach out for a more accurate CMA, or you can track them and use retargeting to show them ads on other websites.
This page will also be invaluable once you start advertising on Facebook or Google to generate seller leads. The idea is to create an ad on Facebook which sends your leads to this page once they click on the ad. Once there, they will give you their contact information for a free CMA, or instant home valuation.
Your blog is one the best ways you have to increase your real estate website’s ranking on Google. The idea is to write useful articles and neighborhood guides that will show up for very specific searches on Google. For example, someone may search for “prettiest blocks on the Upper West Side.” If you have a great article talking about the prettiest blocks on the Upper West Side, you’ll get a site visitor and possibly a lead.
In order to learn more about using SEO strategy to get your website to rank on Google, check out our Ultimate Guide to Real Estate SEO here.
A testimonials page will have all the great reviews and testimonials you’ve received from past clients. You can either create them on your own, or use a widget from an advanced theme like Houzez. Looking to get more reviews in general? Check out our guide on using social proof to get more leads here.
One of the best ways to get your WordPress IDX real estate website to rank well on Google is to create specific neighborhood pages with listings, neighborhood market data, school info, and as much interesting information you can dig up. This technique can work especially well for small micro neighborhoods, waterfront homes, golf course homes, homes in certain school districts, or even specific types of homes like Victorians or Mid Century homes.
The key is to figure out what people in your farm area are searching for and offer them a useful page with updated listings for that search. You can quickly and easily create pages with custom search results from your Diverse Solutions IDX plugin to populate these pages.
Even better, the more niche keywords you can rank for, the more Google traffic you can build to your site. You can create hundreds of these neighborhood pages to rank for as many niche keywords as you’d like.
In order to do this properly, you’re going to have to learn about finding what people in your farm area are searching for using keyword research. To learn more, check out our guide on real estate keyword research here.
Map Search Page
Since many homebuyers are used to using sites like Zillow or Realtor.com to search for homes, they’re probably used to using map searches to find homes in specific areas. Using our IDX provider Diverse Solutions, you can quickly and easily copy and paste a searchable Google Map with all the listings in your MLS onto a blank page to create a search by map page. To see a live demo, check out our Map Search page, or click the link below to visit Diverse Solutions to download a free demo:
Step 11: Create Your IDX Website Pages
Okay, by now you should have a customized header, and a rough outline of the pages you want to create for your website. The next step is to actually build out these pages. When you’re using a theme like Houzez, there are two ways to build out pages;
- Use the template pages that came with your theme
- Create new pages from scratch
Luckily, Houzez comes with enough page templates that you really shouldn’t have to create too many pages from scratch. Instead, you just need to edit the testimonials page, the blog, the about us page, and the home page. The one page that we suggest you create that Houzez doesn’t offer are the neighborhood pages. Here’s a quick walkthrough of building new pages for your IDX website.
Go to your dashboard and click on “Pages” in the sidebar. To edit a page from a template, click on “All pages” and choose the page you want to edit. Note that Houzez uses Visual Composer, which is a WYSIWYG (What You See is What You Get) editor that makes it very easy to edit pages. Here’s what our homepage looks like in Visual Composer:
The first thing you want to do is to change the title of the page. To edit the title, click in the text box right above the Visual Composer Icons.
Visual Composer allows you to drag and drop new “elements” into the page that you can then customize with your own copy, videos, pictures, or code. For example, the “Welcome Home” text in the middle of the page is in a text box element. To edit the text, hover over the green bar and click on the pencil icon which will open up a Microsoft Word like text editor:
Here you can edit your copy just like you would using Microsoft Words or Google Docs. If you want to add pictures, click the “Add Media” button. If you’d like to add a contact form, click the “Add Form” button.
The little blue icons are from the Diverse Solutions IDX plugin that we installed. You can either insert a single listing from the MLS, insert listings from a custom search (for example, houses in a particular zip code or in a certain price range), or insert an IDX search form so your site visitors can search for properties on their own.
When you’re done, click “Save Changes” and you’ll be returned to the Visual Composer view.
Adding New Elements to Your Page With Visual Composer
Once you have your copy edited in your text box, you can drag and drop the text box to be above or below other elements on the page by hovering over it and clicking the move icon in the green bar. You can also add new elements to the page by clicking the “+” icon at the top of each column.
You can choose to add a new text box, or one of the dozens of elements available from Visual Composer or through your theme. You can add raw HTML, Google Maps, a video player, single images, social media buttons, a testimonials slider, and much more.
Previewing, Saving and Publishing Your New Page
Once you’ve got your copy and page elements where you want them, click on the “Preview” button on the right side of the page to see what it will look like on your site. If you’re happy with the way it looks, go back to your Visual Composer page editor and click on “Publish.”
Congratulations! You now have a new page on your IDX real estate site!
Create Menus For The Navigation Bar in Your Site’s Header
Once you have a few pages done, you should start building out the navigation bar in your header so your site visitors can navigate to each page. This section is called your “top bar” Here’s what our top bar looks like:
Okay, now let’s go over building out the menu we have set up on the right side of the top bar. Go back to your dashboard and click on “Appearance” in the sidebar. Next, click on “Menus” to go to the edit menus page.
First, you’re going to select a menu you want to edit. You will have four options here, main menu, footer menu, pages menu, and help menu. For today, we’re only going to worry about the main menu. This is the menu that appears on our homepage and every other page we create automatically, unless we change that in WordPress.
Now select “Main Menu” from the dropdown box, and then click “Select.” Now we can edit just the main menu for our site. Here’s how. On the left hand side of the page we have the “Pages” tab. This area will show all the pages you’ve created for your website. To add a page to your main menu, click on “View All,” then check the box next to the page you want to add and click “Add to Menu.”
Now the page you’ve added to your menu will show up on the right hand side of the page under “Menu Structure.” Keep adding pages from the “Pages” tab until you have all the pages you want in your menu.
Editing the Names & Adjusting The Order of Pages in Your Menu
Once you have all the pages you want in your menu, you can now drag the pages up or down to determine what order they show up in your menu. By default, WordPress uses the name of the page as the name that will show up in your menu. For example, let’s say the title of your map search page is “Search Lake Gaston Properties by Map” that is what it will say in the menu. While that may work great for the title, it’s a little too long for the menu.
If you’d like to use a shorter name in your menu, like “Map Search,” click on the little arrow on the right side of the page name in the “Menu Structure” tab.
In the text box under where it says “Navigation Label,” edit the name to whatever you think works for your menu.
Creating Nested Menus
You can also create nested menus from the menu editor. To create a nested menu, just add a page to your menu, and drag it to the page you’d like to nest it under and hover over it. Once you let go of the mouse, the page will be nested under another page in your menu. If you mess up and want to delete the page or move it under another page, just click on the little arrow on the right side of the page and click “Remove.”
Nested menus are a great place to add your newly created neighborhood pages with IDX listings. For example, you might create a menu page called “Listings,” then nest each neighborhood page you’ve created under it.
The Bottom Line
You should now have a solid foundation for creating an IDX real estate website using WordPress. The next step in the process is learning more advanced things you can do with WordPress and your IDX provider, as well as creating neighborhood pages, instructional content for buyers and sellers, landing pages, and more. We are going to be adding more features and testing more software on this site in the near future. Stay tuned!