One of my clients using Pristine asked me if they could use Tabs similar to Realtor.com for their property details. I told them it was possible and had to figure out a way to do it. Below is the method I used to achieve this look and functionality. It’s really pretty basic and you can dress it up with CSS in your style sheet.
First – go grab a copy of the Tabby Responsive Tabs here. You can install it directly under Appearance > Plugins. Then activate it. I like this plugin because it’s responsive and I didn’t have to fuss with the theme’s media queries.
Next you want to figure out what you want to show under each of your tabs. For the purposes of this tutorial, I am using the Property Details along with their respective short codes. Depending on how you have added your property details, you need to figure out placement. The original Agentpress Listings instructions tell you to place your short codes in the body of your listings. For Pristine, I added a Single Property Details widget which is placed after the content area.
You use this one code for both areas:
For Pristine – drag a Text Widget over to the Single Property Details widget area. Add the code above to that text widget and save it. For other Agentpress Listings compatible themes – add the code as instructed by the theme developer. The CSS used for Pristine is below. You can use this as a guide for your Agentpress Listings compatible theme.
As you add more tabs, the plugin with automatically resize the tab widths for you.
The text-widget CSS shown in this code is for the Contact Form generated by the Jetpack plugin. If you are not using Jetpack you can omit this CSS.
You can see a working copy here. Please note – the new version of Pristine shown is not available for download yet.
And that’s my tutorial and tip for #TipsyTuesday!
Did you find this blog or tutorial helpful?
Like my Signature? Get the Signature Widget for Genesis right here!