Title: WP_Customize_Site_Icon_Control::content_template
Published: April 12, 2016
Last modified: May 20, 2026

---

# WP_Customize_Site_Icon_Control::content_template()

## In this article

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

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

Renders a JS template for the content of the site icon control.

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

    ```php
    public function content_template() {
    	?>
    	<# if ( data.label ) { #>
    		<span class="customize-control-title">{{ data.label }}</span>
    	<# } #>

    	<# if ( data.attachment && data.attachment.id ) { #>
    		<div class="attachment-media-view">
    			<# if ( data.attachment.sizes ) { #>
    				<style>
    					:root{
    						--site-icon-url: url( '{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}' );
    					}
    				</style>
    				<div class="site-icon-preview customizer">
    					<div class="direction-wrap">
    						<img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="app-icon-preview" alt="{{
    							data.attachment.alt ?
    								wp.i18n.sprintf(
    									<?php
    									/* translators: %s: The selected image alt text. */
    									echo wp_json_encode( __( 'App icon preview: Current image: %s' ) )
    									?>
    									,
    									data.attachment.alt
    								) :
    								wp.i18n.sprintf(
    									<?php
    									/* translators: %s: The selected image filename. */
    									echo wp_json_encode( __( 'App icon preview: The current image has no alternative text. The file name is: %s' ) );
    									?>
    									,
    									data.attachment.filename
    								)
    						}}" />
    						<div class="site-icon-preview-browser">
    							<svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="browser-buttons"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm18 0a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm24-6a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z" /></svg>
    							<div class="site-icon-preview-tab">
    								<img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="browser-icon-preview" alt="{{
    									data.attachment.alt ?
    										wp.i18n.sprintf(
    											<?php
    											/* translators: %s: The selected image alt text. */
    											echo wp_json_encode( __( 'Browser icon preview: Current image: %s' ) );
    											?>
    											,
    											data.attachment.alt
    										) :
    										wp.i18n.sprintf(
    											<?php
    											/* translators: %s: The selected image filename. */
    											echo wp_json_encode( __( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ) );
    											?>
    											,
    											data.attachment.filename
    										)
    								}}" />
    								<div class="site-icon-preview-site-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></div>
    									<svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="close-button">
    										<path d="M12 13.0607L15.7123 16.773L16.773 15.7123L13.0607 12L16.773 8.28772L15.7123 7.22706L12 10.9394L8.28771 7.22705L7.22705 8.28771L10.9394 12L7.22706 15.7123L8.28772 16.773L12 13.0607Z" />
    									</svg>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			<# } #>
    			<div class="actions">
    				<# if ( data.canUpload ) { #>
    					<button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
    					<button type="button" class="button upload-button"><?php echo $this->button_labels['change']; ?></button>
    				<# } #>
    			</div>
    		</div>
    	<# } else { #>
    		<div class="attachment-media-view">
    			<# if ( data.canUpload ) { #>
    				<button type="button" class="upload-button button"><?php echo $this->button_labels['site_icon']; ?></button>
    			<# } #>
    			<div class="actions">
    				<# if ( data.defaultAttachment ) { #>
    					<button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
    				<# } #>
    			</div>
    		</div>
    	<# } #>
    	<# if ( data.description ) { #>
    		<span class="description customize-control-description">{{{ data.description }}}</span>
    	<# } #>
    	<?php
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/customize/class-wp-customize-site-icon-control.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/7.0/src/wp-includes/customize/class-wp-customize-site-icon-control.php#L52)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/7.0/src/wp-includes/customize/class-wp-customize-site-icon-control.php#L52-L142)

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

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

Escapes single quotes, `"`, , `&amp;`, and fixes line endings.

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

Encodes a variable into JSON, with some confidence checks.

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

Retrieves the translation of $text.

  | 
| [get_bloginfo()](https://developer.wordpress.org/reference/functions/get_bloginfo/)`wp-includes/general-template.php` |

Retrieves information about the current site.

  |

[Show 2 more](https://developer.wordpress.org/reference/classes/wp_customize_site_icon_control/content_template/?output_format=md#)
[Show less](https://developer.wordpress.org/reference/classes/wp_customize_site_icon_control/content_template/?output_format=md#)

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

| Version | Description | 
| [4.5.0](https://developer.wordpress.org/reference/since/4.5.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_site_icon_control%2Fcontent_template%2F)
before being able to contribute a note or feedback.