Theme Customizer Custom Background / Header Image

1 Views

I’m working on a theme with some options to change the design. For the options I am using the Theme customizer. With the theme customizer there are many option types like color, upload, image upload, background image and header image.
I am adding the background image control with this code: 

function tcx_register_theme_customizer( $wp_customize ) {
    $wp_customize->add_section(
            'tcx_advanced_options',
            array(
                    'title'     => 'Advanced Options',
                    'priority'  => 201
            )
    );

    $wp_customize->add_setting(
            'tcx_background_image',
            array(
                'default'      => '',
                'transport'    => 'postMessage'
            )
    );

    $wp_customize->add_control(
            new WP_Customize_Background_Image_Control(
                    $wp_customize,
                    'tcx_background_image',
                    array(
                        'label'    => 'Background Image',
                        'settings' => 'tcx_background_image',
                        'section'  => 'tcx_advanced_options'
                    )
            )
    );
}
add_action( 'customize_register', 'tcx_register_theme_customizer' );

but the control won’t be displayed in the Theme Customizer. The same with the header image. ‘Image Upload’, ‘Upload’ and all other types like ‘text’, radio, etc. works fine.
I don’t want to use it with add_theme_support because i don’t want the menu entries under the “Design” section because it can be confusing for the client.
(Sry for my bad english 🙂 )

Read More

Update: thats the code I am using. New section, new setting and the control for the WordPress built-in Background Image.

Post Views: 1

Related posts

2 comments

  1. Here’s some code I use which places a control in the Title’s and Taglines section to add a logo image..

    $wp_customize->add_setting( 'theme_logo' );
$wp_customize->add_control( 
    new WP_Customize_Image_Control(
        $wp_customize,'theme_logo',array(
            'label' => 'Logo',
            'section' => 'title_tagline',
            'settings' => 'theme_logo',
            'priority' => 1
        )
    )
);

    I then call it in header.php with this bit..

    <?php if( get_theme_mod( 'theme_logo' ) != '') { ?> // if there is a logo img
    <img src="<?php echo get_theme_mod('tonic_logo'); ?>">
<?php } ?>

    For a background image you can use the exact same thing as the logo..

    $wp_customize->add_setting( 'theme_header_bg' );
$wp_customize->add_control( 
    new WP_Customize_Image_Control(
        $wp_customize,'theme_header_bg',array(
            'label' => 'Header Background Image',
            'section' => 'title_tagline',
            'settings' => 'theme_header_bg',
            'priority' => 2
        )
    )
);

    We’ve got the control all set up, in an identical fashion as the other image (the logo). Now to header.php we just call it slightly different so it appears as a background rather than an img..

    <?php 
    if( get_theme_mod( 'theme_header_bg' ) != '') { // if there is a background img
        $theme_header_bg = get_theme_mod('theme_header_bg'); // Assigning it to a variable to keep the markup clean
    }
?>

<header style="background-image:url('<?php echo $theme_header_bg ?>');">

  2. Thanks, but I’ve added another one to fix a bug (at home at least 😉

    if( get_theme_mod( 'theme_header_bg' ) != '') { // if there is a background img
    $theme_header_bg = get_theme_mod('theme_header_bg'); // Assigning it to a variable to keep the markup clean
} else {
    $theme_header_bg = ""
}

Comments are closed.