Create Tabbed Content in WordPress with ACF Repeater and Tabslet

This tutorial walks through how to create a Tabbed content section in WordPress using Advanced Custom Fields and Tabslet.

ACF (Advanced Custom Fields) Pro comes with an addon called the Repeater field which allows a user to perpetually add additional rows of data of certain custom fields to a page or post (or custom post type) in WordPress.

This can be an ideal client solution for adding repetitive data without having to enter code or risk user error on inadvertently messing up the html structure.

This tutorial uses the Repeater field on a Genesis WordPress theme but the process would be roughly the same on any WordPress theme

Setting up Advanced Custom Fields

Download and install ACF Pro (the Pro version is a paid plugin), then create a new custom field group called Tabbed Content with a field label called Tabs (tabs as the field name) – this will have 2 sub-fields called tab_link and tab_content.

 

tabbed-content-acf-fields

Also in the location area you can target which post/page that you want the Tabbed Content custom fields to appear in.

Target post

Target post

tabbed-content-user-fields

User input fields now ready in the assigned post or page

So far, the custom fields for the Tabbed Content are created and will publish to a post, what is now needed is setting up the jQuery plugin: Tabslet for the tab functionality.

Setting up Tabslet for the Tabs

Download the latest Tabslet and file in your js folder the jquery.tabslet.min.js file and you’ll need an init file also in the js folder – create one named tab-init.js and add in:

jQuery(document).ready(function($){

$('.tabs').tabslet({
 active :1,
 animation : true
 });

});

Here I am setting the first tab as the active one and also animating the transition from one tab to another – for more settings check here.

Now enqueue these 2 script files in your functions.php file…

add_action( 'wp_enqueue_scripts', 'themeprefix_tab_scripts' );
/**
* Script-tac-ulous -> tab scripts.
*/
function themeprefix_tab_scripts() {
wp_enqueue_script( 'tabs' , get_template_directory_uri() . '/js/jquery.tabslet.min.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'tabs-init' , get_template_directory_uri() . '/js/tabs-init.js', array( 'tabs' ), '1', true );
}
view raw functions.php hosted with ❤ by GitHub

 The MarkUp

The regular html mark up for the tabs would be like this…

<div class="tabs">
<ul class="horizontal">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<div id="tab-1">Lorem 1 ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="tab-2">Lorem 2 ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="tab-3">Lorem 3 ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
view raw html.html hosted with ❤ by GitHub

This is what we need to incorporate into our ACF custom fields and repeater code block.

<?php
add_shortcode( 'tab_content', 'themeprefix_tabbed_content' ); //Position the content with a shortcode [tab_content]
function themeprefix_tabbed_content() {
ob_start();
// My ACF Fields for reference
// tabs - field group
// tab_link - sub-field tab link
// tab_content - sub-field tab content
// check if the repeater field has rows of data
// loop through the rows of data
// display a sub field value
echo '<div class="tabs">
<ul class="horizontal">';
if( have_rows('tabs') ):
$i = 1;
while ( have_rows('tabs' ) ) : the_row();
echo '<li><a href="#tab-' . $i . '">' . get_sub_field( "tab_link" ) . '</a></li>';
$i++;
endwhile;
echo '</ul>';
$i = 1;
while ( have_rows('tabs') ) : the_row();
echo '<div id="tab-' . $i . '">' . get_sub_field( "tab_content" ) . '</div>';
$i++;
endwhile;
echo '</div>';
else :
// no rows found
endif;
return ob_get_clean();
}
view raw shortcode.php hosted with ❤ by GitHub

So I am outputting this as a shortcode, you can also do it as template, I am running 2 while loops as the html has to close the list items before starting the div content elements. There are 2 increment variables which take care of the href and id linking of the linked tabbed content.

For positioning on the page or post you then would just add the shortcode [tab_content] in this instance.

That’s it – this is great when you need more of a foolproof way of an end user updating this type of content without touching the html structure behind it.

Leave a Comment





%d bloggers like this: