1

I am trying to set up background color and image controls for a particular element (.site-header) on a WordPress site using WP Customizer.

The background image is functioning fine - both preview and actually writing the CSS to head. But for the background color, only the preview works but it does not actually get applied. After clicking 'Save & Publish' button and the X button, browser shows:

enter image description here

When 'Leave this Page' is clicked, the background color set in the customizer does not appear on the front end for the .site-header element.

Code in functions.php:

/**
 * HEX Color sanitization callback example.
 *
 * - Sanitization: hex_color
 * - Control: text, WP_Customize_Color_Control
 *
 * Note: sanitize_hex_color_no_hash() can also be used here, depending on whether
 * or not the hash prefix should be stored/retrieved with the hex color value.
 *
 * @see sanitize_hex_color() https://developer.wordpress.org/reference/functions/sanitize_hex_color/
 * @link sanitize_hex_color_no_hash() https://developer.wordpress.org/reference/functions/sanitize_hex_color_no_hash/
 *
 * @param string               $hex_color HEX color to sanitize.
 * @param WP_Customize_Setting $setting   Setting instance.
 * @return string The sanitized hex color if not null; otherwise, the setting default.
 */
function sk_sanitize_hex_color( $hex_color, $setting ) {
    // Sanitize $input as a hex value without the hash prefix.
    $hex_color = sanitize_hex_color( $hex_color );

    // If $input is a valid hex value, return it; otherwise, return the default.
    return ( ! null( $hex_color ) ? $hex_color : $setting->default );
}


/**
 * Image sanitization callback example.
 *
 * Checks the image's file extension and mime type against a whitelist. If they're allowed,
 * send back the filename, otherwise, return the setting default.
 *
 * - Sanitization: image file extension
 * - Control: text, WP_Customize_Image_Control
 *
 * @see wp_check_filetype() https://developer.wordpress.org/reference/functions/wp_check_filetype/
 *
 * @param string               $image   Image filename.
 * @param WP_Customize_Setting $setting Setting instance.
 * @return string The image filename if the extension is allowed; otherwise, the setting default.
 */
function sk_sanitize_image( $image, $setting ) {

    /*
     * Array of valid image file types.
     *
     * The array includes image mime types that are included in wp_get_mime_types()
     */
    $mimes = array(
        'jpg|jpeg|jpe' => 'image/jpeg',
        'gif'          => 'image/gif',
        'png'          => 'image/png',
        'bmp'          => 'image/bmp',
        'tif|tiff'     => 'image/tiff',
        'ico'          => 'image/x-icon'
    );

    // Return an array with file extension and mime_type.
    $file = wp_check_filetype( $image, $mimes );

    // If $image has a valid mime_type, return it; otherwise, return the default.
    return ( $file['ext'] ? $image : $setting->default );
}


/**
 * Customizer: Add Sections
 *
 * This file demonstrates how to add Sections to the Customizer
 *
 * @package   code-examples
 * @copyright Copyright (c) 2015, WordPress Theme Review Team
 * @license   http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU General Public License, v2 (or newer)
 */


/**
 * Theme Options Customizer Implementation.
 *
 * Implement the Theme Customizer for Theme Settings.
 *
 * @link http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/
 *
 * @param WP_Customize_Manager $wp_customize Object that holds the customizer data.
 */
function sk_register_theme_customizer( $wp_customize ) {

    /*
     * Failsafe is safe
     */
    if ( ! isset( $wp_customize ) ) {
        return;
    }


    /**
     * Add Header Section for General Options.
     *
     * @uses $wp_customize->add_section() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_section/
     * @link $wp_customize->add_section() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
     */
    $wp_customize->add_section(
        // $id
        'sk_section_header',
        // $args
        array(
            'title'         => __( 'Header Background', 'theme-slug' ),
            'description'   => __( 'Set background color and/or background image for the header', 'theme-slug' ),
            // 'panel'          => 'sk_panel_general'
        )
    );


    /**
     * Header Background Color setting.
     *
     * - Setting: Header Background Color
     * - Control: WP_Customize_Color_Control
     * - Sanitization: hex_color
     *
     * Uses a color wheel to configure the Header Background Color setting.
     *
     * @uses $wp_customize->add_setting() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_setting/
     * @link $wp_customize->add_setting() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
     */
    $wp_customize->add_setting(
        // $id
        'header_background_color',
        // $args
        array(
            'default'           => '',
            'type'              => 'theme_mod',
            'capability'        => 'edit_theme_options',
            'sanitize_callback' => 'sk_sanitize_hex_color',
            'transport'         => 'postMessage'
        )
    );


    /**
     * Header Background Image setting.
     *
     * - Setting: Header Background Image
     * - Control: WP_Customize_Image_Control
     * - Sanitization: image
     *
     * Uses the media manager to upload and select an image to be used as the header background image.
     *
     * @uses $wp_customize->add_setting() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_setting/
     * @link $wp_customize->add_setting() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
     */
    $wp_customize->add_setting(
        // $id
        'header_background_image',
        // $args
        array(
            'default'           => '',
            'type'              => 'theme_mod',
            'capability'        => 'edit_theme_options',
            'sanitize_callback' => 'sk_sanitize_image',
            'transport'         => 'postMessage'
        )
    );

    /**
     * Core Color control.
     *
     * - Control: Color
     * - Setting: Header Background Color
     * - Sanitization: hex_color
     *
     * Register "WP_Customize_Color_Control" to be used to configure the Header Background Color setting.
     *
     * @uses $wp_customize->add_control() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_control/
     * @link $wp_customize->add_control() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
     *
     * @uses WP_Customize_Color_Control() https://developer.wordpress.org/reference/classes/wp_customize_color_control/
     * @link WP_Customize_Color_Control() https://codex.wordpress.org/Class_Reference/WP_Customize_Color_Control
     */
    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            // $wp_customize object
            $wp_customize,
            // $id
            'header_background_color',
            // $args
            array(
                'settings'      => 'header_background_color',
                'section'       => 'sk_section_header',
                'label'         => __( 'Header Background Color', 'theme-slug' ),
                'description'   => __( 'Select the background color for header.', 'theme-slug' )
            )
        )
    );


    /**
     * Image Upload control.
     *
     * Control: Image Upload
     * Setting: Header Background Image
     * Sanitization: image
     *
     * Register "WP_Customize_Image_Control" to be used to configure the Header Background Image setting.
     *
     * @uses $wp_customize->add_control() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_control/
     * @link $wp_customize->add_control() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
     *
     * @uses WP_Customize_Image_Control() https://developer.wordpress.org/reference/classes/wp_customize_image_control/
     * @link WP_Customize_Image_Control() https://codex.wordpress.org/Class_Reference/WP_Customize_Image_Control
     */
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            // $wp_customize object
            $wp_customize,
            // $id
            'header_background_image',
            // $args
            array(
                'settings'      => 'header_background_image',
                'section'       => 'sk_section_header',
                'label'         => __( 'Header Background Image', 'theme-slug' ),
                'description'   => __( 'Select the background image for header.', 'theme-slug' )
            )
        )
    );


}

// Settings API options initilization and validation.
add_action( 'customize_register', 'sk_register_theme_customizer' );


/**
 * Registers the Theme Customizer Preview with WordPress.
 *
 * @package    sk
 * @since      0.3.0
 * @version    0.3.0
 */
function sk_customizer_live_preview() {
    wp_enqueue_script(
        'sk-theme-customizer',
        get_stylesheet_directory_uri() . '/js/theme-customizer.js',
        array( 'customize-preview' ),
        '0.1.0',
        true
    );
} // end sk_customizer_live_preview
add_action( 'customize_preview_init', 'sk_customizer_live_preview' );


/**
 * Writes the Header Background Color and/or Image out to the 'head' element of the document
 * by reading the value(s) from the theme mod value in the options table.
 */
function sk_customizer_css() {
?>
     <style type="text/css">
        .site-header {
            background-color: <?php echo get_theme_mod( 'header_background_color' ); ?>;
        }

        <?php if ( 0 < count( strlen( ( $header_background_image_url = get_theme_mod( 'header_background_image' ) ) ) ) ) { ?>
            .site-header {
                background-image: url( <?php echo $header_background_image_url; ?> );
            }
        <?php } // end if ?>
     </style>
<?php
} // end sk_customizer_css

add_action( 'wp_head', 'sk_customizer_css');

Code in js/theme-customizer.js:

(function( $ ) {
    "use strict";

    // Header Background Color - Color Control
    wp.customize( 'header_background_color', function( value ) {
        value.bind( function( to ) {
            $( '.site-header' ).css( 'backgroundColor', to );
        } );
    });

    // Header Background Image - Image Control
    wp.customize( 'header_background_image', function( value ) {
        value.bind( function( to ) {
            $( '.site-header' ).css( 'background-image', 'url( ' + to + ')' );
        } );
    });


})( jQuery );

Any idea?

I followed http://code.tutsplus.com/series/a-guide-to-the-wordpress-theme-customizer--wp-33722 and https://github.com/WPTRT/code-examples/tree/master/customizer.

  • 1
    You forgot to add the '#'. I think that code will be this .site-header { background-color: #<?php echo get_theme_mod( 'header_background_color' ); ?>; } – Chinmoy Kumar Paul Oct 29 '15 at 16:40
1

Also I modified two things

One:

$wp_customize->add_setting(
    // $id
    'header_background_color',
    // $args
    array(
        'default'           => '',
        'type'              => 'theme_mod',
        'capability'        => 'edit_theme_options',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage'
    )
);

Two:

$wp_customize->add_control(
    new WP_Customize_Color_Control(
        // $wp_customize object
        $wp_customize,
        // $id
        'header_background_color',
        // $args
        array(
            'settings'      => 'header_background_color',
            'section'       => 'sk_section_header',
            'label'         => __( 'Header Background Color', 'theme-slug' ),
            'description'   => __( 'Select the background color for header.', 'theme-slug' ),
            'type'          => 'color',

        )
    )
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.