• 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
    • Pre-Made Genesis Theme Installation & Customization
    • Same Day Installation Service
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
    • Support
  • Shop
  •  

Updated on November 27, 2016

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!

FacebookTweetPinPrintShare1

Filed Under: Tipsy Tuesday, Tutorials

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.

  • Facebook
  • Google+
  • RSS
  • Twitter

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–2021 · Designed with by Me! · Hosted on SiteGround