Support

Account

Home Forums Feature Requests Ability to Link to Specific Tabs on Options Page

Solving

Ability to Link to Specific Tabs on Options Page

  • It would be great to be able to link to a specific Tab when being used on the Options pages and have that tab be the active tab on arrival.

    For example: We place links in our themes that are conditional to certain roles and/or capabilities. An Edit button appears on the front-end for our editors that links to the /wp-admin/admin.php?page=my_custom_options_page – allowing them to get to the right area to edit the content easier. We should be able to include a #tab2 to the end of the link to open that specific tag.

    Hope this makes sense.

  • Agreed. This would be a great feature, and really improve the UX of options (or any edit page).

    • jsilver

    • September 1, 2015 at 1:52 pm

    I am doing this on some of my sites with the following code. YMMV performance wise having this inline, in an enqueued file, etc depending on the specific implementation:

    
    add_action( "admin_footer", "acf_link_to_tab" );
    function acf_link_to_tab(){ ?>
    	<script>
    	(function($){
    		acf.add_action('ready', function(){
    			if (location.hash.length>1){	
    				var hash = location.hash.substring(1);
    				$('.acf-tab-wrap .acf-tab-button').each(function(i, button){ 
    					if (hash==$(button).text().toLowerCase().replace(' ', '-')){
    						$(button).trigger('click');
    						return false;
    					}
    				});
    			}
    		});
    	})(jQuery);
    	</script><?php	
    }
  • Nice approach, jsilver. I’d add a decodeUriComponent() around the hash to make it support all languages, some non English chars would be automatically encoded by the browser.
    so, something like this:

    
    //add an ACF tab shortcut link
    add_action( "admin_footer", "acf_link_to_tab" );
    function acf_link_to_tab(){ ?>
    	<script>
    	(function($){
    		acf.add_action('ready', function(){
    			if (location.hash.length>1){	
    				
    				let hash        = location.hash.substring(1);
    				let decodedHash = decodeURIComponent(hash);
    				
    				$('.acf-tab-wrap .acf-tab-button').each(function(i, button){ 
    					
    					let target = $(button).text().toLowerCase().replace(' ', '-');
    					
    					if (decodedHash == target){
    						$(button).trigger('click');
    						return false;
    					}
    					
    				});
    			}
    		});
    	})(jQuery);
    	</script><?php	
    }

    If you really want, you can add a try-catch around the decode call.

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.