Title: Custom_Image_Header::js_2
Published: April 25, 2014
Last modified: May 20, 2026

---

# Custom_Image_Header::js_2()

## In this article

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

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

Displays JavaScript based on Step 2.

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

    ```php
    	public function js_2() {

    		?>
    <script>
    	function onEndCrop( coords ) {
    		jQuery( '#x1' ).val(coords.x);
    		jQuery( '#y1' ).val(coords.y);
    		jQuery( '#width' ).val(coords.w);
    		jQuery( '#height' ).val(coords.h);
    	}

    	jQuery( function() {
    		var xinit = <?php echo absint( get_theme_support( 'custom-header', 'width' ) ); ?>;
    		var yinit = <?php echo absint( get_theme_support( 'custom-header', 'height' ) ); ?>;
    		var ratio = xinit / yinit;
    		var ximg = jQuery('img#upload').width();
    		var yimg = jQuery('img#upload').height();

    		if ( yimg < yinit || ximg < xinit ) {
    			if ( ximg / yimg > ratio ) {
    				yinit = yimg;
    				xinit = yinit * ratio;
    			} else {
    				xinit = ximg;
    				yinit = xinit / ratio;
    			}
    		}

    		jQuery('img#upload').imgAreaSelect({
    			handles: true,
    			keys: true,
    			show: true,
    			x1: 0,
    			y1: 0,
    			x2: xinit,
    			y2: yinit,
    			<?php
    			if ( ! current_theme_supports( 'custom-header', 'flex-height' )
    				&& ! current_theme_supports( 'custom-header', 'flex-width' )
    			) {
    				?>
    			aspectRatio: xinit + ':' + yinit,
    				<?php
    			}
    			if ( ! current_theme_supports( 'custom-header', 'flex-height' ) ) {
    				?>
    			maxHeight: <?php echo get_theme_support( 'custom-header', 'height' ); ?>,
    				<?php
    			}
    			if ( ! current_theme_supports( 'custom-header', 'flex-width' ) ) {
    				?>
    			maxWidth: <?php echo get_theme_support( 'custom-header', 'width' ); ?>,
    				<?php
    			}
    			?>
    			onInit: function () {
    				jQuery('#width').val(xinit);
    				jQuery('#height').val(yinit);
    			},
    			onSelectChange: function(img, c) {
    				jQuery('#x1').val(c.x1);
    				jQuery('#y1').val(c.y1);
    				jQuery('#width').val(c.width);
    				jQuery('#height').val(c.height);
    			}
    		});
    	} );
    </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/7.0/src/wp-admin/includes/class-custom-image-header.php#L431)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/7.0/src/wp-admin/includes/class-custom-image-header.php#L431-L500)

## 󠀁[Related](https://developer.wordpress.org/reference/classes/custom_image_header/js_2/?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.

  | 
| [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.

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

Converts a value to non-negative integer.

  |

[Show 1 more](https://developer.wordpress.org/reference/classes/custom_image_header/js_2/?output_format=md#)
[Show less](https://developer.wordpress.org/reference/classes/custom_image_header/js_2/?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_2/?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_2%2F)
before being able to contribute a note or feedback.