Last active
November 13, 2019 17:28
-
-
Save srikat/95d118a4caa1a071dc1c to your computer and use it in GitHub Desktop.
How to use WordPress Customizer for setting up Background Image of a section in Genesis. https://sridharkatakam.com/how-to-use-wordpress-customizer-for-setting-up-background-image-of-a-section-in-genesis/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Theme Options Customizer Implementation. | |
* | |
* @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 'Home Top' Section. | |
*/ | |
$wp_customize->add_section( | |
// $id | |
'sk_section_home_top', | |
// $args | |
array( | |
'title' => __( 'Home Top', 'theme-slug' ), | |
// 'description' => __( 'Some description for the options in the Home Top section', 'theme-slug' ), | |
'active_callback' => 'is_front_page', | |
) | |
); | |
/** | |
* Add 'Home Top Background Image' Setting. | |
*/ | |
$wp_customize->add_setting( | |
// $id | |
'sk_home_top_background_image', | |
// $args | |
array( | |
'default' => get_stylesheet_directory_uri() . '/images/minimography_005_orig.jpg', | |
'sanitize_callback' => 'esc_url_raw', | |
'transport' => 'postMessage' | |
) | |
); | |
/** | |
* Add 'Home Top Background Image' image upload Control. | |
*/ | |
$wp_customize->add_control( | |
new WP_Customize_Image_Control( | |
// $wp_customize object | |
$wp_customize, | |
// $id | |
'sk_home_top_background_image', | |
// $args | |
array( | |
'settings' => 'sk_home_top_background_image', | |
'section' => 'sk_section_home_top', | |
'label' => __( 'Home Top Background Image', 'theme-slug' ), | |
'description' => __( 'Select the image to be used for Home Top Background.', 'theme-slug' ) | |
) | |
) | |
); | |
} | |
// Settings API options initilization and validation. | |
add_action( 'customize_register', 'sk_register_theme_customizer' ); | |
/** | |
* Writes the Home Top background image out to the 'head' element of the document | |
* by reading the value from the theme mod value in the options table. | |
*/ | |
function sk_customizer_css() { | |
?> | |
<style type="text/css"> | |
<?php | |
if ( get_theme_mod( 'sk_home_top_background_image' ) ) { | |
$home_top_background_image_url = get_theme_mod( 'sk_home_top_background_image' ); | |
} else { | |
$home_top_background_image_url = get_stylesheet_directory_uri() . '/images/minimography_005_orig.jpg'; | |
} | |
// if ( 0 < count( strlen( ( $home_top_background_image_url = get_theme_mod( 'sk_home_top_background_image', sprintf( '%s/images/minimography_005_orig.jpg', get_stylesheet_directory_uri() ) ) ) ) ) ) { ?> | |
.home-top { | |
background-image: url( <?php echo $home_top_background_image_url; ?> ); | |
} | |
<?php // } // end if ?> | |
</style> | |
<?php | |
} // end sk_customizer_css | |
add_action( 'wp_head', 'sk_customizer_css'); | |
/** | |
* 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' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.home-top { | |
background: url("images/picjumbo.com_IMG_6424-1600.jpg") no-repeat; | |
border-top: 1px solid #333; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.home-top { | |
/*background-image: url("images/minimography_005_orig.jpg");*/ | |
background-repeat: no-repeat; | |
border-top: 1px solid #333; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function( $ ) { | |
"use strict"; | |
// Home Top Background Image - Image Control | |
wp.customize( 'sk_home_top_background_image', function( value ) { | |
value.bind( function( to ) { | |
$( '.home-top' ).css( 'background-image', 'url( ' + to + ')' ); | |
} ); | |
}); | |
})( jQuery ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment