Advertisement
Theme Development

Components of a Quality Real Estate Theme

by

Since creating my first real estate WordPress theme back in December of 2008, and thousands of buyers later, I've grown to know what buyers and real estate agents want in terms of features and ease of use.

In general, whenever you sit down to brainstorm a new theme, you need to think about the end-user: Put yourself in their shoes, how are they going to use the theme, what's most important to them in terms of features, design, etc.

In this case we're talking about the real estate industry, and over the course of this article, I'll cover key points and features that make up the perfect real estate WordPress theme.


Powerful Search Utility

Say you're looking for a home - the first thing you do when you're on a site is look for the search utility, right?

I know I did when I was looking to buy my first home, so this feature is usually priority number one. Take the WP Pro Real Estate 5 theme for example: The search utility is right up front and center in a nice bold background color preventing the user from getting lost scouring the homepage for what they really want.

ct-re-search-640x340

Now, how do you accomplish a search utility like this in your theme?

There's a great code library by Scribu called Query Multiple Taxonomies, which is the same one I use in all my real estate themes.


Homepage Layout

As you probably know, different niches require different homepage styles and layouts. In the real estate market there are a few main things you'll want to focus on:

  • Search - Make sure your search area is nice and high up on the page, with a clear and concise layout.
  • Featured Listings - These are important as most realtors want to promote certain listings, they can be in the form of a slider, carousel or multi-column layout.
  • Agent/Broker Contact Information - Obviously this one is very important, I recommend utilizing a top bar area in the header for phone and/or address information.
  • Large Map Utility - A great way to showcase a set of listings is to use a large map with custom pins and infoboxes, it gives the user a quick and easy way to immediately start browsing without having to search on specifics. A great example of this in action is the WP Pro Real Estate 3 theme.
  • Testimonials - These aren't required but I've found most people really like to use them, it gives the user a sense of security and a quick little background on the agent or broker they're looking into. A great example of this in action is the WP Pro Real Estate 5 theme.
  • Optional Widgetized Areas & Footer - It's always good to allow your users the flexibility to have plenty of widgetized areas as this allows them to add and remove content blocks without coding knowledge.

Custom Mapping

Mapping is a huge part of a real estate theme, whether it be a more advanced map on the homepage showcasing a bunch of featured listings with custom pins and info windows, or the standard style on the individual listings pinning just a single location.

mapping

Agent & Broker Contact Information

Ok ,so you've found the perfect home — what's the next step? Contacting the agent or broker of course. What I've done is created Agent Info and Broker Information widgets. This allows the agent/broker to place their contact info in any of the 10 widget ready areas, heck they can place them in all 10 if they want — ensuring they won't lose that sale.

agent-contact

Responsive Design

These days, the usage of mobile devices is huge, more and more people are browsing the internet on-the-go using smart phones and tablets.

Responsive web design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices, from desktop computer monitors to tablets and mobile phones.

You can see a great example of this in the WP Pro Real Estate 5 theme linked above. Use a QR code scanner app on your mobile device to check it out!

responsive

Featured Listings

Any agent or brokerage is going to have a few listings that they'll want to feature front and center on the homepage, at the top of the listing search area, or in any one of the many sidebar areas.

Taking a look at the WP Pro Real Estate 5 theme you can see a nice set of featured listings on the homepage, then a featured spot atop the listing search results. There is also a very flexible listings widget included where a user can choose from the many taxonomy types (property type, status, beds, baths, city, state, zip/postcode) then set a certain tag to pull from, in this case they would choose the Status and the tag of Featured, then set the number they'd like displayed.

featured-listings

Listing Detail Template

Another important element is the listing detail or single template, this needs to be a nice tight and focused layout. The hierarchy of elements I have found to work best is as follows:

  • Sub Header
    1. Breadcrumbs
    2. Previous/Next Listing Navigation
  • Main Content Area
    1. Street Address, City, State, Zip/Postcode
    2. Price
    3. Bed, Bath, Sq Ft or M2, MLS or ID #
    4. Slider of Images
    5. Listing Description (Post Content)
    6. Listing Features
    7. Location (Google Maps)
  • Sidebar (Widgets)
    1. Agent Info
    2. Broker Info
    3. Mortgage Calculator
    4. Request a Showing (Contact Form)
    5. Agents Other Listings

Here's an example of all these elements.


Agent Template

The Agent Template - or author.php - is a great way to showcase contact and bio information, along with a large map of that agent's listings. This is exactly what is done in the WP Pro Real Estate 5 theme shown below, or see the live example.

agent-template

Layout & Customization Options

This isn't so much real estate specific but is an important aspect of any theme. Don't let your user get stuck into a single layout, offer them options. For instance in WP Pro Real Estate 4, I've included left column, right column, and three column layouts that can be chosen on a per page, per section (listing search and single) basis or generally site-wide.

Whether it is uploading a custom logo, or creating a custom skin, you need to allow your users to easily customize their theme to fit their specific needs. Take a look at the example below, I've built out an extensive admin framework to allow all sorts of theme options and possibilities.

There are tons of great admin frameworks out there. but two that I can personally recommend are SMOF and Redux.


Conclusion

Hopefully you've found these points and suggestions useful and I've inspired you to go on and create your own perfect real estate WordPress theme!

Related Posts
  • Code
    Articles
    Introduction to WordPress App ThemesApp theme 400
    With the increasing growth rate of WordPress powered websites, the need for WordPress themes is rising. Multi-purpose themes are becoming highly popular among website owners. Many existing themes are built mainly to address blog functionality. But with the growth of WordPress web application development, we are in need of specialized themes for different purposes. These themes are known as app themes. In this article, we going to familiarize with the concept of app themes and their usage in real world.Read More…
  • Code
    WordPress
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Releasing Your ThemeCreating wordpress theme from html 400
    If you've been following this series you now have a working WordPress theme. Your theme has a number of template files, including a page template and an archive template, and also has featured image support.Read More…
  • Web Design
    Roundups
    5 Awesome Ghost Themes You Can Learn FromGhost logo
    With the world near-saturated with the success of WordPress, along came Ghost, 2013's new blogging platform of note. Born from a simple concept, the project was successfully backed with nearly £200,000 of Kickstarter pledges and released to the world as an alternative open source platform. Much like WordPress, Tumblr or any major blogging platform, Ghost is supported by an ever-growing community of themes to customize the appearance of your blog. In this roundup, we're going to take a look at a handful of some of our favorite Ghost themes and analyse why they work so well.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…