/** * 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');