• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Terms of Service & Privacy
    • Accessibility
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » Add Tabs to Pristine and Agentpress Listings Similar to Realtor.com

Published on November 18, 2014 / Updated on November 27, 2016 / Reading Time: 2 minutes

Add Tabs to Pristine and Agentpress Listings Similar to Realtor.com

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.

tab-sample

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!

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrintShares3

    Filed Under: Tipsy Tuesday, Tutorials

    A recent conflict was found when Genesis Simple Share is activated and configured while using the Posts and Page Grid in Genesis Blocks. The error can be seen when viewing the content on the front end. The error does not display in edit mode. Below is a temporary fix that will allow you to manually set […]

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2022 · Designed with by Me! · Hosted on SiteGround

    We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy