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/
// zack@katzwebdesign.net
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
The post Creating a Real Estate Website in WordPress — Part 2 appeared first on Katz Web Services.