最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Theme Customizer Custom BackgroundHeader Image

programmeradmin4浏览0评论

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 :) )

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

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 :) )

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

Share Improve this question edited Nov 25, 2013 at 17:07 Markus Schober asked Nov 20, 2013 at 14:53 Markus SchoberMarkus Schober 2051 gold badge3 silver badges7 bronze badges 2
  • 1 Post enough code that your problem can replicated please. – s_ha_dum Commented Nov 20, 2013 at 15:16
  • @s_ha_dum Thats the code I am using. Works with all types of control except Background Image and Header Image. – Markus Schober Commented Nov 25, 2013 at 17:08
Add a comment  | 

2 Answers 2

Reset to default 4

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 ?>');">  

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 = ""
}
发布评论

评论列表(0)

  1. 暂无评论