Title: WP_Customize_Manager::render_control_templates
Published: December 18, 2014
Last modified: February 24, 2026

---

# WP_Customize_Manager::render_control_templates()

## In this article

 * [Source](https://developer.wordpress.org/reference/classes/wp_customize_manager/render_control_templates/?output_format=md#source)
 * [Related](https://developer.wordpress.org/reference/classes/wp_customize_manager/render_control_templates/?output_format=md#related)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_customize_manager/render_control_templates/?output_format=md#changelog)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_customize_manager/render_control_templates/?output_format=md#wp--skip-link--target)

Renders JS templates for all registered control types.

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_customize_manager/render_control_templates/?output_format=md#source)󠁿

    ```php
    public function render_control_templates() {
    	if ( $this->branching() ) {
    		$l10n = array(
    			/* translators: %s: User who is customizing the changeset in customizer. */
    			'locked'                => __( '%s is already customizing this changeset. Please wait until they are done to try customizing. Your latest changes have been autosaved.' ),
    			/* translators: %s: User who is customizing the changeset in customizer. */
    			'locked_allow_override' => __( '%s is already customizing this changeset. Do you want to take over?' ),
    		);
    	} else {
    		$l10n = array(
    			/* translators: %s: User who is customizing the changeset in customizer. */
    			'locked'                => __( '%s is already customizing this site. Please wait until they are done to try customizing. Your latest changes have been autosaved.' ),
    			/* translators: %s: User who is customizing the changeset in customizer. */
    			'locked_allow_override' => __( '%s is already customizing this site. Do you want to take over?' ),
    		);
    	}

    	foreach ( $this->registered_control_types as $control_type ) {
    		$control = new $control_type(
    			$this,
    			'temp',
    			array(
    				'settings' => array(),
    			)
    		);
    		$control->print_template();
    	}
    	?>

    	<script type="text/html" id="tmpl-customize-control-default-content">
    		<#
    		var inputId = _.uniqueId( 'customize-control-default-input-' );
    		var descriptionId = _.uniqueId( 'customize-control-default-description-' );
    		var describedByAttr = data.description ? ' aria-describedby="' + descriptionId + '" ' : '';
    		#>
    		<# switch ( data.type ) {
    			case 'checkbox': #>
    				<span class="customize-inside-control-row">
    					<input
    						id="{{ inputId }}"
    						{{{ describedByAttr }}}
    						type="checkbox"
    						value="{{ data.value }}"
    						data-customize-setting-key-link="default"
    					>
    					<label for="{{ inputId }}">
    						{{ data.label }}
    					</label>
    					<# if ( data.description ) { #>
    						<span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
    					<# } #>
    				</span>
    				<#
    				break;
    			case 'radio':
    				if ( ! data.choices ) {
    					return;
    				}
    				#>
    				<# if ( data.label ) { #>
    					<label for="{{ inputId }}" class="customize-control-title">
    						{{ data.label }}
    					</label>
    				<# } #>
    				<# if ( data.description ) { #>
    					<span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
    				<# } #>
    				<# _.each( data.choices, function( val, key ) { #>
    					<span class="customize-inside-control-row">
    						<#
    						var value, text;
    						if ( _.isObject( val ) ) {
    							value = val.value;
    							text = val.text;
    						} else {
    							value = key;
    							text = val;
    						}
    						#>
    						<input
    							id="{{ inputId + '-' + value }}"
    							type="radio"
    							value="{{ value }}"
    							name="{{ inputId }}"
    							data-customize-setting-key-link="default"
    							{{{ describedByAttr }}}
    						>
    						<label for="{{ inputId + '-' + value }}">{{ text }}</label>
    					</span>
    				<# } ); #>
    				<#
    				break;
    			default:
    				#>
    				<# if ( data.label ) { #>
    					<label for="{{ inputId }}" class="customize-control-title">
    						{{ data.label }}
    					</label>
    				<# } #>
    				<# if ( data.description ) { #>
    					<span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
    				<# } #>

    				<#
    				var inputAttrs = {
    					id: inputId,
    					'data-customize-setting-key-link': 'default'
    				};
    				if ( 'textarea' === data.type ) {
    					inputAttrs.rows = '5';
    				} else if ( 'button' === data.type ) {
    					inputAttrs['class'] = 'button button-secondary';
    					inputAttrs.type = 'button';
    				} else {
    					inputAttrs.type = data.type;
    				}
    				if ( data.description ) {
    					inputAttrs['aria-describedby'] = descriptionId;
    				}
    				_.extend( inputAttrs, data.input_attrs );
    				#>

    				<# if ( 'button' === data.type ) { #>
    					<button
    						<# _.each( _.extend( inputAttrs ), function( value, key ) { #>
    							{{{ key }}}="{{ value }}"
    						<# } ); #>
    					>{{ inputAttrs.value }}</button>
    				<# } else if ( 'textarea' === data.type ) { #>
    					<textarea
    						<# _.each( _.extend( inputAttrs ), function( value, key ) { #>
    							{{{ key }}}="{{ value }}"
    						<# }); #>
    					>{{ inputAttrs.value }}</textarea>
    				<# } else if ( 'select' === data.type ) { #>
    					<# delete inputAttrs.type; #>
    					<select
    						<# _.each( _.extend( inputAttrs ), function( value, key ) { #>
    							{{{ key }}}="{{ value }}"
    						<# }); #>
    						>
    						<# _.each( data.choices, function( val, key ) { #>
    							<#
    							var value, text;
    							if ( _.isObject( val ) ) {
    								value = val.value;
    								text = val.text;
    							} else {
    								value = key;
    								text = val;
    							}
    							#>
    							<option value="{{ value }}">{{ text }}</option>
    						<# } ); #>
    					</select>
    				<# } else { #>
    					<input
    						<# _.each( _.extend( inputAttrs ), function( value, key ) { #>
    							{{{ key }}}="{{ value }}"
    						<# }); #>
    						>
    				<# } #>
    		<# } #>
    	</script>

    	<script type="text/html" id="tmpl-customize-notification">
    		<li class="notice notice-{{ data.type || 'info' }} {{ data.alt ? 'notice-alt' : '' }} {{ data.dismissible ? 'is-dismissible' : '' }} {{ data.containerClasses || '' }}" data-code="{{ data.code }}" data-type="{{ data.type }}">
    			<div class="notification-message">{{{ data.message || data.code }}}</div>
    			<# if ( data.dismissible ) { #>
    				<button type="button" class="notice-dismiss"><span class="screen-reader-text">
    					<?php
    					/* translators: Hidden accessibility text. */
    					_e( 'Dismiss' );
    					?>
    				</span></button>
    			<# } #>
    		</li>
    	</script>

    	<script type="text/html" id="tmpl-customize-changeset-locked-notification">
    		<li class="notice notice-{{ data.type || 'info' }} {{ data.containerClasses || '' }}" data-code="{{ data.code }}" data-type="{{ data.type }}">
    			<div class="notification-message customize-changeset-locked-message {{ data.lockUser.avatar ? 'has-avatar' : '' }}">
    				<# if ( data.lockUser.avatar ) { #>
    					<img class="customize-changeset-locked-avatar" src="{{ data.lockUser.avatar }}" alt="{{ data.lockUser.name }}" />
    				<# } #>
    				<p class="currently-editing">
    					<# if ( data.message ) { #>
    						{{{ data.message }}}
    					<# } else if ( data.allowOverride ) { #>
    						<?php
    						echo esc_html( sprintf( $l10n['locked_allow_override'], '{{ data.lockUser.name }}' ) );
    						?>
    					<# } else { #>
    						<?php
    						echo esc_html( sprintf( $l10n['locked'], '{{ data.lockUser.name }}' ) );
    						?>
    					<# } #>
    				</p>
    				<p class="notice notice-error notice-alt" hidden></p>
    				<p class="action-buttons">
    					<# if ( data.returnUrl !== data.previewUrl ) { #>
    						<a class="button customize-notice-go-back-button" href="{{ data.returnUrl }}"><?php _e( 'Go back' ); ?></a>
    					<# } #>
    					<a class="button customize-notice-preview-button" href="{{ data.frontendPreviewUrl }}"><?php _e( 'Preview' ); ?></a>
    					<# if ( data.allowOverride ) { #>
    						<button class="button button-primary wp-tab-last customize-notice-take-over-button"><?php _e( 'Take over' ); ?></button>
    					<# } #>
    				</p>
    			</div>
    		</li>
    	</script>

    	<script type="text/html" id="tmpl-customize-code-editor-lint-error-notification">
    		<li class="notice notice-{{ data.type || 'info' }} {{ data.alt ? 'notice-alt' : '' }} {{ data.dismissible ? 'is-dismissible' : '' }} {{ data.containerClasses || '' }}" data-code="{{ data.code }}" data-type="{{ data.type }}">
    			<div class="notification-message">{{{ data.message || data.code }}}</div>

    			<p>
    				<# var elementId = 'el-' + String( Math.random() ); #>
    				<input id="{{ elementId }}" type="checkbox">
    				<label for="{{ elementId }}"><?php _e( 'Update anyway, even though it might break your site?' ); ?></label>
    			</p>
    		</li>
    	</script>

    	<?php
    	/* The following template is obsolete in core but retained for plugins. */
    	?>
    	<script type="text/html" id="tmpl-customize-control-notifications">
    		<ul>
    			<# _.each( data.notifications, function( notification ) { #>
    				<li class="notice notice-{{ notification.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }}" data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{{ notification.message || notification.code }}}</li>
    			<# } ); #>
    		</ul>
    	</script>

    	<script type="text/html" id="tmpl-customize-preview-link-control" >
    		<# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
    		<p class="customize-control-title">
    			<?php esc_html_e( 'Share Preview Link' ); ?>
    		</p>
    		<p class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></p>
    		<div class="customize-control-notifications-container"></div>
    		<div class="preview-link-wrapper">
    			<label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text">
    				<?php
    				/* translators: Hidden accessibility text. */
    				esc_html_e( 'Preview Link' );
    				?>
    			</label>
    			<a href="" target="">
    				<span class="preview-control-element" data-component="url"></span>
    				<span class="screen-reader-text">
    					<?php
    					/* translators: Hidden accessibility text. */
    					_e( '(opens in a new tab)' );
    					?>
    				</span>
    			</a>
    			<input id="{{ elementPrefix }}customize-preview-link-input" readonly tabindex="-1" class="preview-control-element" data-component="input">
    			<button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
    		</div>
    	</script>
    	<script type="text/html" id="tmpl-customize-selected-changeset-status-control">
    		<# var inputId = _.uniqueId( 'customize-selected-changeset-status-control-input-' ); #>
    		<# var descriptionId = _.uniqueId( 'customize-selected-changeset-status-control-description-' ); #>
    		<# if ( data.label ) { #>
    			<label for="{{ inputId }}" class="customize-control-title">{{ data.label }}</label>
    		<# } #>
    		<# if ( data.description ) { #>
    			<span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
    		<# } #>
    		<# _.each( data.choices, function( choice ) { #>
    			<# var choiceId = inputId + '-' + choice.status; #>
    			<span class="customize-inside-control-row">
    				<input id="{{ choiceId }}" type="radio" value="{{ choice.status }}" name="{{ inputId }}" data-customize-setting-key-link="default">
    				<label for="{{ choiceId }}">{{ choice.label }}</label>
    			</span>
    		<# } ); #>
    	</script>
    	<?php
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/class-wp-customize-manager.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/class-wp-customize-manager.php#L4133)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/class-wp-customize-manager.php#L4133-L4413)

## 󠀁[Related](https://developer.wordpress.org/reference/classes/wp_customize_manager/render_control_templates/?output_format=md#related)󠁿

| Uses | Description | 
| [WP_Customize_Manager::branching()](https://developer.wordpress.org/reference/classes/wp_customize_manager/branching/)`wp-includes/class-wp-customize-manager.php` |

Whether the changeset branching is allowed.

  | 
| [esc_html_e()](https://developer.wordpress.org/reference/functions/esc_html_e/)`wp-includes/l10n.php` |

Displays translated text that has been escaped for safe use in HTML output.

  | 
| [esc_attr_e()](https://developer.wordpress.org/reference/functions/esc_attr_e/)`wp-includes/l10n.php` |

Displays translated text that has been escaped for safe use in an attribute.

  | 
| [__()](https://developer.wordpress.org/reference/functions/__/)`wp-includes/l10n.php` |

Retrieves the translation of $text.

  | 
| [_e()](https://developer.wordpress.org/reference/functions/_e/)`wp-includes/l10n.php` |

Displays translated text.

  | 
| [esc_html()](https://developer.wordpress.org/reference/functions/esc_html/)`wp-includes/formatting.php` |

Escaping for HTML blocks.

  |

[Show 3 more](https://developer.wordpress.org/reference/classes/wp_customize_manager/render_control_templates/?output_format=md#)
[Show less](https://developer.wordpress.org/reference/classes/wp_customize_manager/render_control_templates/?output_format=md#)

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_customize_manager/render_control_templates/?output_format=md#changelog)󠁿

| Version | Description | 
| [4.1.0](https://developer.wordpress.org/reference/since/4.1.0/) | Introduced. |

## User Contributed Notes

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_manager%2Frender_control_templates%2F)
before being able to contribute a note or feedback.