How to add css option to Header Image customizer?

Question

I have added the Custom Header Theme Option to the Rowling theme. It works fine but I want to extend this by adding CSS controls in the customizer for backgound-size, and background-position.

Please can someone enlighten me as to how I can achieve this.

Answer 1

So I guess you've register your custom header within your child themes functions.php file:

add_theme_support( 'custom-header' );

Next locate the customizer section and append your own setting/controls for the theme customizer. Let's say we want to register background_position and background_size and store it within an array custom_header_meta:

add_action( 'customize_register', 'wpse_customize_custom_header_meta' );
function wpse_customize_custom_header_meta( \WP_Customize_Manager $wp_customize ) {

    $wp_customize->add_setting(
        'custom_header_meta[background_position]',
        array(
            'default'    => 'left',
            'capability' => 'edit_theme_options',
            'type'       => 'option'
        )
    );

    $wp_customize->add_control(
        'custom_header_background_position',
        array(
            'settings' => 'custom_header_meta[background_position]',
            'label'    => __( 'Background position:', 'textdomain' ),
            'section'  => 'header_image',
            'type'     => 'select',
            'choices'  => array(
                'right' => 'right',
                'left'  => 'left'
            )
        )
    );

    $wp_customize->add_setting(
        'custom_header_meta[background_size]',
        array(
            'default'    => 'auto',
            'capability' => 'edit_theme_options',
            'type'       => 'option'
        )
    );

    $wp_customize->add_control(
        'custom_header_background_size',
        array(
            'settings' => 'custom_header_meta[background_size]',
            'label'    => __( 'Background size:', 'textdomain' ),
            'section'  => 'header_image',
            'type'     => 'select',
            'choices'  => array(
                'auto'    => 'auto',
                'cover'   => 'cover',
                'contain' => 'contain'
            )
        )
    );

}

I think you'll get the idea; feel free to play around with this or add further fields. Check the examples provided in the Codex for reference.

After that we can render the values (stored as array) as well as the WordPress custom header image using wp_add_inline_style function:

add_action( 'wp_enqueue_scripts', 'wpse_rowling_inline_styles' );
function wpse_rowling_inline_styles() {

    // Get custom header meta from customizer with defaults.
    $default_header_meta = array(
        'background_position' => 'left',
        'background_size'     => 'auto'
    );
    $header_meta = get_option( 'custom_header_meta', $default_header_meta );

    // Render header meta as CSS parameters.
    $header_styles = '';
    foreach ( $header_meta as $key => $val ) {
        $header_styles .= str_replace( '_', '-', $key ) . ':' . $val . ';';
    }

    // Render header image as CSS parameters.
    if ( get_header_image() ) {
        $header_image = get_theme_mod( 'header_image_data' );
        $header_styles .= 'background-image:url(' . $header_image->url . ');';
        $header_styles .= 'width:' . (string) $header_image->width . 'px;';
        $header_styles .= 'height:' . (string) $header_image->height . 'px;';
    }

    // Finally render CSS selector with parameters.
    $custom_css = ".header_image { $header_styles }";

    wp_add_inline_style( 'rowling_style', $custom_css );

}

You should now see the styles for the element with the class header_image within your source code as well as the rendered version in the live preview besides the rowling customizer.

Further reading: Also check theme support for custom-background as this provides basic support for image styles out of the box (not available in the customizer per default).