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:
One Comment
great information, gave me so many ideas on different things I can add to my site. thank you!