How to link into the WordPress Customizer

customizer-links.php

/**
 * How to link into the WordPress Customizer
 */

Simple Link:
<a href="<?php echo esc_url( admin_url( 'customize.php' ) ); ?>">Link to Customizer</a>


Link to Panel:
$query['autofocus[panel]'] = 'nav_menus';
$panel_link = add_query_arg( $query, admin_url( 'customize.php' ) );
?><a href="<?php echo esc_url( $panel_link ); ?>">Link to Panel</a>


Link to section:
$query['autofocus[section]'] = 'title_tagline';
$section_link = add_query_arg( $query, admin_url( 'customize.php' ) );
?><a href="<?php echo esc_url( $section_link ); ?>">Link to Section</a>


Link to control (field)
$query['autofocus[control]'] = 'blogname';
$control_link = add_query_arg( $query, admin_url( 'customize.php' ) );
?><a href="<?php echo esc_url( $control_link ); ?>">Link to Control</a>


Return somewhere else after the Customizer:
$query['return'] = admin_url();
$link_with_return = add_query_arg( $query, admin_url( 'customize.php' ) );


Link to control, the return to another page:
$query['autofocus[control]'] = 'blogname';
$query['return'] = admin_url( 'post-new.php' );
$link = add_query_arg( $query, admin_url( 'customize.php' ) );
?><a href="<?php echo esc_url( $link ); ?>">Set title, then write post</a>


Set Preview page:
$query['url'] = site_url( '/news' );
$link = add_query_arg( $query, admin_url( 'customize.php' ) );
?><a href="<?php echo esc_url( $link ); ?>">News Page in Preview</a>



All together:
$query['autofocus[section]'] = 'menu_locations';
$query['return'] = admin_url( 'post-new.php?post_type=page' );
$query['url'] = site_url( '/about-us' );
$link = add_query_arg( $query, admin_url( 'customize.php' ) );
?><a href="<?php echo esc_url( $link ); ?>">Craziness!</a>

Very nice! I found it from https://www.slushman.com/how-to-link-to-the-customizer/

Heads up: These do not work if the Customizer is active, giving the link a .customize-unpreviewable class and therefore gets this CSS applied: cursor: not-allowed !important;

You can use https://developer.wordpress.org/reference/functions/is_customize_preview/ to detect if in the customizer.

And https://developer.wordpress.org/themes/customize-api/tools-for-improved-user-experience/#selective-refresh-fast-accurate-updates may be a handy alternative or supplement, too.

TIP: if you want to add links inside the customizer, you can use the customizer API:
<a href="javascript:wp.customize.panel( 'widgets' ).focus();">Widgets Panel</a>

Turned panel, section and control into shortcode options which you can easily stick into custom widgets or other help text on your site dashboard:

function customizer_link_shortcode($atts, $content = null){
		//type: panel, section, control
		//name: name of panel, section or control
		//link_text: the link title or name
		extract(shortcode_atts(array('type' => 'panel', 'name' => 'nav_menus', 'link_text' => 'Edit Menu'), $atts));
		
		switch($type){
			case "panel":
				$query['autofocus[panel]'] = $name;
				$url = add_query_arg( $query, admin_url( 'customize.php' ) );
				break;
				
			case "section":
				$query['autofocus[section]'] = $name;
				$url = add_query_arg( $query, admin_url( 'customize.php' ) );
				break;
			
			case "control":
				$query['autofocus[control]'] = $name;
				$url = add_query_arg( $query, admin_url( 'customize.php' ) );
				break;		
		}
		
		$link = sprintf('<a class="customizer_link" href="%1$s">%2$s</a>',$url,$link_text);
		
		return $link;
		
	}
add_shortcode( 'customizer_link', ,'customizer_link_shortcode' );