add_setting( 'logo_size', array( 'default' => 50, 'type' => 'theme_mod', 'theme_supports' => 'custom-logo', 'transport' => 'postMessage', 'sanitize_callback' => 'absint', 'sanitize_js_callback' => 'absint', ) ); $wp_customize->add_control( 'logo_size', array( 'label' => esc_html__( 'Logo Size', 'twentynineteen' ), 'section' => 'title_tagline', 'priority' => 9, 'type' => 'range', 'settings' => 'logo_size', 'input_attrs' => array( 'step' => 5, 'min' => 0, 'max' => 100, 'aria-valuemin' => 0, 'aria-valuemax' => 100, 'aria-valuenow' => 50, 'aria-orientation' => 'horizontal', ), ) ); } add_action( 'customize_register', 'logo_awesomeness_customize_register' ); /** * Add support for logo resizing by filtering `get_custom_logo` */ function logo_awesomeness_customize_logo_resize( $html ) { $max = []; $img = []; $size = get_theme_mod( 'logo_size' ); $custom_logo_id = get_theme_mod( 'custom_logo' ); // set the short side minimum $min = 48; // don't use empty() because we can still use a 0 if ( is_numeric( $size ) && is_numeric( $custom_logo_id ) ) { // we're looking for $img['width'] and $img['height'] of original image $logo = wp_get_attachment_metadata( $custom_logo_id ); if ( ! $logo ) return $html; // get the logo support size $sizes = get_theme_support( 'custom-logo' ); // Check for max height and width, default to image sizes if none set in theme $max['height'] = isset( $sizes[0]['height'] ) ? $sizes[0]['height'] : $logo['height']; $max['width'] = isset( $sizes[0]['width'] ) ? $sizes[0]['width'] : $logo['width']; // landscape or square if ( $logo['width'] >= $logo['height'] ) { $output = logo_awesomeness_min_max( $logo['height'], $logo['width'], $max['height'], $max['width'], $size, $min ); $img = array( 'height' => $output['short'], 'width' => $output['long'] ); // portrait } else if ( $logo['width'] < $logo['height'] ) { $output = logo_awesomeness_min_max( $logo['width'], $logo['height'], $max['width'], $max['height'], $size, $min ); $img = array( 'height' => $output['long'], 'width' => $output['short'] ); } // add the CSS $css = ' '; $html = $css . $html; } return $html; } add_filter( 'get_custom_logo', 'logo_awesomeness_customize_logo_resize' ); /* Helper function to determine the max size of the logo */ function logo_awesomeness_min_max( $short, $long, $short_max, $long_max, $percent, $min ){ $max = []; $size = []; $ratio = ( $long / $short ); $max['long'] = ( $long_max >= $long ) ? $long : $long_max; $max['short'] = ( $short_max >= ( $max['long'] / $ratio ) ) ? floor( $max['long'] / $ratio ) : $short_max; $ppp = ( $max['short'] - $min ) / 100; $size['short'] = round( $min + ( $percent * $ppp ) ); $size['long'] = round( $size['short'] / ( $short / $long ) ); return $size; } /** * Binds JS handlers to make Theme Customizer preview reload changes asynchronously. */ function logo_awesomeness_customize_preview_js() { wp_enqueue_script( 'logo-awesomeness-customizer', get_template_directory_uri() . '/js/logo/customize-preview.js', array( 'jquery', 'customize-preview' ), '201709081119', true ); } add_action( 'customize_preview_init', 'logo_awesomeness_customize_preview_js' ); /** * JS handlers for Customizer Controls */ function logo_awesomeness_customize_controls_js() { wp_enqueue_script( 'logo-awesomeness-customizer-controls', get_template_directory_uri() . '/js/logo/customize-controls.js', array( 'jquery', 'customize-controls' ), '20171020', true ); } add_action( 'customize_controls_enqueue_scripts', 'logo_awesomeness_customize_controls_js' ); /** * Adds CSS to the Customizer controls. */ function logo_awesomeness_customize_css() { wp_add_inline_style( 'customize-controls', '#customize-control-logo_size input[type=range] { width: 100%; }' ); } add_action( 'customize_controls_enqueue_scripts', 'logo_awesomeness_customize_css' );