Categories
Code Design Tutorial

Creating a Real Estate Website in WordPress — Part 2

Real estate website screenshot

If you find this article helpful, please share it, or Digg it!

In Part 1 of Building a real estate website in WordPress, you learned about a plugin called FreshPost that we used to set up the basic structure of your real estate website.  Using this article, you will be able to display a single listing page that has all the content your real estate website will need.

Before we start…

When writing a tutorial, it’s hard impossible to address all the variations that occur between projects; instead, just know that there are going to be differences — use the tips shown here, but possibly not verbatim.

A few notes:

  • Gallery and map functionality are coming. They will be part of future installations of the series.
  • All modifications are being made to the single.php file. If your real estate website will have a blog, simply add logic to only show the template if it’s in a specific category.
  • I welcome all comments, questions, modifications, and improvements — as long as they’re constructive. No flame, please.

Show listing status in the headline

If you want to show listing status changes, you can do so like this:

 

<h2><?php the_title();
if(get('Listing Status') == "Sold" || get('Listing Status') == "Under Contract") {
	echo '<span class="sold"> – '.get('Listing Status').'</span>';
}?></h2>

This will add ” — Sold” to the title of the listing. You can also use that method for adding a “Sold” banner across your images.

Setting up WordPress for all that data

When creating a real estate website, the biggest design challenge is displaying all the data involved. There’s a slew of it, and the data may not be available for each listing.

In order to handle the data, I created two functions, one called length(), and one called wp_real_estate().  Length simple checks if the passed variable is empty, or if it has a result.  wp_real_estate() is for passing and parsing arrays, something the FreshPost plugin doesn’t do out of the box.

Add the following to your code:

Add the following to the bottom of get-custom.php included with the FreshPost plugin. You can also just add it to the top of your template file if you want.

 

// Created by Zack Katz of Katz Web Design
// http://www.katzwebdesign.net
// as seen on http://katzwebdesign.wordpress.com/2008/04/22/building-a-real-estate-website-in-wordpress-part-1/
// [email protected]

function length($string, $length = 0) {
	if($string && $string != '' && (strlen($string) > $length)) {
		return $string;
	} else {
		return false;
	}
}
function wp_real_estate($fields, $type='', $class='') {
	 // The FreshPost plugin includes arguments that do essentially the same thing:
	// function get ($field, $before='', $after='', $none='', $between='', $before_last=''); , but get()
	// doesn't handle arrays, and with this many fields, it could get uglier than the code below.

	if(isset($class) && $class != '') {
		$class= ' class="'.$class.'"';
	} else { $class = ''; }

	if($type == 1 || $type == 'ul' || !isset($type)) {
		// Unordered List
		$open_wrap = "<ul$class>";
		$close_wrap = "</ul>";
		$open_listing_title = "<li><strong>";
		$close_listing_title = "</strong>:";
		$open_listing_value = " ";
		$close_listing_value = "</li>";
	}

	elseif ($type == 2 || $type == 'ol') {
		// Unordered List
		$open_wrap = "<ol$class>";
		$close_wrap = "</ol>";
		$open_listing_title = "<li><strong>";
		$close_listing_title = "</strong>:";
		$open_listing_value = " ";
		$close_listing_value = "</li>";
	}
	elseif($type == 3 || $type == 'dl') {
		// Definition List
		$open_wrap = "<dl$class>";
		$close_wrap = "</dl>";
		$open_listing_title = "<dt>";
		$close_listing_title = "</dt>";
		$open_listing_value = "<dd>";
		$close_listing_value = "</dd>";
	}

	$listing_module = '';

	foreach ($fields as $field) {

		if($field && get($field) != '' && get($field) != 'n/a') {

			// TBD for taxes, utilities, etc.
			if(get($field) == 'TBD') {
				// For new properties, taxes and utilities may not yet be set
				$field_value = '<acronym title="To Be Determined">TBD</acronym>';
			}
			else {
				$field_value = get($field);
			}

			if($field == 'Total Square Feet') {
				// In order to better inform the user of the website, you can add [title] attributes to a listing
				$field = '<span title="The sum of both finished and unfinished square feet in the house." class="info">'.$field.'</span>';
			}

			// Construct each field
			$listing_module .=
			$open_listing_title.$field.$close_listing_title.
			$open_listing_value.$field_value.$close_listing_value;

		} // end if field is not empty

	} // end foreach field

	if($listing_module && $listing_module != '') {
		// If any results have been obtained, wrap them.
		$listing_module = $open_wrap . $listing_module . $close_wrap;
		$details = NULL; // just making sure to reset $details
		return $listing_module; // send back the data
	}
	else {
		// If the results are empty, don't show anything and throw false
		$details = NULL; return false;
	}
}

 

Once you’ve added the functions, you’re ready to pass arrays to FreshPost and send out chunks of content all at once.

Create blocks of content

You can have all your content in one big wad, but breaking it down makes it easier for the user to scan and easier for you to style.

  • A summary box: real estate websites often have a summary of each listing that is easy to find and compare with other listings.
  • Listing description
  • Listing details include all information about a listing’s features
  • Room dimensions 
  • School information
  • Map — Coming in a future installation
  • Inquery form — Coming in a future installation

Listing summary box

You may want to have a summary of the most important data for your listing.

 

// Summary box includes most important information
$headline = '<h3>House Summary</h3>';
$details = array('Price', 'Square Feet', 'Bedrooms', 'Full Bathrooms', 'Total Square Feet', 'Lot Size');
$details = wp_real_estate($details, 1, 'summary');
if($details) {
	echo $headline . $details;
}

Listing description

For the description of the property, all we do is use the standard WordPress the_content(). Double-check to make sure there’s anything to display, and if so, show it.

 

// Description of listing uses the standard the_content
$description = the_content('<p>Read the rest of this entry »</p>');
if(length($description, 10)) {
	// make sure the description's at least 10 characters (it should be!), then display
	echo '<div class="description">'.$description.'</div>';
}

 

Listing details box

The listing details box contains all house information except schools and dimensions. Have as many or as few fields here as you want.

 

// Set the headline for the section
$headline = '<h2 id="house_details">Details</h2>';
$details = array('Price', 'MLS Number', 'Address', 'City', 'State', 'County', 'ZIP Code', 'Neighborhood', 'Square Feet', 'Total Square Feet', 'Full Bathrooms', '1/2 Bathrooms', 'Year Built', 'Taxes', 'Construction Type', 'Roof Material', 'Average Utilities', 'Car Storage', 'Basement','Basement Details', 'HOA Fees', 'HOA Fees Include');
$details = wp_real_estate($details, 3, 'details');
if($details) {
	// If there were any results, show the headline and the results.
	echo $headline . $details;
}

Room Dimensions

Only three rooms were set up to be given dimensions in the first tutorial, so we use those three here. If you need more, add more using FreshPost in the administration.

 

$headline = '<h2 id="house_dimensions">Dimensions</h2>';
$details = array('Dining Room', 'Living Room', 'Family Room');
$details = wp_real_estate($details, 3, 'details');
$box = 0;
if($details) {
	// Dimensions and schools are both 1/2 width; wrapping them in .width50 acheives that
	echo '<div class="width50">';
	echo $headline . $details;
	echo '</div>';
	$box++; // These modules are only 1/2 width; I want to keep track of when to clear them
}

 

School name & website

Schools are a different type of content, so we use a different function that takes the name of the school and if there’s a school website, links to the website.

 

function wp_real_estate_schools($school_name = '', $school_url = '') {
	if(length($school_name)) {
		if(length($school_url)) {  // if there's a website, show the link
		$school = '<li><a href="'.$school_url.'" rel="external" title="Visit the '.$school_name.' website">'.$school_name.'</a></li>';
		} else { // otherwise, just the name
		$school = $school_name;
		}
	}
return $school;
}
$headline = '<h2 id="house_schools">Schools</h2>';
// Pass each school (Elementary, Middle, High) through the function
$schools = wp_real_estate_schools(get('Elementary School'), get('Elementary School URL'));
$schools .= wp_real_estate_schools(get('Middle School'), get('High School URL'));
$schools .= wp_real_estate_schools(get('High School'), get('High School URL'));
if(length($schools, 7)) {
	echo '<div class="width50">';
	echo $headline;
	echo '<ul>'.$schools.'</ul>';
	echo '</div>';
	$box ++; // keep track of odd/even content box
}

 

Clearing the float

The Dimensions and Schools content boxes were 50% width, and so is this box. If only one was shown (because the other had no content), we clear the floats so that the map & contact form are side-by-side.

 

if($box % 2 != 0) { // if box divided by 2 has a remainder, then it's odd.
		// Make sure there's not a single widow box, if so, then clear it --
		// We want the map is on the left and the contact form on the right
		echo '<div class="clear"></div>';
}

Until next time…

If you have any questions, comments, revisions, leave a comment below. Have you used this advice on your website, or for a client? Please link back to this article, share it with your friends, and/or Digg it. Thanks!

Next time: Incorporating Google Maps

By Zack Katz

Zack Katz is the founder of GravityKit and TrustedLogin. He lives in Leverett, Massachusetts with his wife Juniper.

25 replies on “Creating a Real Estate Website in WordPress — Part 2”

It’s going to be quite nice; just waiting on some content. You can see a static listing based on the same template (sans navigation) at 2250SouthMarion.com.

Glad you liked the tutorial!

Sounds Good. I’m seriously liking these types of tutorials, much more like case studies…but they leave you wanting as you wait…

take care

Thanks for the great tutorial Zack. I’ve been trying to implement this to my website and I need a little help here.

When I put something like the code bellow:
$details = array('Square Feet', 'Full Bathrooms', 'Total Square Feet', 'Lot Size');

there’ll be error like bellow:
WordPress database error: [You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1]
SELECT properties FROM wp_rc_cwp_custom_field_properties WHERE custom_field_id =

My MySQL version is 5.0.45.

I think I figured out the problem (not really solved it); I’m using Flutter (new form of Freshpost). When I de-activated Flutter and installed Freshpot, the problem’s gone.

But I still want your tutorial works on Flutter also.

I am just starting my first RE website. I put together the initial bones using a “Simple Real Estate Theme”, but I have yet to figure out how to get the listings to the website from the ftp download. Any thoughts? (Total Newbie, and hoping I didn’t bite off more than I can chew.)

I’m not sure how the laws are in Colorado, but in Texas, it is against the law for an agent to post Sold Data online for any listing. An agent is also required to remove any “for sale” advertising for each listing once it is no longer for sale.

Wouldnt it be better to optimize a site for neighborhoods that always have homes for sale, and use and IDX or MLS Feed of some sort to show accurate listing data?

Have a html real estate site that does great  but need new site to completement it with our video, blog posts, podcasts, etc. Working on a new joomla site for that but only wanted a widget for our stand alone blog that pulls from idx of our Maine mls or could be our listings on realtor.com Not making a real estate site full blown for our http://www.meinmaine.com blog but adding a little real estate portal. Suggestions? Our model T realty site does well but was designed up in dial up days.. http://www.mooersrealty.com Thanks!

Please use SyntaxHighlighter or some other code highlighter plugin… Your code is overflowing out those divs which is getting mixed with the content making them both ‘UNREADABLE’ !!!

Thanks,
Rutwick

What about RETS 2.0 integration?  Ive been using vielerets and I cant get it work with the new server upgrade. 

Hi,
I have never use wordpress… So, is it possible to make  “Real Estate Website” using any template of wordpress ? If yes then how can I start with it ?

Thanks You

Comments are closed.