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.

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>

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>