A Genesis-based page template for ACF Pro that allows nested tab groups. 1st level is horizontal tabs, 2nd level is vertical tabs. Uses Flex

9/19/2017 - 3:35 PM

A Genesis-based page template for ACF Pro that allows nested tab groups. 1st level is horizontal tabs, 2nd level is vertical tabs. Uses Flex

A Genesis-based page template for ACF Pro that allows nested tab groups. 1st level is horizontal tabs, 2nd level is vertical tabs. Uses Flexington for columns (not required but would need additional CSS. Works as-is in https://maipro.io.

tabs.php

<?php

/**
 * Template Name: Tabs
 */

// Register tab js including jQuery UI Tabs.
add_action( 'wp_enqueue_scripts', 'prefix_load_tab_script' );
function prefix_load_tab_script() {
	wp_register_script( 'prefix-tabs-wrap', get_stylesheet_directory_uri() . '/js/prefix-tabs.js', array( 'jquery-ui-tabs' ), '1.0.0', true );
}

// Output the tabs.
add_action( 'genesis_entry_content', 'prefix_maybe_do_tabs' );
function prefix_maybe_do_tabs() {

	// Bail if ACF is not active.
	if ( ! function_exists( 'get_field' ) ) {
		return;
	}

	// Get the tabs.
	$tabs = get_field( 'tabs' );

	// Bail if no tabs.
	if ( ! $tabs ) {
		return;
	}

	// Enqueue our script now that we know we have tabs.
	wp_enqueue_script( 'prefix-tabs-wrap' );

	echo prefix_get_tabs( $tabs );

}

/**
 * Helper function to get the tabs, maybe as vertical tabs.
 *
 * @param  array        $tabs      The ACF repeater field for the tabs. Keys of 'title', 'content'.
 * @param  boolean      $vertical  Whether this should be a horizontal or vertical tab group.
 *
 * @return string|HTML             The tab group HTML.
 */
function prefix_get_tabs( $tabs, $vertical = false ) {

	// Bail if no tabs.
	if ( ! $tabs || ! is_array( $tabs ) ) {
		return;
	}

	$html   = '';
	$prefix = '';
	$class  = 'prefix-tabs-wrap';

	if ( $vertical ) {
		$prefix = 'nested-';
		$class .= ' prefix-tabs-vertical';
	} else {
		$class .= ' prefix-tabs-horizontal';
	}

	$html .= sprintf( '<div class="%s">', $class );

	if ( $vertical ) {
		$html .= '<div class="row">';
	}

		$tab_columns = '';

		if ( $vertical ) {
			$tab_columns = ' col col-xs-12 col-sm-3 col-md-3';
		}

		$html .= sprintf( '<ul class="prefix-tabs%s">', $tab_columns );

			// Tabs.
			foreach ( $tabs as $tab ) {

				// Skip if no title.
				if ( ! isset( $tab['title'] ) || empty( $tab['title'] ) ) {
					continue;
				}

				// Output the title.
				$html .= sprintf( '<li class="prefix-tab"><a href="#%s">%s</a></li>', $prefix . sanitize_key( $tab['title'] ), sanitize_text_field( $tab['title'] ) );

			}

		$html .= '</ul>';

		$content_columns = '';

		if ( $vertical ) {
			$content_columns = ' col col-xs-12 col-sm-9 col-md-9';
		}

		// Content.
		foreach ( $tabs as $tab ) {

			// Skip if no title.
			if ( ! isset( $tab['title'] ) || empty( $tab['title'] ) ) {
				continue;
			}

			$content = isset( $tab['content'] ) ? $tab['content'] : '';

			if ( isset( $tab['tabs'] ) ) {
				$nested_tabs = prefix_get_tabs( $tab['tabs'], true );
				if ( ! empty( $nested_tabs ) ) {
					$content .= $nested_tabs;
				}
			}

			// Output the content.
			$html .= sprintf( '<div id="%s" class="prefix-tab-content%s">%s</div>', $prefix . sanitize_key( $tab['title'] ), $content_columns, $content );

		}

	if ( $vertical ) {
		$html .= '</div>';
	}

	$html .= '</div>';

	return $html;

}

genesis();

tabs.css

/* ## Tabs - General
--------------------------------------------- */

.prefix-tab a {
	display: block;
	background: #f5f5f5;
	color: #555;
	text-transform: uppercase;
	font-size: 14px;
	padding: 8px 16px;
	border: 1px solid #eee;
	text-decoration: none;
	outline: none;
	letter-spacing: .2pt;
	font-family: 'Open Sans', sans-serif;
}

.prefix-tab a:hover {
	color: #888;
}

.prefix-tab.ui-tabs-active a {
	background: #fff;
}

.prefix-tab.ui-tabs-active a:hover {
	color: #555; /* this counteracts the tab color hover */
}

.prefix-tab-content {
	padding: 24px;
	overflow: hidden;
}

/* ## Tabs - Horizontal
--------------------------------------------- */

.prefix-tabs-horizontal > .prefix-tabs,
.entry-content .prefix-tabs-horizontal > .prefix-tabs {
	margin: 0 0 -1px;
	overflow: hidden;
}

.prefix-tabs-horizontal > .prefix-tabs > .prefix-tab {
	display: inline-block;
	margin: 0 5px 0 0;
}

.prefix-tabs-horizontal > .prefix-tabs > .prefix-tab a {
	border-bottom: 0;
}

.prefix-tabs-horizontal > .prefix-tab-content {
	border: 1px solid #eee;
}

/* ## Tabs - Vertical
--------------------------------------------- */

.prefix-tabs-vertical,
.entry-content .prefix-tabs-vertical {
	margin: 0 0 0 -25px;
	border: 1px solid #eee;
}

.prefix-tabs-vertical > .row > .prefix-tabs,
.entry-content .prefix-tabs-vertical > .row > .prefix-tabs {
	background-color: #fafafa;
	margin: -1px -1px 0;
	border-right: 1px solid #eee;
	overflow: visible;
}

.prefix-tabs-vertical .prefix-tab {
	display: block;
	width: 100%;
}

.prefix-tabs-vertical .prefix-tab a {
	margin-bottom: -1px;
	border: 1px solid #eee;
	border-right: 0;
}

.prefix-tabs-vertical .prefix-tab.ui-tabs-active a {
	margin-right: -1px;
}

/* ## Tabs - Mobile
--------------------------------------------- */

@media only screen and (max-width: 544px) {

	.prefix-tabs-vertical,
	.entry-content .prefix-tabs-vertical {
		margin: 0 -16px;
	}

	.prefix-tabs-horizontal > .prefix-tabs,
	.prefix-tabs-vertical > .row > .prefix-tabs,
	.entry-content .prefix-tabs-horizontal > .prefix-tabs,
	.entry-content .prefix-tabs-vertical > .row > .prefix-tabs {
		display: block;
		background-color: #fafafa;
		margin: 0;
		padding: 4px;
	}

	.prefix-tabs-horizontal > .prefix-tabs,
	.entry-content .prefix-tabs-horizontal > .prefix-tabs {
		margin: 0;
		border: 1px solid #eee;
		border-bottom: 0;
	}

	.prefix-tabs-vertical > .row > .prefix-tabs,
	.entry-content .prefix-tabs-vertical > .row > .prefix-tabs {
		border: 0;
		border-bottom: 1px solid #eee;
	}

	.prefix-tabs-horizontal > .prefix-tabs > .prefix-tab,
	.prefix-tabs-vertical > .row > .prefix-tabs > .prefix-tab {
		display: inline-block;
		width: auto;
		margin: 2px;
	}

	.prefix-tabs-horizontal > .prefix-tabs > .prefix-tab a,
	.prefix-tabs-vertical > .row > .prefix-tabs > .prefix-tab a,
	.prefix-tabs-horizontal > .prefix-tabs > .prefix-tab.ui-tabs-active a,
	.prefix-tabs-vertical > .row > .prefix-tabs > .prefix-tab.ui-tabs-active a {
		display: block;
		width: 100%;
		margin: 0;
		border: 1px solid #eee;
	}

}

prefix-tabs.js

jQuery(function( $ ){
	$( '.prefix-tabs-wrap' ).tabs();
	$( '.prefix-tabs-vertical' ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
	$( '.prefix-tabs-vertical' ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});

acf-json-nested-tabs.json

[
    {
        "key": "group_59c02d79966e4",
        "title": "Tabbed Content",
        "fields": [
            {
                "key": "field_59c02db106f90",
                "label": "Tabs",
                "name": "tabs",
                "type": "repeater",
                "value": null,
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "collapsed": "field_59c02dee06f91",
                "min": 0,
                "max": 0,
                "layout": "block",
                "button_label": "Add Tab",
                "sub_fields": [
                    {
                        "key": "field_59c02dee06f91",
                        "label": "Title",
                        "name": "title",
                        "type": "text",
                        "value": null,
                        "instructions": "",
                        "required": 1,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "default_value": "",
                        "placeholder": "",
                        "prepend": "",
                        "append": "",
                        "maxlength": ""
                    },
                    {
                        "key": "field_59c02f1d06f92",
                        "label": "Content",
                        "name": "content",
                        "type": "wysiwyg",
                        "value": null,
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "default_value": "",
                        "tabs": "all",
                        "toolbar": "full",
                        "media_upload": 1,
                        "delay": 0
                    },
                    {
                        "key": "field_59c030d2694b7",
                        "label": "Tabs",
                        "name": "tabs",
                        "type": "repeater",
                        "value": null,
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "collapsed": "field_59e7d655a8de2",
                        "min": 0,
                        "max": 0,
                        "layout": "block",
                        "button_label": "Add Tab",
                        "sub_fields": [
                            {
                                "key": "field_59e7d655a8de2",
                                "label": "Title",
                                "name": "title",
                                "type": "text",
                                "value": null,
                                "instructions": "",
                                "required": 1,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "prepend": "",
                                "append": "",
                                "maxlength": ""
                            },
                            {
                                "key": "field_59e7d66ca8de3",
                                "label": "Content",
                                "name": "content",
                                "type": "wysiwyg",
                                "value": null,
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "tabs": "all",
                                "toolbar": "full",
                                "media_upload": 1,
                                "delay": 0
                            }
                        ]
                    }
                ]
            }
        ],
        "location": [
            [
                {
                    "param": "page_template",
                    "operator": "==",
                    "value": "templates\/tabs.php"
                }
            ]
        ],
        "menu_order": 0,
        "position": "normal",
        "style": "default",
        "label_placement": "top",
        "instruction_placement": "label",
        "hide_on_screen": "",
        "active": 1,
        "description": ""
    }
]

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

A Genesis-based page template for ACF Pro that allows nested tab groups. 1st level is horizontal tabs, 2nd level is vertical tabs. Uses Flex