Title: Custom_Image_Header::js_1
Published: April 25, 2014
Last modified: April 28, 2025

---

# Custom_Image_Header::js_1()

## In this article

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

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

Displays JavaScript based on Step 1 and 3.

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

    ```php
    	public function js_1() {
    		$default_color = '';
    		if ( current_theme_supports( 'custom-header', 'default-text-color' ) ) {
    			$default_color = get_theme_support( 'custom-header', 'default-text-color' );
    			if ( $default_color && ! str_contains( $default_color, '#' ) ) {
    				$default_color = '#' . $default_color;
    			}
    		}
    		?>
    <script type="text/javascript">
    (function($){
    	var default_color = '<?php echo esc_js( $default_color ); ?>',
    		header_text_fields;

    	function pickColor(color) {
    		$('#name').css('color', color);
    		$('#desc').css('color', color);
    		$('#text-color').val(color);
    	}

    	function toggle_text() {
    		var checked = $('#display-header-text').prop('checked'),
    			text_color;
    		header_text_fields.toggle( checked );
    		if ( ! checked )
    			return;
    		text_color = $('#text-color');
    		if ( '' === text_color.val().replace('#', '') ) {
    			text_color.val( default_color );
    			pickColor( default_color );
    		} else {
    			pickColor( text_color.val() );
    		}
    	}

    	$( function() {
    		var text_color = $('#text-color');
    		header_text_fields = $('.displaying-header-text');
    		text_color.wpColorPicker({
    			change: function( event, ui ) {
    				pickColor( text_color.wpColorPicker('color') );
    			},
    			clear: function() {
    				pickColor( '' );
    			}
    		});
    		$('#display-header-text').click( toggle_text );
    		<?php if ( ! display_header_text() ) : ?>
    		toggle_text();
    		<?php endif; ?>
    	} );
    })(jQuery);
    </script>
    		<?php
    	}
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-admin/includes/class-custom-image-header.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-admin/includes/class-custom-image-header.php#L370)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-admin/includes/class-custom-image-header.php#L370-L424)

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

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

Gets the theme support arguments passed when registering that support.

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

Whether to display the header text.

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

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

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

Checks a theme’s support for a given feature.

  |

[Show 1 more](https://developer.wordpress.org/reference/classes/custom_image_header/js_1/?output_format=md#)
[Show less](https://developer.wordpress.org/reference/classes/custom_image_header/js_1/?output_format=md#)

| Used by | Description | 
| [Custom_Image_Header::js()](https://developer.wordpress.org/reference/classes/custom_image_header/js/)`wp-admin/includes/class-custom-image-header.php` |

Executes JavaScript depending on step.

  |

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

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

## User Contributed Notes

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