Trends

Building a Real Estate Listing Site with WordPress

We show you the tools you will need and provide an in-depth overview for creating a Real Estate Listing site with WordPress.

Share on FacebookTweet about this on TwitterPin on PinterestShare on RedditShare on LinkedIn

Welcome to the first post of our "WordPress as…" series. The goal with this series is to take some of the amazing resources available on Envato Market and use them to create a specific type of WordPress site. We’ll show you the tools you need and provide an in-depth overview of how to get up and running quickly. Today, we’ll show you how to create a Real Estate Listing site.

Choosing Your Theme

We’re going to start simple and use the Realty WordPress Theme by ThemeTrail.

Realty - Responsive Real Estate WordPress Theme

After searching the Market for real estate themes, I was drawn to Realty. It has been beautifully designed and has the perfect set of features for what we need today:

  • Built using Bootstrap 3.3.1.
  • Fully Responsive Template.
  • Ready to be translated into the language of your choice via WPML.
  • Using Advanced Custom Fields, you can easily add fields to your property listings.
  • An AJAX property search – you can even search using custom fields.
  • Allow others to post properties on the front end of the site for free or take payments via PayPal.
  • Support for importing MLS/IDX listings via a plugin.
  • Visitors can compare properties and can even save their favorites.

Frankly, there are many more features included with Realty that I couldn’t possibly list here. Suffice to say, it has the tools you need to get off to a running start with your real estate website. So, let’s take a look at what it can do for you.

Setting Up

First of all, I was thrilled to see that Realty offers a very detailed documentation area that guides you through every step of the process. There’s a Best Practice section that lists recommended settings for your WordPress install. It even shows you how to create custom fields with Advanced Custom Fields and setup contact forms with Contact Form 7 (both of which the theme author lists as recommended plugins).

That’s definitely going the extra mile in terms of documentation.

Also included is a child theme, which you web pros can use to make CSS changes or create custom templates.

Installing

To install the theme, you’ll want to login to your WordPress installation and go to Appearance > Themes.

There are two different zip files you’ll want to upload by clicking on the Add New button on the Themes page, then clicking Upload:
realty.zip (the main, or parent, theme)
realty-child.zip (the child theme)

Once you’ve uploaded both files, find them in your list of installed themes and activate the Realty Child theme. This way, when Realty has updates, you won’t lose any of the customizations you make.

Demo Data

Realty also includes an XML file full of demo posts and property listings, which I’m going to upload in Tools > Import (you may need to install the WordPress Importer plugin if you haven’t already done so). This will be a big help in seeing how the theme works. Once you’re done exploring, you can always delete the data.

Since we now have all of the demo content we’ll need, I’ve gone into Settings > Reading and set Home – Property Map as the site’s static home page. This will display a map with properties listed on our site. You could also choose the more generalized Intro page or Home – Slideshow options.

Map Configuration

When editing the Home – Property Map page, you’ll notice a Property Maps Settings panel. I’m going to set this up so that it only shows properties listed for sale in London (where many demo listings are set), categorized as houses.

Property Map Settings

That setup displays like so on the home page:

Property Map displayed on the home page

Theme Options

In Appearance > Theme Options, you’ll see a list of powerful features that will help you make this site your own.

Of course you can choose from the standard fare such as your site’s logo, typography, social media links and colors. Beyond that, you’ll get to the real fun, including:

Properties

You’ll be able to add any custom fields or meta information you’ve created, change the property listing’s layout style and appearance, allow unregistered users to temporarily save their favorite listings, use different image sizes, toggle use of contact forms and configure a similar properties recommendation engine.

Tuts+ logoHigh quality images are key to a successful Real Estate site. If you’re looking for some tips, you should check out the Guide to Getting Started in Real Estate Photography over on Tuts+.

Property Search

This is a fun feature that is going to be vital to the user-friendliness of your site. This may also be the most complicated to setup. Thankfully, there’s a handy guide for building a custom search form. In this case, I tried to build a form that had the very basics of what home buyers would be looking for.

Shown here, setting up a custom search field (left) and the resulting form as displayed on the site (right).

Creating a custom property search.

Property Submit

If you’re going to allow others outside of your organization to list properties, you can set that up here. This is also where you would setup your PayPal information if you plan on charging users for submitting their listings.

The eCommerce feature includes the ability to use subscription payments, which would be great for charging monthly or yearly fees. If desired, you could also charge a fee on a per-property listing basis.

Real Estate Agents

If your site is going to have multiple Real Estate Agents, adding them to the mix is as easy as going to Users > Add New User inside WordPress. A new user role called Agent is added by the Realty theme, which you’ll want to assign all new internal agents you add to the site.

A nice feature for agents (and site administrators) is that an agent can add and manage their properties completely through the front end of the site. Agents can also fill out their profile and contact information.

Adding a property on the front end of the site.

Property Features

When creating or editing a property, there are a good many options available. There are standard fields for price, type of property, number of bedrooms/bathrooms, square footage along with areas to set the location and add a photo gallery.

A few added bonuses include the ability to add a video from either YouTube or Vimeo and attach files to the listing (such as a PDF brochure). If you’re adding/editing through the WordPress admin, you can mark a property as "Featured", which you can use a shortcode or widget to display. You can also assign the property to a specific Agent registered on the site.

Of course, this is also where the ability to add custom fields comes into play. If there are other items you want to display on your listing, you’ll be able to do so. You can also edit existing data – like the list of property features – for more personalization.

Shortcodes

Displaying real estate listings wherever you want is easy, thanks to a collection of built-in shortcodes. Codes are available for listing featured properties, a single property, properties from any combination of locations, list agents, testimonials, a property search form or a Google map.

Accessing the shortcodes is as simple as utilizing the button added to the WordPress editor’s toolbar.

Adding Shortcodes through the WordPress editor

Note that these functions are also available as widgets to use in any of the 8 sidebars included with the theme.

Overall Impressions

Realty is a theme that was built to cater especially to real estate agencies. While most needs will be met with a somewhat default setup, the fact that you can indeed customize the theme to add those personal touches makes it a winner in my book.

There’s a delicate balance when it comes to building out a theme. You want to make sure that less technical users will be able to make their way around without too much fuss. At the same time, you want to give professional designers and developers a canvas they can use to make customizations.

As a web professional, I was impressed looking at the various theme templates. They’re built in such a way that you can make changes without fear of breaking anything. If a client wants something changed that requires hacking away at the CSS or template (using the child theme, of course), it should cause very little pain. I can’t say that about many themes.

If you’re looking to use the power of WordPress to run a real estate agency site, the Realty theme can be of great benefit. You can get up and running without ever leaving the WordPress admin. But under the hood is a theme that can handle a good bit of customization as well. Overall, a very solid theme.

Browse More WordPress Real Estate Themes on ThemeForest →

Tuts+ logoIf you’re a designer or developer that’s looking to build your own real estate WordPress theme, Tuts+ have an extensive tutorial on Developing a Real Estate WordPress Theme and another that discusses the Components of a Quality Real Estate Theme.