Support

Account

Home Forums ACF PRO Combine Multiple Tabs / tab groups

Solved

Combine Multiple Tabs / tab groups

  • 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?

  • 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.

  • 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.

  • 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.

  • 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!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.