NxNI

Add a Real Estate Virtual Tour Link Button with WordPress Custom Fields

The Custom Field is the Swiss Army knife of WordPress. When you need that extra bit of functionality in a WordPress powered site, custom fields can be a real life saver. An example: A real estate client needed an easy way to link to virtual tours. Custom Fields to the rescue! Here’s how I did it:

To follow this tutorial, you’ll need to be comfortable with editing WordPress template files and CSS files.

Step One: Modify the theme template.
In this example, I’m using the excellent AgentPress WordPress theme from StudioPress. The template file I’m editing here is property_listing.php.

Add these lines where you want the button:

<?php if(get_post_meta($post->ID, "virtual_tour", $single = true) != ""){ ?>
<div class="more-btn"><a href="<?php echo get_post_meta($post->ID, "virtual_tour", $single = true); ?>">Check Out the Virtual Tour!</a></div>
<?php } ?>

So if a “virtual_tour” custom field is added, its value (the link) will be wrapped inside the “more-btn” div anchor.

Step Two: Make the Button
Now we need to make this look like a button. Here’s an easy way to get your button started.
You can customize the button until you’re content. Then copy the code.
I didn’t use the ButtonMaker for this example. Here’s the CSS I came up with:

/* virtual tour button */
div.more-btn a, div.more-btn a:visited{
color: #fff;
background-color: #072c53;
padding: 5px 14px;
margin-bottom: 5px;
text-decoration: none;
border: 1px solid #2f4e6e;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
}
div.more-btn a:hover{
color: #fff;
background-color: #2f4e63;
padding: 5px 14px;
margin-bottom: 5px;
text-decoration: none;
border: 1px solid #2f4e6e;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
}
div.more-btn{
margin-bottom: 10px;
margin-left: 186px;
}

This code goes into the style.css of the theme you’re working with. Here I’m using some of the newish CSS3 properties for a progressively enhanced button. The last few lines center the button on the page.

Step Three: Add the Custom Field
When you’re adding a listing via the WordPress admin, scroll down to the Custom Fields box. Add your new custom field, and the virtual tour link for the value:

Of course you could use this technique to link to MLS listings, a listing on Zillow, etc. Here’s the finished button:

12. June 2010 by joshfeck
Categories: Real Estate, Tutorials, WordPress | 1 comment