Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to use Customizer API to add settings for Header background color and background image in Genesis. https://sridharkatakam.com/how-to-use-customizer-api-to-add-settings-for-header-background-color-and-background-image-in-genesis/
/**
* HEX Color sanitization callback.
*
* - 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.
$hex_color = sanitize_hex_color( $hex_color );
// If $input is a valid hex value, return it; otherwise, return the default.
return ( ! is_null( $hex_color ) ? $hex_color : $setting->default );
}
/**
* Image sanitization callback.
*
* 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 );
}
/**
* Checkbox sanitization callback.
*
* Sanitization callback for 'checkbox' type controls. This callback sanitizes `$checked`
* as a boolean value, either TRUE or FALSE.
*
* @param bool $checked Whether the checkbox is checked.
* @return bool Whether the checkbox is checked.
*/
function sk_sanitize_checkbox( $checked ) {
// Boolean check.
return ( ( isset( $checked ) && true == $checked ) ? true : false );
}
/**
* Customizer: Add Sections
*
* This code adds a Section with multiple Settings and Controls 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' ),
'priority' => 9
)
);
/**
* 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_setting',
// $args
array(
'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_setting',
// $args
array(
'default' => '',
'sanitize_callback' => 'sk_sanitize_image',
'transport' => 'postMessage'
)
);
/**
* Display Header Backgroud Image Repeat setting.
*
* - Setting: Display Header Backgroud Image Repeat
* - Control: checkbox
* - Sanitization: checkbox
*
* Uses a checkbox to configure the display of the header background image repeat checkbox.
*
* @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_repeat_setting',
// $args
array(
'default' => true,
'sanitize_callback' => 'sk_sanitize_checkbox',
'transport' => 'postMessage'
)
);
/**
* Display Header Backgroud Image Size setting.
*
* - Setting: Display Header Backgroud Image Size
* - Control: checkbox
* - Sanitization: checkbox
*
* Uses a checkbox to configure the display of the header background image repeat checkbox.
*
* @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_size_setting',
// $args
array(
'default' => false,
'sanitize_callback' => 'sk_sanitize_checkbox',
'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_setting',
'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_setting',
'section' => 'sk_section_header',
'label' => __( 'Header Background Image', 'theme-slug' ),
'description' => __( 'Select the background image for header.', 'theme-slug' )
)
)
);
/**
* Basic Checkbox control.
*
* - Control: Basic: Checkbox
* - Setting: Display Header Backgroud Image Repeat
* - Sanitization: checkbox
*
* Register the core "checkbox" control to be used to configure the Display Header Backgroud Image Repeat 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
*/
$wp_customize->add_control(
// $id
'header_background_image_repeat',
// $args
array(
'settings' => 'header_background_image_repeat_setting',
'section' => 'sk_section_header',
'type' => 'checkbox',
'label' => __( 'Background Repeat', 'theme-slug' ),
'description' => __( 'Should the header background image repeat?', 'theme-slug' ),
)
);
/**
* Basic Checkbox control.
*
* - Control: Basic: Checkbox
* - Setting: Display Header Backgroud Image Size
* - Sanitization: checkbox
*
* Register the core "checkbox" control to be used to configure the Display Header Backgroud Image Size 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
*/
$wp_customize->add_control(
// $id
'header_background_image_size',
// $args
array(
'settings' => 'header_background_image_size_setting',
'section' => 'sk_section_header',
'type' => 'checkbox',
'label' => __( 'Background Stretch', 'theme-slug' ),
'description' => __( 'Should the header background image stretch in full?', '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 related controls' values 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() {
if ( ! get_theme_mod( 'header_background_color_setting' ) && '' === get_theme_mod( 'header_background_image_setting' ) && false === get_theme_mod( 'header_background_image_repeat_setting' ) && false === get_theme_mod( 'header_background_image_size_setting' ) ) {
return;
}
?>
<style type="text/css">
.site-header {
<?php if ( get_theme_mod( 'header_background_color_setting' ) ) { ?>
background-color: <?php echo get_theme_mod( 'header_background_color_setting' ); ?>;
<?php } ?>
<?php if ( get_theme_mod( 'header_background_image_setting' ) != '' ) { ?>
background-image: url(<?php echo get_theme_mod( 'header_background_image_setting' ); ?>);
<?php } ?>
<?php if ( true === get_theme_mod( 'header_background_image_repeat_setting' ) ) { ?>
background-repeat: repeat;
<?php } ?>
<?php if ( true === get_theme_mod( 'header_background_image_size_setting' ) ) { ?>
background-size: cover;
<?php } ?>
}
</style>
<?php
} // end sk_customizer_css
add_action( 'wp_head', 'sk_customizer_css');
(function( $ ) {
"use strict";
// Header Background Color - Color Control
wp.customize( 'header_background_color_setting', function( value ) {
value.bind( function( to ) {
$( '.site-header' ).css( 'backgroundColor', to );
} );
});
// Header Background Image - Image Control
wp.customize( 'header_background_image_setting', function( value ) {
value.bind( function( to ) {
$( '.site-header' ).css( 'background-image', 'url( ' + to + ')' );
} );
});
// Header Background Image Repeat - Checkbox
wp.customize( 'header_background_image_repeat_setting', function( value ) {
value.bind( function( to ) {
$( '.site-header' ).css( 'background-repeat', true === to ? 'repeat' : 'no-repeat' );
} );
} );
// Header Background Image Size - Checkbox
wp.customize( 'header_background_image_size_setting', function( value ) {
value.bind( function( to ) {
$( '.site-header' ).css( 'background-size', true === to ? 'cover' : 'auto auto' );
} );
} );
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment