Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Tab Template using ACF Repeater field data
-
I was initially using your entire interface when creating this virtual tour post:
http://tours.promediatours.com/virtual-tour/5105-seward-road-brentwood-tn/
But I needed something that was visually simpler with less options for my clients to add tabs and tab info with no coding (other than pasting embed code from YouTube or a slideshow).
So for the tab data entry, I am using the ACF (Advanced Custom fields) plugin. The ACF plugin has an add-on field called a repeater field - basically an array creator. It's great for this project because the generated post UI is simple.
All that the client sees when creating a new Virtual Tour (post) is a button for "Add Tab."
Once clicked, three fields for the tab appear: 1. the tab name field, 2. an up-loader button for the tab image thumb, and then 3. a wysiwyg to embed a youtube video or slideshow. See the screenshot below:
http://tours.promediatours.com/files/2012/02/virtual-tour-tab-entry-ss.jpg
To show the tab data on the post, I am using the code below for the template:
//the_repeater_field + the_sub_field
if(get_field('tab')): ?>
<ul>
<?php while(the_repeater_field('tab')): ?>
<li><?php the_sub_field('tab_name'); ?></li>
<li><img src="<?php the_sub_field('tab_thumb'); ?>" width="150" height="100"></li>
<li><?php the_sub_field('tab_content'); ?></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<div class="clear"></div>
Now that the data entry solution is in place, I am back to needing tabs. I love the WP UI visual rendering of the tabs and want them to look just like the example.
http://tours.promediatours.com/virtual-tour/5105-seward-road-brentwood-tn/
How do I do this on the template level?
I am using minimatica and have created a child theme. I have created a new post type for virtual tours. It has it's own template "content-tour.php" so I can do whatever is needed separate from the post templates.
Thanks in advance for your help. Please let me know if I need to provide any more information.
ProMedia Tours -
Just a note: I noticed your templates in the settings. Can I use that for this project, and How would I get the data from the ACF Repeater field to populate the WP UI tabs?
-
Hi Marty,
You can do this with a little HTML at template level. HTML template reference is here - http://pastebin.com/Axxs0TzK
//the_repeater_field + the_sub_field
if(get_field('tab')): ?>
<!-- a encloser div for each tabset. -->
<div class="wp-tabs smoothness jqui-styles wpui-tabs-vertical wpui-no-background">
<?php
// Repeat this for each tab.
while(the_repeater_field('tab')): ?>
<h3 class="wp-tab-title"><img src="<?php the_sub_field('tab_thumb'); ?>" width="150" height="100"><?php the_sub_field('tab_name'); ?></h3>
<div class="wp-tab-content"><?php the_sub_field('tab_content'); ?></div>
<?php endwhile; ?>
</div><!-- end .wp-tabs -->
<?php endif; ?>
<div class="clear"></div>
Please note this processes individual tabs within a single tabset. And the templates you see in admin are used only for posts related functions. -
I'm blown away. Thank you so much! I have been trying to find code that will work. This works wonderfully! No repeating region needed.
http://tours.promediatours.com/tours/9710-concord-rd-4/