Combine Multiple Tabs / tab groups

• nkals722

• February 25, 2016 at 9:59 am

I’ve scoured the site for this and have seen that someone created a solution for this but it does *not* work for ACF Pro.

I’m really, really wanting the ability for acf tabs to be shown within 1 tag group instead of having them stack on top of each other if they are different field groups. It would organize pages so much better when you have certain field groups that are on multiple pages.

Any thoughts or has anyone found a solution to this that they don’t mind sharing please?

• James

• February 25, 2016 at 4:46 pm

Hi @nkals722

I’m afraid you can’t do something like that. What you can do is moving a field group into a tab. This page should give you more idea about it: http://www.advancedcustomfields.com/resources/moving-wp-elements-content-editor-within-acf-fields/.

That is a guide to move WordPress content editor, but you can do the same thing with field groups.

I hope this helps.

• nkals722

• February 26, 2016 at 1:31 am

Thanks for the reply. Unfortunately manually moving individual fields around doesn’t really solve the problem of adding the tabs to a single tab group.

To your knowledge, do you know what changed between acf 4 and acf 5 / pro that disallowed this functionality? We have a pressing enough need for this that I’ll probably continue looking regardless.

• James

• February 26, 2016 at 3:38 pm

Hi @nkals722

I’ve just checked this plugin: https://wordpress.org/plugins/acf-merge-group-tabs/ and made some modification for ACF 5. It’s not working properly on my end, but I hope it’s working on your end. Please add this code to your functions.php file:

add_action('admin_footer', function() {

	$screen = get_current_screen();
	if ( $screen->base == 'post' ) {
		echo '
		<!-- ACF Merge Tabs -->
		<script>		

			var $boxes = jQuery("#postbox-container-2 .postbox .acf-field-tab").parent(".inside");

			if ( $boxes.length > 1 ) {

			    var $firstBox = $boxes.first();

			    $boxes.not($firstBox).each(function(){
				    jQuery(this).children().appendTo($firstBox);
				    jQuery(this).parent(".postbox").remove();				    
			    });
				
			}
			
		</script>';
	}
	
});

Hope this helps.

• nkals722

• March 9, 2016 at 4:35 am

Thanks James,

This got me most of the way there.

I removed the “#postbox-container-2” part of the selector and it worked for me.

What I ended up doing is making sure all of my field groups have tabs, and then making an empty field group called “options” with nothing but a tab in it of the same name and made that the first field group to be shown. Then I added this could to the end of your script:

$firstBox.find(“div”).first().remove();

What that does is it removed the “Options” tab but used that as a container for all of the other tabs while maintaining the “options” title.

Many thanks for the help!