ACF: Link to Specific Tab

Advanced Custom Fields, or ACF, provides a great user interface for defining and laying out custom fields for Posts, Pages, Custom Post Types, Options, Users and more in WordPress. The Tab Field provides an easy way to clean up your user interface by seperating different field inputs into different tabs, making it easier for your users to find what they are looking for.

One feature that is missing from the Tab field however is the ability to link directly to a specific tab from another page. We can work around this with some pretty straightforward JavaScript. In short when the acf “ready” event fires, we want to look at all the tab buttons, and if any match our URL hash (in lowercase with spaces replaced with hyphens) then we “click” that link, loading the appropriate tab. Subsequently we can update the hash in the address bar any time a new tab is clicked making it easy for uses to bookmark the page or send the link to another user.

If your tab name is “Options Tab 1” the link to it would be something like edit.php?post_type=my-post-type#options-tab-1.

(function($){
	// run when ACF is ready
	acf.add_action('ready', function(){
		// check if there is a hash
		if (location.hash.length>1){
			// get everything after the #
			var hash = location.hash.substring(1);
			// loop through the tab buttons and try to find a match
			$('.acf-tab-wrap .acf-tab-button').each(function(i, button){ 
				if (hash==$(button).text().toLowerCase().replace(' ', '-')){
					// if we found a match, click it then exit the each() loop
					$(button).trigger('click');
					return false;
				}
			});
		}
		// when a tab is clicked, update the hash in the URL
		$('.acf-tab-wrap .acf-tab-button').on('click', function($el){
			location.hash='#'+$(this).text().toLowerCase().replace(' ', '-');
		});
	});
})(jQuery);

You may also like...

4 Responses

  1. Zach Nicodemous says:

    Would this work when the ACF Form is rendered on the front end rather than the backend?

    • Justin Silver says:

      It should work on the front end as well, you would just need to make sure that you load the JavaScript snippet wherever you want it to run. In short, it just looks at the hash on the URL and tries to find a matching tab, if it can find it it triggers a click event to select it. Nothing front or back end specific.

  2. Davide says:

    Hi Justin, I have a question.

    It is possible to use the unique name of the field (ie field_567be3579e216) and not the name that we set? I’m doing a multilanguage project and the value of the name would not work with another language if not set, it directly.

    Thank you very much for helping.

    Davide

    • Justin Silver says:

      It should be possible – I was using the name for readability in the URL, but the field key is also present in an html data attribute. I haven’t tested it but you should be able to replace the instances of

      $(button).text().toLowerCase()

      with something like

      $(button).data('key')

      to make it work. I’m including this functionality in the new version of my Validated Field plugin so I’ll see about making it work with both there once I have some time to test.

      Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *